Cara Membuat Menu Pengganti Navbar Blogspot
Cara Membuat Menu Pengganti Navbar Blogspot
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.
+ komentar + 17 komentar
Terima kasih yah kakaknya. :)
keren gan homepagenya
Sama-sama kak.
Test
Test lagi
Lagi
ok
Sip......
Kakanya ?
Komentarnya sip banget ni, posting dong ?
Ditunggu aja ya ?
Ikuti aja perkembangannya disini.
Yang mana kak ?
wah benar benar ssip dah aq new biew mbak blog ku pun amburadul alias asal bikin aja soalnya tutorial dari kawan2 saya kumpulin jadi satu dalam blog ku
Aku pun juga masih baru ngeblog kok kak.
ADA BINGKISN KECIL DARI SAYA SILAHKAN DIAMBIL
Wah istilahnya welcome bar ya! NICE. :)
Posting Komentar