Adsense Indonesia Hosting Gratis banner ads banner ads
banner ads
Hosting Gratis

Cara Mudah Membuat Menubar dan SubMenu di Blog

Setelah kemarin saya membuat postingan tentang bagaimana cara membuat menubar di template klasik, kali ini saya kembali dengan judul Cara Mudah Membuat Menubar dan SubMenu di Blog. Membuat submenu bukanlah hal yang mudah tetapi dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak menjadi hal sulit. Bagaimana cara membuatnya? Langsung saja anda ikuti langkah-langkah berikut :

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>
#navbarmenu{width:930px; float:left; font-size:12px; color:#FFF; font-weight:bold; margin:0 auto; padding:0 auto} #nav{margin:0; padding:0} #nav ul{float:left; list-style:none; margin:0; padding:0} #nav li{list-style:none; margin:0; padding:0; background:none} #nav li a, #nav li a:link, #nav li a:visited{color:#992211; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px} #nav li a:hover{background:#4a4d4c; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#992211; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #4a4d4c; border-left:1px solid #4a4d4c; border-right:1px solid #4a4d4c} #nav li li a:hover{background: #4a4d4c; color:#FFF; padding:5px 10px 5px 15px} #nav li{float:left; padding:0} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0} #nav li ul a{width:140px} #nav li ul ul{margin:-25px 0 0 171px} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto} #nav li:hover, #nav 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='menu'>
<div id='menu-wrap'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a href="http://istiawanblog.blogspot.com">Home</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/artikel">Artikel</a>
<ul>
<li><a href="http://istiawanblog.blogspot.com/search/label/tips%20karir">Tips Karir</a></li>
<li><a href="http://istiawanblog.blogspot.com/search/label/kesehatan">Kesehatan</a></li>
</ul>
</li>
<li><a href="http://istiawanblog.blogspot.com/search/label/tutorial">Tutorial Blog</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Keterangan :
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya 
  • Ganti tulisan berwarna Biru dengan tulisan judul menubar tersebut, seperti: Home, Artikel, Tutorial atau lainnya


Related Post :

13 comments:

  1. kalau tidak menggunakan web bisa tidak ?
    makasih

    ReplyDelete
    Replies
    1. bisa sob dengan menggunakan tanda "#".
      koment back to : http://yoga-tc.blogspot.com/

      Delete
  2. thanks info'x gan, bermanfaat sekali bagi saya ..

    ReplyDelete
  3. tulisan div id="content-wrapper gk ada..
    kek mna tu??

    ReplyDelete
  4. makasi info'na maz, visit back diblog saya iya maz di
    http://blogermasadepan.blogspot.com/

    ReplyDelete
  5. terimakasih informasinya mas,,, saya akan coba bikin di blog saya

    ReplyDelete
  6. makasih infonya mas bro....

    ReplyDelete
  7. Siiiiiiiiiip,tips'n trik sedikit membantu aq....

    ReplyDelete
  8. gan
    klo bikin menunya di smping bs ga yah?
    soalnya saya kn utk jualan
    terimakasih
    mohon balasannya

    ReplyDelete
  9. tanda ]]> banyak jadi ana bingung diletakan di atas mana.

    ReplyDelete
  10. hai.. sebenarnya aku ingin yg lebih simple lagi, maklum newbie...

    ReplyDelete

Mohon berkomentar sesuai dengan artikel yang ada. Komentar yang berisi link yang menuju ke sebuah halaman dan mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter.

Related Posts Plugin for WordPress, Blogger...