Cara Membuat Menu Bar Rangkap 2 Di Blog
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 :
Preview :
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/AVvXsEhluNk-4Tbp5cZem7EpEKhND85STLlRiWJjsXA2yOzqo1qnpJYjoDvuNLunl70DcJHnuskeqC7MadbdCHNUqu6wWey1-WglnhRncdey7Wn_Kt0kB38jgrkVfI3NtTYfNHOR7vyZMe1DaVg/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/AVvXsEiUJkFd1yJukPte6l4zBPTKwUju0JqRUxT3n2kYTS7UYRw8OHcvEJHSj9EEM7ur0Tit_6Of_l1UEVwfRv5jTcv0-TOdXet-MZe_EYzh_5DzwWCaoW9oqbaOeHmgzk_3-1XESb_TG3UJDgc/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/AVvXsEg1LxkXLbA3le_l5UoEub6WuZPA1fKQu4bJiRt3vUSDKfDgdttXoXxUdVqw8n_T7TKO9Y9OT-9KxiUkSYsoHjqvGlVisrhvxRgxgpQmWizIUIvLSVresiCyRnw0q_vU001w3LpgLj9Y1qA/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/AVvXsEidCTb33JtVkCZ-fbs7j0IoResVxCa2SLKRhiChD-nMD64L68oAytlji0jsBc3iFu0gCfJPGO3Y4pE2ROl8yX8KlfjsfH4MniIg-uAy_NqjgVKpP4Dc01i2EYM9CVYhNe4N6_UoAfmHwqNG/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>
- 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://reyhan82.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.
0 komentar:
Posting Komentar