Home » Widget Blog » Cara Membuat Menu Bar Rangkap 2 Di Blog

Cara Membuat Menu Bar Rangkap 2 Di Blog

Anonymous || || || Leave a komentar

Tutorial | Cara Membuat Menu Bar Rangkap 2 Di Blog | Menubar merupakan sarana navigasi pada blog/web, yang berisi daftar tautan/link, Menubar sendiri biasanya berada di bawah header atau diatas header pada posisi horizontal atau mendatar, dalam variasinya menubar bisa di kostum sedemikian rupa, ada dalam satu web menubarnya terdapat lebih dari satu, kadang itu berada diatas header dan dibawah header, dan terkadang dirangkap dua dan diletakan dibawah header, termasuk blog ini sendiri menggunakan menubar rangkap dua. sebagai contoh menubar rangkap seperti gambar dibawah ini.
Preview :

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 sobat terlihat professional ada baiknya anda pelajari Postingan ini dan mempraktekan serta memasang menubarnya ke blog sobat. Cara Membuat Menu Bar Rangkap 2 Di Blog yang keren seperti gambar diatas ikuti langkah berkut :

Sebelum melakukan Pengeditan, alangkah baiknya backup terlebih dahulu template lama anda.
  • Log in ke akun blogger dengan menggunakan akun anda.
  •  Pilih menu Template, Klik tombol Edit HTML.
  •  Centang Expand Template Widget,
  •  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/AVvXsEgkMBufZeoDLZaqozfQ1ZwPTRRK2AB-oLsqDLFr8IB0SaahZmPUjsupWxj1YZ47IXhaz563A0eJPlcqoxrRdtD-3QQtV2njhdZEdhL_TMUFjK-sU2e1G-SJET7H-aT9yQcXs5VzjUqiZB0/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/AVvXsEjBEFAbQqtmzmfiLHK4JUzHT5dgSer6oqY5IpwQ0XztIEUXDLptTZW9u0xhmLCAodQny-ocPh-m46CSfLTmadPbHK4DSGgGbvvEtR1b3yvc8OJSRue4Z0Nc04p7BLVS31XVQkTa79088Jo/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}
#search form{float:left}
#search input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWQ7uNfENfFbV2bZ5Bebyp5CyBt-1QX1cv5-GfwRfk_nqUvHpOIIYqJD5CnuhTes_6cJAfrs_seV9EkKyOs09jI_dQ9n6ujsJjwNwvzkbwsU2q81389QNcsUUYUpgvKjn5O6i_fynALk/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} 

  • 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
<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/AVvXsEgprXC7wxLkpDmRr_QRkTCl_AwTQVnzFon4-jVmDErX8spTKBD2xAr_sjN0CWPmNZ0KCLxyQexGEZRebH0tVr4qGQvU6Q6xkur94UijBbkjyMmFs5bcO05JADs2_Tj89hFF-04AxsZklu0B/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 == &quot;&quot;) {this.value = &quot;Type and Enter&quot;;}' onfocus='if (this.value == &quot;Type and Enter&quot;) {this.value =&quot;&quot;;}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</div>
</div>
  • Maka akan seperti ini
<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/AVvXsEgprXC7wxLkpDmRr_QRkTCl_AwTQVnzFon4-jVmDErX8spTKBD2xAr_sjN0CWPmNZ0KCLxyQexGEZRebH0tVr4qGQvU6Q6xkur94UijBbkjyMmFs5bcO05JADs2_Tj89hFF-04AxsZklu0B/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 == &quot;&quot;) {this.value = &quot;Type and Enter&quot;;}' onfocus='if (this.value == &quot;Type and Enter&quot;) {this.value =&quot;&quot;;}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</div>
</div>
  • Setelah selesai klik tombol Pratinjau jika sudah Fix dan OK baru klik tombol Simpan Template.

  • Tulisan yang berwarna Merah ganti dengan URL tujuan, dan tulisan yang berwarna Biru Ganti dengan Judul URL tadi, Contoh:
<li><a href='http://trickstipsblog.blogspot.com'>HOME</a></li>
  •   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 itu saja postingan Blogger Tutorial kali ini, dan jika berminat, liatlah menu-menu yang keren keren ini :
 
 
 
 
 
 
 
/[ 0 komentar Untuk Artikel Cara Membuat Menu Bar Rangkap 2 Di Blog]\


Post a Comment