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..... !

navbar
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 &amp; 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

10 Juli 2012 11.26

Terima kasih yah kakaknya. :)

4 September 2012 05.36

keren gan homepagenya

7 Oktober 2012 17.55

Sama-sama kak.

Anonim
17 Januari 2013 09.54

Test

Anonim
17 Januari 2013 09.54

Test lagi

Anonim
17 Januari 2013 09.56

Lagi

Anonim
18 Januari 2013 00.24

ok

Anonim
23 Januari 2013 22.56

Sip......

Anonim
24 Januari 2013 00.28

Kakanya ?

Anonim
24 Januari 2013 01.36

Komentarnya sip banget ni, posting dong ?

25 Januari 2013 10.00

Ditunggu aja ya ?

25 Januari 2013 10.04

Ikuti aja perkembangannya disini.

31 Januari 2013 10.20

Yang mana kak ?

15 Februari 2013 21.23

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

16 Februari 2013 08.32

Aku pun juga masih baru ngeblog kok kak.

17 Februari 2013 11.48

ADA BINGKISN KECIL DARI SAYA SILAHKAN DIAMBIL

11 Maret 2013 15.51

Wah istilahnya welcome bar ya! NICE. :)

Posting Komentar

 
Copyright © 2011. TSC - All Rights Reserved

Distributed By Free Blogger Templates | Lyrics | Songs.pk | Download Ringtones | HD Wallpapers For Mobile

Proudly powered by Blogger