Cara Mudah Memasang Menubar Drop Down Di Blogger

Cara Mudah Membuat Menu Bar Drop Down Di Blogger

Mas Tamvan, cara mudah dan gampang membuat menubar dan sub menu bar drop down di blogger. Gimana sih cara membuat menu bar di blogger dan gimana cara mengganti tulisan di menubar dengan link label blog kita sendiri?,. Di sini saya bagikan menu bar yang sangat simple dan tentunya elegan untuk di pasang pada blog yang akan membuat blog tampil rapih dan akan membuat pengunjung blog nyaman untuk melihat semua category yang ada pada blog agan. Bagi kalian yang ingin membuat menu bar dan sub menu bar dengan mudah di blogger silahkan simak tutorial di blog mas tamvan ini.
Sebelum di pasang menubar pada blog kalian, sebaiknya lihat dulu tampilan menubar yang sudah jadi pada link berikut.

Selain menu bar di blog mas tamvan juga bagikan tutorial membuat widget keren di blogger, silahkan baca di link berikut ini.

Tutorial Blogger Lainnya :

Nah untuk tutorial cara membuat menubar dan sub menu barnya, silahkan ikuti tutorial di bawah ini.
  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!! 

/*Menubar Simple Elegan*/

#navbarborder {
 width:977px;
 height:31px;
 border:1px solid #191919;
 margin-top:-18px;
 padding:0px;
 border-radius:3px
}
#navbar {
 background:url(http://www.nonton.mobi/wp-content/themes/nonton.mobi/images/xaubxjmdt.png.pagespeed.ic.-8Wc2IaG-w.png);
 width:976px;
 height:30px;
 color:#fff;
 margin:0px;
 padding:0px;
 border-right:1px solid #333;
 background-repeat:repeat-x;
 font-family:Oswald,Arial,Helvetica,sans-serif
}
#navbarleft {
 width:100%;
 float:left;
 margin:0px;
 padding:0px;
 overflow:hidden
}
#nav {
 margin:0px;
 padding:0px
}
#nav ul {
 float:left;
 list-style:none;
 margin:0px;
 padding:0px
}
#nav li {
 float:left;
 list-style:none;
 margin:0px;
 padding:0px;
 border-right:1px solid #181818;
 border-left:1px solid #333
}
#nav li a,#nav li a:link,#nav li a:visited {
 color:#ccc;
 display:block;
 font-size:11px;
 font-weight:normal;
 line-height:24px;
 text-transform:uppercase;
 padding:4px 10px 2px 14px;
  text-decoration: black;
}
#nav li a:hover,#nav li a:active {
 color:#ccc;
 background:#333;
 margin-top:0px;
 padding:4px 10px 2px 14px;
 text-decoration:none
}
#nav li li a,#nav li li a:link,#nav li li a:visited {
 background:#333;
 width:156px;
 color:#ccc;
 font-size:11px;
 font-family:'Oswald',arial,serif;
 font-weight:normal;
 text-transform:uppercase;
 float:none;
 margin:0px;
 padding:3px 5px 3px 5px;
 border-bottom:1px solid #242424;
 border-left:1px solid #161616;
 border-right:2px solid #242424;
 border-top:1px solid #414141
}
#nav li li a:hover,#nav li li a:active {
 background:#333;
 color:#ccc;
 padding:3px 5px 3px 5px;
 border-bottom:1px solid #242424;
 border-left:1px solid #191919;
 border-right:2px solid #97c000;
 border-top:1px solid #414141
}
#nav li ul.sub-menu {
 float:left;
 margin-left:-2px;
 padding:0px;
 border:1px solid #0e0e0e;
 width:507px;
 box-shadow:0px 0px 2px 2px #111;
 position:absolute;
 z-index:10!important
}
#nav li ul {
 z-index:9999;
 position:absolute;
 left:-999em;
 height:auto;
 min-width:142px;
 overflow:hidden;
 margin:0px;
 padding:0px
}
#nav li li {
 border:none
}
#nav li ul a {
 width:140px
}
#nav li ul a:hover,#nav li ul a:active {
}
#nav li ul ul {
 margin:-32px 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
}

Nah sekarang tinggal memasukan HTML untuk menampilkan menu bar pada blog kalian, Terserah mau pasang dimana, Entah itu di Widget [HTML/Javascript], entah mau memasangnya di Edit HTML. Namun di tutorial ini saya akan berikan cara memasang menu barnya pada Edit HTML yang akan di letakan di bawah Header.
  • Cari </head> dan masukan HTML di bawah ini tepat di bawahnya!! 

<div id="navbarborder">
 <div id="navbar">
  <div id="navbarleft">
   <ul id="nav">
   <li><a href="/" title="Home">Home</a></li>
   <ul id="menu-main-menu" class="menu"><li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-77"><a href="#">Genres</a>
