Hallo sobat blogger, sudah lama banget nih GITA gak update posting, untuk kali ini saya akan berbagi tentang Cara Membuat Menu Pengganti Navbar Blogspot. Ini sebenarnya request dari salah satu temen blogger kita yang sangat ingin membuatnya untuk di pasang di blognya. Menu Pengganti Navbar Blogspot sangatlah penting untuk memudahkan pengunjung untuk menuju link-link pada blog kita, dari pada panjang lebar kita menuju tutorialnya yuk..... !
Berikut adalah Cara Membuat Menu Pengganti Navbar Blogspot :
1. Masuklah ke akun blogger Anda.
2. Klik tab Rancangan -> pilih Edit HTML -> Jangan lupa download template lengkap agar apabila salah dalam pengeditan bisa di kembalikan seperti semula.
3. Cari code : <b:skin><![CDATA[
4. Letakkan code berikut tepat di bawahnya :
#navbar-iframe {
height:0;
visibility:hidden;
display:none;
}
5. Caari code : ]]></b:skin>
6. Letakkan code berikut tepat di atasnya :
.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;
}
7. Cari code : <body>
8. Letakkan code berikut tepat di bwahnya :
<div class='menu'><ul>
<li><a href='http://www.sagita-com.tk/search/label/OS'>Windows</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Software'>Software Full</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Tool'>Tool</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Multimedia'>Multimedia</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Software-Hp'>Aplikasi HP</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Anti-Virus'>Anti Virus</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Internet'>Internet</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Editing'>Editing</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Games'>Games</a></li>
<li><a href='http://www.sagita-com.tk/2012/'>Lainnya</a><ul>
<li><a href='http://www.sagita-com.tk/search/label/News'>News</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Request'>Request</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Android'>Android</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Billing'>Billing</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Facebook'>Facebook</a></li>
<li><a href='http://www.sagita-com.tk/search/label/Tips-Trik'>Tips & Triks</a></li></ul></li>
<li style='float:right;margin-right:5px;'><a href='http://www.sagita-com.tk/2011/07/jadikan-sagita-com-halaman-awal-anda.html'>Homepage</a></li></ul></div>
9. Ganti link-link di atas yang berwarna merah sesuaikan dengan blog Anda.
10. Terakhir simpan template dan lihat hasilnya.