Guest Book UT24-WEB.INFO Silahkan Tinggalkan Jejak Disini, Tapi Ingat Jagalah Kesopanan...!!
.:: Happy Blogging ::.

Cara membuat Menu Bar ( Sub Menu ) pada blog




Kali ini saya akan share tutorial tentang cara membuat menu bar ( sub menu ) pada blog. Karena banyaknya sobat blogger yang berkomentar ( Request ) karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah di mengerti. Oke langsung saya  Cara membuat Menu Bar ( Sub Menu ) pada blog simak gan !! :)  :



1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='URL HERE'>Drop Down 1</a></li>
<li><a href='URL HERE'>Drop Down 2</a></li>
<li><a href='URL HERE'>Drop Down 3</a></li>
<li><a href='URL HERE'>Drop Down 4</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='URL HERE'>Drop Down 1 </a></li>
<li><a href='URL HERE'>Drop Down 2 </a></li>
<li><a href='URL HERE'>Drop Down 3</a>
<ul>
<li><a href='URL HERE'>Drop Down 1</a></li>
<li><a href='URL HERE'>Drop Down 2</a></li>
</ul></li>
</ul>
</div>
Keterangan:
  • Ganti tulisan URL HERE dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan Drop Down dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat.

Original Posted by : ADMIN

Komentar anda sangat membantu perkembangan blog ini!!


Share this article now with your friends !

Posted by : Alfon Ritonga ~ / Tuorial , Tips Trik , Gadget , SEO

Artikel Cara membuat Menu Bar ( Sub Menu ) pada blog diposting oleh Alfon Ritonga pada . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar.. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog sobat, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Happy blogging

+ Create Comment + 25 Responses so far.

21 Mei 2013 17.42

thanks gan

invite me riauandroid19.blogspot.com

10 Juni 2013 08.02

berhasil berhasil Hore

12 Juni 2013 11.17

Sangat bermanfaat gan, di tunggu kunbal sama follbecknya !!
http://candraadi99.blogspot.com/

always on :)

26 Juni 2013 02.14

Gan, kasih info cara menaruh link di sub menu nya donk..
masih awam nih

4 Juli 2013 22.53

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif

9 Juli 2013 22.58

masih bingung

13 September 2013 22.41

iya thanks,...;)

2 Oktober 2013 07.09

kok gak ada ya div id="content-wrapper nya ?? Masih awam nih tlg dibantu

2 Oktober 2013 22.21

cara nambah sub menu di sub menunya gimana (sub sub Menu)???adakah yang tau???

nice post gan , gimana caranya bikin temalate blog seperti agan?
wahyuromadhonirendraprasetyo.blogspot.com

17 Oktober 2013 15.06

tombol reply nya kok gk berfungsi gan?

owh ya, jgn lupa mampir ya pkpilabura/blogspot.com

18 Oktober 2013 03.48

Masih bingung gan cara nambahin sub menunya :-/
maklum newbie pikrinurhalid.blogspot.com

19 Oktober 2013 05.50

Sangat bermanfaat gan...buat qt2 yg gaptek. trim's
agan akan terapkan step by step doa'in biar cpt ngerti.

26 Oktober 2013 23.53

Sangat Bermanfaat Gan ..
Follow Blog Saya Ya .
Http://rizqi-techno.blogspot.com

16 November 2013 01.29

Benar-benar membantu, terima kasih ^^

my blog : http://strawberryhill12.blogspot.com/

17 November 2013 09.55

Memang mas berow posting anda sangat menaraik sekali.. cuma yg saya rasa dengan template anda yg terlalu megah jadi saya membaca ertikle sampai pusing..ok selamat tinggal aja semoga di perhatikan kritik dan saran ane....

24 Januari 2014 09.28

Salam kenal gan!! Templatenya mantep!!

29 Januari 2014 09.06

Info yang bagus gan,trim

5 Maret 2014 00.46

Thanks bisa ku coba.

21 April 2014 06.16

Kan saya buat menu bar dengan judul categories dan didalamnya ada bar vector, vector chibi, line art dan subtitle.
pas saya edit kaya yang anda contohkan dan bener bisa ke halaman itu. tapi menu barnya yang aktif bukan di bar categories melainkan di home. gimana itu mas?

8 Mei 2014 09.44

Makasih om,,, sangat bermanfaat sekali,, dan menu bar berhasil di gunakan

26 Mei 2014 09.54

kok sy buka edit HTML ga ada pilihan centang pada Expand Template Widget yaa gan?

4 September 2014 02.27

Salam, MAs, buat jadikan menu bar dengan efek slow tampilan itu gimana y..?

19 Oktober 2014 19.45

belum nemu kode "content-wrapper" nya gan,maklum newbie, bisa bantu??

Silahkan berkunjung kw http://blackrockwanya.blogspot.com

23 Oktober 2014 22.17

udh ctrl+f trus a dapet search coding nya

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Leave a comment

Get Update Via E-Mail

Cukup Masukkan alamat email Anda untuk berlangganan di blog ini dan menerima pemberitahuan artikel terbaru melalui email anda. Bergabunglah dengan 245 pengikut lainnya...!



 

Copyright © - Tutorial Blogspot / All Rights Reserved.
Copyright © 2012 -