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.


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. tamvan nih tutorialnya.
    ane praktekin dolo

    ReplyDelete
  2. mantap nih tutorialnya gan memasang menubar gan nice info gan

    ReplyDelete
  3. Wah menubarnya keren nih.
    Ini udh responsive mas ?

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

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

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

    www.penmuslim.com

    ReplyDelete
  7. ohh keren keren ane ambil untuk template saya ya? gapapa kan

    ReplyDelete
    Replies
    1. Silahkan gan, buat apa saya share kalo ga boleh di comot :)

      Delete
  8. ijin praket mas :D informasinya sangat bermanfaat :D

    ReplyDelete
  9. thx infonya mungkin tak praktekin kalo udah bosen pake yang sekarang

    ReplyDelete