<ul class="sub-menu">
 <li id="menu-item-765" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-765"><a href="/search/label/action/">Action</a></li>
 <li id="menu-item-766" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-766"><a href="/search/label/adventure/">Adventure</a></li>
 <li id="menu-item-767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-767"><a href="/search/label/animation/">Animation</a></li>
 <li id="menu-item-768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-768"><a href="/search/label/biography/">Biography</a></li>
 <li id="menu-item-769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-769"><a href="/search/label/comedy/">Comedy</a></li>
 <li id="menu-item-770" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-770">
 <a href="/search/label/crime/">Crime</a></li>
 <li id="menu-item-771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-771"><a href="/search/label/documentary/">Documentary</a></li>
 <li id="menu-item-772" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-772">
 <a href="/search/label/drama/">Drama</a></li>
 <li id="menu-item-773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-773"><a href="/search/label/family/">Family</a></li>
 <li id="menu-item-774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-774"><a href="/search/label/fantasy/">Fantasy</a></li>
 <li id="menu-item-775" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-775"><a href="/search/label/horror/">Horror</a></li>
 <li id="menu-item-776" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-776"><a href="/search/label/musical/">Musical</a></li>
 <li id="menu-item-777" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-777">
 <a href="/search/label/mystery/">Mystery</a></li>
 <li id="menu-item-778" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-778"><a href="/search/label/romance/">Romance</a></li>
 <li id="menu-item-779" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-779"><a href="/search/label/sci-fi/">Sci-Fi</a></li>
 <li id="menu-item-780" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-780"><a href="/search/label/sport/">Sport</a></li>
 <li id="menu-item-781" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-781"><a href="/search/label/thriller/">Thriller</a></li>
 <li id="menu-item-784" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-784"><a href="/search/label/war/">War</a></li>
 <li id="menu-item-3663" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3663"><a href="h/search/label/tv-movie/">TV Movie</a></li>
</ul>
</li>
<li id="menu-item-782" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-782">
<a href="/search/label/tv-series/">TV Series</a>
<ul class="sub-menu">
 <li id="menu-item-19673" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19673"><a href="/search/label/complete/">Complete</a></li>
 <li id="menu-item-19674" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19674">
 <a href="/search/label/on-going/">On Going</a></li>
</ul>
</li>
<li id="menu-item-1938" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1938"><a href="/search/label/anime/">Anime</a></li>
<li id="menu-item-1941" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1941"><a href="/search/label/mandarin/">Mandarin</a></li>
<li id="menu-item-1940" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1940"><a href="/search/label/korea/">Korea</a></li>
<li id="menu-item-1939" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1939"><a href="/search/label/jepang/">Jepang</a></li>
<li id="menu-item-2389" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2389"><a href="/search/label/india/">India</a></li>
<li id="menu-item-15540" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15540"><a href="/search/label/trailer/">Trailer</a></li>
<li id="menu-item-3880" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3880"><a href="/search/label/request-film/">Request Film</a></li>
<li id="menu-item-952" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-952"><a href="/search/label/dmca-disclaimer-policy/">DMCA/Disclaimer</a></li>
<li id="menu-item-4330" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4330"><a href="/search/label/faq/">FAQ</a></li>
</ul>   </ul>
  </div>
 </div>
</div>

Note :
Silahkan sesuaikan / ganti /search/label/action/ dan yang lainnya dengan link label kalian. Bisa juga dengan link sosial media, sesuaikan juga judul menunya.


Kalo sudah tinggal di save dan lihat hasilnya.
Itulah tutorial cara membuat menubar drop down dan cara membuat sub menu bar di blogger, semoga bermanfaat.
Jangan lupa kritik dan sarannya, apabila da yang mau di tanyakan silahkan bertanya di kolom komentar.
15 komentar
  1. RizkiOctober 18, 2015 at 8:18 PM

    tamvan nih tutorialnya.
    ane praktekin dolo

    ReplyDelete
  2. Pekalongan NewsOctober 18, 2015 at 8:19 PM

    mantap nih tutorialnya gan memasang menubar gan nice info gan

    ReplyDelete
  3. Adya RazanOctober 18, 2015 at 8:25 PM

    Langsung praktek, nice post mas

    ReplyDelete
  4. UnknownOctober 18, 2015 at 8:26 PM

    Wah menubarnya keren nih.
    Ini udh responsive mas ?

    ReplyDelete
  5. Yayan AndriansyahOctober 18, 2015 at 8:32 PM

    menu barnya keren. thanks gan, tutornya sngat bermanfaat :)

    ReplyDelete
  6. UnknownOctober 18, 2015 at 8:52 PM

    Makasih kang. akhirnya saya bisa pasang menu drop down :)

    ReplyDelete
  7. isty firmansyahOctober 18, 2015 at 9:20 PM

    makasi gan, sangat membantu untuk blogger pemula kyak saya :D

    www.penmuslim.com

    ReplyDelete
  8. UnknownOctober 19, 2015 at 12:43 AM

    ohh keren keren ane ambil untuk template saya ya? gapapa kan

    ReplyDelete
    Replies
    1. Mas TamvanOctober 19, 2015 at 4:41 PM

      Silahkan gan, buat apa saya share kalo ga boleh di comot :)

      Delete
  9. DARMA JATI PRASETYOOctober 19, 2015 at 5:52 AM

    ijin praket mas :D informasinya sangat bermanfaat :D

    ReplyDelete
  10. UnknownOctober 19, 2015 at 6:53 AM

    thx infonya mungkin tak praktekin kalo udah bosen pake yang sekarang

    ReplyDelete
  11. YeyenOctober 19, 2015 at 11:34 AM

    Thank's buat Scriptnya gan

    ReplyDelete
  12. UnknownOctober 30, 2015 at 12:36 AM

    ijin icip gan script nya ya

    ReplyDelete