Secara default layanan blogger tidak menyediakan menubar pada template-template sederhananya, sebetulnya menubar itu sendiri tidak mutlak diperlukan dalam sebuah blog, namun untuk membuat tampilan blog anda terlihat professional ada baiknya anda pelajari Postingan ini dan mempraktekan serta memasang menubarnya ke blog anda. Cara memasang menubar rangkap dua yang keren seperti gambar diatas ikuti langkah berkut :
Sebelum melakukan Pengeditan, alangkah baiknya backup terlebih dahulu template lama anda.
1. Log in ke akun blogger dengan menggunakan akun anda.
2. Pilih menu Template, Klik tombol Edit HTML.
3. Centang Expand Template Widget,
4. Cari kode ]]></b:skin>, gunakan CTRL + F untuk mempercepat pencarian, kemudian pastekan kode dibawah ini tepat diatas kode ]]></b:skin> tadi.
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrkRu9afpi-cYYBdqRtuyVHyeDISUV3Il-97WsW6lTgk1gQwWBVjWsk_IqE5oVKkn32JNA6VOeWnpFVF2lUAxsRpEZSh1i-j9REgDspgEdTHaqr8yPJseqswN-YX5kE0RPWL5ecswhkf8/s1600/menuwrap.png) repeat-x top;border-top:5px solid #26231c;border-bottom:5px solid #26231c;width:100%;margin:0 auto;padding:0 auto;height:37px}
#menuwrapper{width:980px;height:37px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#ddd;padding:11px 12px 11px;border-right:1px solid #6c6250;border-left:1px solid #373123}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgveFFDqexn_TWkiLRzPhV4uJ6t5IHNrpD8t94PFzJfADzVtLqfQyNrTQeqCBf7Wbefu_FSyAjqsce7IMM3JcRxN2ZnPzl0X9m4rreVKZJG7ZbnVHZ28TId3ngCBqMTt1b1CwR_pSPdyq0/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:11px 24px 11px 12px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#26231c;color:#fff}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#nav-wrapper{background:#ebe8e1;height:30px;font-family:Arial;overflow:hidden;width:100%}
#nav{margin:0 auto;width:980px;height:30px;padding:0auto}
#nav ul{float:left;width:auto;height:30px;margin:0;padding:0;list-style-type:none}
#nav ul li{float:left;height:30px}
#nav ul li a,#nav ul li a:visited{float:left;height:30px;padding:7px 10px;color:#000;font:bold 12px Arial;text-transform:none}
#nav ul li a:hover,#nav .selected{color:#626262;text-decoration:none;}
#search{float:right;width:180px;height:20px;margin-top:3px;margin-right:5px}5. Kode diatas ada tiga bagian, Menubar Horizontal Atas, Menubar Horizontal Bawah, dan Kolom Pencarian/Search. Sesuaikan dengan selera anda pakah mau dipakai tiga-tiganya atau hanya pilih salah satu. Setelah itu kemudian temukan kode
#search form{float:left}
#search input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimSA6Vng-4T4TZcJxb9WaBw7jG-XfLgMFaE5xmzEA9sP0bwJLrS224AXEqSzEzw8718y3f-YnH4ym4LdqSdV9xH5DkfGbE-ffhK95c1DYaW4M6skqhBEwpXemY4NgBBKlj6akM4avULaY/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #999;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
#search input[type="text"]:focus{background:#fff}
#search input[type="submit"]{display:none}
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
</b:section>
</div>
dikarenakan setiap template berbeda-beda, mungkin kode yang akan anda temukan lebih panjang, pastikan setelah kode <div id='header wrapper'> anda telusuri sampai kode penutup </div>. Kemudian pastekan kode dibawah ini setelah kode diatas.
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBi5F2szJMgwkzl0DCQLWB0UzM8CKiPDACfZdyxu9xed1Uqq0HABAyY2o5TUuRD28PPf33eXrSP4YH-RDTvPbF8QrmjX_0EKRoccQ_xiMXn-FptRqs8HX5th3ZvhFEejOxB8B1S8ZuIakf/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='masukkan link disini'>Menu 1</a></li>
<li><a href='masukkan link disini'>Menu 2</a></li>
<li><a class='trigger' href='#'>Menu 3</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='masukkan link disini'>Menu 4</a></li>
<li><a class='trigger' href='#'>Menu 5</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
<div id='nav-wrapper'>
<div id='nav'>
<b:section class='page' id='page' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div id='search'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</div>
</div>
6. Maka akan seperti ini
8. Tulisan yang berwarna Merah ganti dengan URL tujuan, dan tulisan yang berwarna Biru Ganti dengan Judul URL tadi, Contoh:
Nah sekarang anda sudah memasang Menu Bar Dua Rangkap Di Blogspot yang keren dan benar-benar terlihat keren dan professional.
Akhirnya pada penghujung tulisan ini saya ucapkan terimaksih atas kunjungan sobat blogger, semoga artikel Membuat Menu Bar Dua Rangkap Di Blogspot diatas menambah ilmu baru bagi para blogger semua. Dan setelah Postingan ini saya akan membuat postingan Cara Membuat Tulisan Dibawah Footer.
Saya hanyalah seorang blogger Newbie yang berbagi dari apa yang sedikit saya dapatkan selama ini. jadi mohon maaf jika dalam penyampaiannya kurang jelas, kurang detil dan lain sebagainya. Akhir kata saya ucapkan selamat berkreasi dan happy blogging.
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
</b:section>
</div>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBi5F2szJMgwkzl0DCQLWB0UzM8CKiPDACfZdyxu9xed1Uqq0HABAyY2o5TUuRD28PPf33eXrSP4YH-RDTvPbF8QrmjX_0EKRoccQ_xiMXn-FptRqs8HX5th3ZvhFEejOxB8B1S8ZuIakf/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='masukkan link disini'>Menu 1</a></li>
<li><a href='masukkan link disini'>Menu 2</a></li>
<li><a class='trigger' href='#'>Menu 3</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='masukkan link disini'>Menu 4</a></li>
<li><a class='trigger' href='#'>Menu 5</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
<div id='nav-wrapper'>
<div id='nav'>
<b:section class='page' id='page' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div id='search'>7. Setelah selesai klik tombol Pratinjau jika sudah Fix dan OK baru klik tombol Simpan Template.
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</div>
</div>
8. Tulisan yang berwarna Merah ganti dengan URL tujuan, dan tulisan yang berwarna Biru Ganti dengan Judul URL tadi, Contoh:
<li><a href='http://m4zone.blogspot.com/search/label/Bola?max-results=4'>BOLA</a></li>9. Sedangkan untuk menu horizontal bagian bawah, anda dapat mengedit, menambah, mengurangi link dan sebagainya, anda tinggal menuju ke layout dan klik pada Menu Laman.
Nah sekarang anda sudah memasang Menu Bar Dua Rangkap Di Blogspot yang keren dan benar-benar terlihat keren dan professional.
Akhirnya pada penghujung tulisan ini saya ucapkan terimaksih atas kunjungan sobat blogger, semoga artikel Membuat Menu Bar Dua Rangkap Di Blogspot diatas menambah ilmu baru bagi para blogger semua. Dan setelah Postingan ini saya akan membuat postingan Cara Membuat Tulisan Dibawah Footer.
Saya hanyalah seorang blogger Newbie yang berbagi dari apa yang sedikit saya dapatkan selama ini. jadi mohon maaf jika dalam penyampaiannya kurang jelas, kurang detil dan lain sebagainya. Akhir kata saya ucapkan selamat berkreasi dan happy blogging.
