Cara membuat menu bertingkat pengganti navbar- Kali ini iBlogle akan mengajak anda mempelajari bagaimana cara mengganti menu navbar dengan menu buatan sendiri dengan gaya drop down atau bertingkat. Seperti kita tahu bersama, pertama kali kita membuat blogspot, pada template bawaan akan ada navbar diatas header.
Sebelum anda memonetize kan blog anda, dengan mencari-cari artikel 'Bagaimana cara membuat akun paypal', ada baiknya anda menyelesaikan masalah template blog anda dahulu, misalnya seperti tutorial ini, yaitu cara menghilangkan navbar dan menggantinya dengan menu buatan sendiri, plus dropdownnya.
Dulu para blogger berusaha menghilangkannya dengan mengedit HTML, tapi kini blogger sudah mempermudahnya, dengan membuat pilihan 'Off' dari pengaturan layout navbar.
Berikut adalah kira-kira tampilan menu yang akan kita buat.
Oke, kita mulai saja..
Langkah Pertama
Silahkan anda off kan navbar blog anda terlebih dahulu, dari pengaturan layout
Langkah Kedua
Anda masuk kepengaturan Template, edit HTML. Jangan lupa centang 'Expand Template Widget"
lalu anda cari kode ]]></b:skin> (Silahkan aktivkan pencarian, dengan menekan Control + F)
Kemudian anda letakkan kode dibawah ini, keatas kode ]]></b:skin>
.menu {
background:#000;
border-bottom:3px solid #111;
box-shadow:0 0 5px white;
-moz-box-shadow:0 0 5px white;
-webkit-box-shadow:0 0 5px white;
-khtml-box-shadow:0 0 5px white;
z-index:100;
top:0;
left:0;
width:100%;
position:fixed;
z-index:10000;
opacity:.9;
filter:alpha(opacity:90);
font-size:13px;
text-align:center;
}
.menu ul {
background:#000;
height:2px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {
background:#000;
color:#fff;
display:block;
font-weight:normal;
line-height:27px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background:#212121;
color:#00ff00;
text-decoration:none;
}
.menu li ul{
background:#000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:100px;
z-index:200;
/*top:1em;/*left:0;*/
}
.menu li:hover ul {
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:100px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:27px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#212121 center left no-repeat;
border:0px;
color:#fff;
text-decoration:none;
}
.menu p {
clear:left;
}
background:#000;
border-bottom:3px solid #111;
box-shadow:0 0 5px white;
-moz-box-shadow:0 0 5px white;
-webkit-box-shadow:0 0 5px white;
-khtml-box-shadow:0 0 5px white;
z-index:100;
top:0;
left:0;
width:100%;
position:fixed;
z-index:10000;
opacity:.9;
filter:alpha(opacity:90);
font-size:13px;
text-align:center;
}
.menu ul {
background:#000;
height:2px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {
background:#000;
color:#fff;
display:block;
font-weight:normal;
line-height:27px;
margin:0px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background:#212121;
color:#00ff00;
text-decoration:none;
}
.menu li ul{
background:#000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:100px;
z-index:200;
/*top:1em;/*left:0;*/
}
.menu li:hover ul {
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:100px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:27px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#212121 center left no-repeat;
border:0px;
color:#fff;
text-decoration:none;
}
.menu p {
clear:left;
}
Langkah Ketiga
Anda cari kode <body (sengaja tidak ditutup kurung, karna ada sambungannya)
Lalu anda letakkan kode berikut ini, dibawah kode <body
<div class='menu'><ul>
<li><a href='Url Anda'>Internet</a></li>
<li><a href='Url Anda'>Editing</a></li>
<li><a href='Url Anda'>Games</a></li>
<li><a href='Url Anda'>Lainnya</a><ul>
<li><a href='Url Anda'>News</a></li>
<li><a href='Url Anda'>Request</a></li>
<li><a href='Url Anda'>Tips Trik</a></li></ul></li>
<li style='float:right;margin-right:5px;'><a href='http://www.iblogle.com'>Homepage</a></li></ul></div>
Silahkan anda ganti dengan Url Anda.
Jika anda ingin menambahkan link baru, silahkan anda sisipkan kode berikut ini, diantaranya
<li><a href='Url Anda'>Nama Halamannya</a></li>
Silahkan anda Save. Moga sukses ya gan..!
No comments:
Write comments