Cara Membuat Menubar Drop Down Di Blog

Cara Membuat Menubar Drop Down Keren. Hal yang menurut saya wajib ada pada template blog adalah widget menubar, sudah jelas fungsi dari menubar ini sangat penting,karena dengan adanya menubar yang dipasang di blog kita supaya pengunjung mudah untuk menavigasi halaman blog lewat daftar menubar karena secara langsung menubar berfungsi untuk meringkas semua halaman artikel secara langsung melalui label yang di pasang di menubar.

Widget menubar bisa memberikan informasi seperti halnya ringkasang artikel dengan label tertentu atau info lainnya seperti menerapkan daftar isi contact atau yang lainnya. Nah untuk artikel kali ini saya ingin berbagi tutorial kepada sobat blogger yang ingin memasang menubar di lengkapi dengan search form dan navigasi drop downnya juga.

DEMO

Bisa dibilang ini adalah paket komplit menubar disertai search form dan menu drop downnya, bagi anda yang ingin atau tertarik membuatnya silahkan ikuti tutrialnya.

Cara Membuat Menubar Drop Down and Search Form

1. Buka akun blogger anda.
2. Pilih menu template dan klik edit HTML
3. Silahkan letakan kedua kode dibawah ini tepat diatas kode </style> atau </b:skin>

/* Widget Menubar Oktavialie */
.menu-wrapper{width:100%;max-width:900px;margin:0 auto;padding:0;position:relative}
.page-menu{font-family: &#39;Open Sans&#39;, arial;background:rgba(1,111,186,.99);width:auto;padding:0;margin:0;font-size:15px;font-weight:400}
.page-menu ul{margin:0 auto;padding:0;float:left}
.page-menu ul a {display:block;padding:0 15px;}
.page-menu ul li{position:relative;margin:0;}
.page-menu ul &gt; li {float:left;}
.page-menu ul &gt; li &gt; a {display:block;height:57px;line-height:56px;color:#fff;font-weight:bold;overflow:hidden;transition:all .35s ease;}
.page-menu ul &gt; li &gt; a.active {background:#f35858;color:#fff;}
.page-menu ul &gt; li:hover &gt; a,.page-menu ul li.homex {background:#015f9e;color:#fff;}
.page-menu ul &gt; li:hover &gt; a.active {background:#f35858}
.page-menu ul li a img{vertical-align:middle!important;height:10px;width:14px}
.page-menu ul ul {display:none;list-style:none;position:absolute;top:100%;width:190px;z-index:9999;overflow:hidden}
.page-menu ul &gt; li:hover ul {display:block}
.page-menu ul ul &gt; li {clear:both;overflow:hidden;background:rgba(112,52,192,.6);height:42px;z-index:9999;width:190px;}
.page-menu ul ul &gt; li &gt; a {margin:0;color:#fff !important;padding:0 15px;text-align:left;height:42px;line-height:41px;width:190px;}
.page-menu ul ul &gt; li &gt; a:hover {color:#fff !important;background:#f35858}

dan

/* widget search form Oktavialie.web.id */
#search-wrapper {float:right;margin:11px 10px 0;width:250px;}
#search-wrapper table {width:100%;margin:0;position:relative;height:36px}
#search-wrapper td.search-box {padding-right:30px;}
#search-wrapper input#search-box[type=&quot;text&quot;] {background:#fff;height:36px;line-height:35px;margin:0;padding:0 10px;width:100%;border:none;}
#search-wrapper input#search-button[type=&quot;submit&quot;] {background:#333;color:#fff;height:36px;line-height:35px;margin:0;padding:0 15px;border:none;outline:none;font-weight:bold !important;transition:all 0.25s;position:absolute;right:0;top:0;z-index:2}
#search-wrapper input#search-button[type=&quot;submit&quot;]:hover{background:#7034c0;cursor:pointer;}
#search-wrapper input#search-box[type=&quot;text&quot;]:focus {background:#fdfdfd;outline:none;}

4. Lalu letakan kode dibawah ini tepat di bawah kode </header>

<div class='menu-wrapper' id='menu-wrapper'>
<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li class='homex'><a href='/' itemprop='url' title='home'><img alt='Home' expr:title='data:blog.title' height='12' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBFaSexZBmXDjOcYpsHVCGU3B4vBCrpHzRsVTWtRP2Quv79Xmfy2jUdVz3qqi9GOGBcvmmihqzY9_yf4nQ3XiGYmzlhhX2nlHjZaCGIIO7oFM4AS9YBI-DLqPiM-_UhY-sA0VpcT1SB4Q/s1600/siminihome.png' width='14'/> Home</a></li>
   <li><a href='http://www.oktavialie.web.id/p/blog-page.html' itemprop='url' title='Daftar Isi'><span itemprop='name'>Daftar Isi</span></a></li>
   <li><a href='http://www.oktavialie.web.id/search/label/Tutorial' itemprop='url' title='Tutorial'><span itemprop='name'>Tutorial</span></a></li>
     <li><a href='http://www.oktavialie.web.id/search/label/SEO' itemprop='url' title='SEO'><span itemprop='name'>SEO</span></a></li>
   <li><a href='http://www.oktavialie.web.id/search/label/Template' itemprop='url' title='Template'><span itemprop='name'>Template</span></a></li>
<li><a href='#' itemprop='url' title=''><span itemprop='name'>Drop Down</span></a>
<ul>
<li><a href='/search/label/tahu' itemprop='url' title='drop 1'><span itemprop='name'>drop 1</span></a></li>
<li><a href='/search/label/tempe' itemprop='url' title='drop 2'><span itemprop='name'>drop 2</span></a></li>
<li><a href='/search/label/ikan' itemprop='url' title='drop 3'><span itemprop='name'>drop 3</span></a></li>
</ul>
</li>
    </ul>
<form action='/search' id='search-wrapper' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari Artikel...'/></td>
<td class='search-button'><input id='search-button' type='submit' value='Go'/></td></tr></tbody></table></form>
    <div class='clear'/>
</nav>
    <div class='clear'/>
</div>

Keterangan : Ganti URL yang saya tandai warna biru dengan url yang anda inginkan.

Jika sudah silahkan save template anda dan lihat hasilnya.

Sekian untuk tutorial "Cara Membuat Menubar Drop Down Di Blog" semoga bermanfaat.

Pages

Cara Membuat Menubar Drop Down Di Blog

Cara Membuat Menubar Drop Down and Search Form