Membuat Navbar Sendiri / Penutup Navbar

Nah Sekarang aku mau posting tentang cara membuat navbar yang berbeda... seperti contoh gambar dibawah ini... navbar merah yang dilingkarin hitam...

hehehe... sebenere itu bukan navbar ce tp itu cuman buat nutupin navbar biar tampilan blok kita lebih bervareasi... :)... ya udah kita langsung aja bagaimana membuatnya... okey... :)



1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Kemudian klik pada Edit HTML.

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

4. Kemudian centanglah Expand Template Widget.

5. Kemudian carilah kode ]]></b:skin> untuk mempermudah tekan tombol ctrl + F.

6. selah anda menemukan kode tersebut, letak Kode Dibawah ini tepat diatasnya..

/*-- (mta bar) --*/

#mta_bar{background:#444 url('http://s1180.photobucket.com/albums/x406/sismawan/Nav.jpg')

repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}

* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}

#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF; width:65%}

#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FFFFFF; width:20%}

#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}

#mta_bar .right a{font-size:10px; color:#FFFFFF; text-decoration:underline}

#mta_bar .right a:hover{font-size:10px; color:#80FF00; text-decoration:none}

#left_bar a{background:url('http://i1105.photobucket.com/albums/h356/Ozyw42/check-c.png') no-repeat; text-decoration:none; color:#FFFFFF; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}

#left_bar a:hover{text-decoration:underline; color:#80FF00}

#left_bar2 a{background: url(http://i1180.photobucket.com/albums/x406/sismawan/facebook.png)

<script>

<!--http://infokanca.blogspot.com/-->

document.write(unescape('%6E%6F%2D%72%65%70%65%61%74%20%32%70%78%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%20%63%6F%6C%6F%72%3A%23%46%46%46%46%46%46%3B%20%70%61%64%64%69%6E%67%2D%6C%65%66%74%3A%32%31%70%78%3B%20%70%61%64%64%69%6E%67%2D%72%69%67%68%74%3A%30%3B%20%70%61%64%64%69%6E%67%2D%74%6F%70%3A%30%3B%20%70%61%64%64%69%6E%67%2D%62%6F%74%74%6F%6D%3A%30%7D%0A%23%6C%65%66%74%5F%62%61%72%32%20%61%3A%68%6F%76%65%72%7B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%75%6E%64%65%72%6C%69%6E%65%3B%20%63%6F%6C%6F%72%3A%23%38%30%46%46%30%30%7D%0A%23%6C%65%66%74%5F%62%61%72%33%20%61%7B%62%61%63%6B%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%29%20%6E%6F%2D%72%65%70%65%61%74%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%20%63%6F%6C%6F%72%3A%23%46%46%46%46%46%46%3B%20%70%61%64%64%69%6E%67%2D%72%69%67%68%74%3A%32%33%70%78%3B%20%70%61%64%64%69%6E%67%2D%6C%65%66%74%3A%30%3B%20%70%61%64%64%69%6E%67%2D%74%6F%70%3A%30%3B%20%70%61%64%64%69%6E%67%2D%62%6F%74%74%6F%6D%3A%30%7D%7D%0A%23%6C%65%66%74%5F%62%61%72%33%20%61%3A%68%6F%76%65%72%7B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%75%6E%64%65%72%6C%69%6E%65%3B%20%63%6F%6C%6F%72%3A%23%38%30%46%46%30%30%7D%0A%23%74%6F%5F%74%6F%70%7B%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%68%74%74%70%3A%2F%2F%69%31%31%30%35%2E%70%68%6F%74%6F%62%75%63%6B%65%74%2E%63%6F%6D%2F%61%6C%62%75%6D%73%2F%68%33%35%36%2F%4F%7A%79%77%34%32%2F%64%65%6C%65%74%65%2E%70%6E%67%29%20%6E%6F%2D%72%65%70%65%61%74%20%73%63%72%6F%6C%6C%20%30%25%3B%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%20%2F%2A%74%68%69%73%20%72%65%70%6C%61%63%65%73%20%66%6C%6F%61%74%20%2D%20%66%69%78%65%73%20%74%68%61%6E%6B%73%20%74%6F%20%4C%61%72%72%79%20%6F%66%68%74%74%70%3A%2F%2F%62%6C%6F%67%2E%6C%72%6F%6F%74%2E%63%6F%6D%2A%2F%68%65%69%67%68%74%3A%31%38%70%78%3B%20%77%69%64%74%68%3A%31%39%70%78%3B%20%6D%61%72%67%69%6E%3A%30%20%30%20%30%20%39%30%30%70%78%3B%20%2F%2A%74%68%69%73%20%77%61%73%20%75%70%64%61%74%65%64%2A%2F%70%61%64%64%69%6E%67%3A%39%70%78%20%35%70%78%7D%0A%23%74%6F%5F%74%6F%70%20%61%7B%70%61%64%64%69%6E%67%3A%38%70%78%7D'));

<!-- visit http://infokanca.blogspot.com/ -->

</script>

7. Untuk url berwarna biru bisa anda ganti sesuka anda dengan url gambar anda sendiri. Setelah itu Cari Kode </head>, Setelah anda meemukannya letakkan kode dibawah ini tepat diatasnya..

<script>

<!--http://infokanca.blogspot.com/-->

document.write(unescape('%3C%73%63%72%69%70%74%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%73%69%74%65%73%2E%67%6F%6F%67%6C%65%2E%63%6F%6D%2F%73%69%74%65%2F%61%73%72%69%7A%61%6C%6F%66%66%69%63%69%61%6C%77%65%62%2F%6A%61%76%61%73%63%72%69%70%74%2F%53%74%72%69%70%74%2D%61%64%2E%6A%73%27%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%2F%3E'));

<!-- visit http://infokanca.blogspot.com/ -->

</script>

8. Setelah itu cari kode <body>, terus letakkan kode dibawah ini tepat dibawahnya..

<script>

<!--http://infokanca.blogspot.com/-->

document.write(unescape('%3C%64%69%76%20%69%64%3D%27%6D%74%61%5F%62%61%72%27%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%33%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%63%65%6E%74%65%72%27%2F%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%32%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%6C%65%66%74%27%3E%0A'));

<!-- visit http://infokanca.blogspot.com/ -->

</script>



<a href='URL FACEBOOK ANDA/FACEBOOK GROUP'>NAMA FACEBOOK ANDA/FACEBOOK GROUP</a>



<script>

<!--http://infokanca.blogspot.com/-->

document.write(unescape('%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%63%65%6E%74%65%72%27%3E%0A'));

<!-- visit http://infokanca.blogspot.com/ -->

</script>



<a href='URL BLOG ANDA/'>NAMA BLOG ANDA</a>



<script>

<!--http://infokanca.blogspot.com/-->

document.write(unescape('%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E'));

<!-- visit http://infokanca.blogspot.com/ -->

</script>







<script>

<!--http://infokanca.blogspot.com/-->

document.write(unescape('%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%72%69%67%68%74%27%20%6F%6E%6D%6F%75%73%65%6F%75%74%3D%27%73%65%6C%66%2E%73%74%61%74%75%73%3D%26%61%70%6F%73%3B%26%61%70%6F%73%3B%27%20%6F%6E%6D%6F%75%73%65%6F%76%65%72%3D%27%73%65%6C%66%2E%73%74%61%74%75%73%3D%26%61%70%6F%73%3B%61%73%72%69%7A%61%6C%77%61%68%64%61%6E%77%69%6C%73%61%26%61%70%6F%73%3B%3B%72%65%74%75%72%6E%20%74%72%75%65%3B%27%3E%20%3C%69%6D%67%20%61%6C%69%67%6E%3D%27%61%62%73%6D%69%64%64%6C%65%27%20%62%6F%72%64%65%72%3D%27%30%27%20%6F%6E%43%6C%69%63%6B%3D%27%63%6C%6F%73%65%54%6F%70%41%64%73%28%29%3B%72%65%74%75%72%6E%20%66%61%6C%73%65%3B%27%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%69%31%31%30%35%2E%70%68%6F%74%6F%62%75%63%6B%65%74%2E%63%6F%6D%2F%61%6C%62%75%6D%73%2F%68%33%35%36%2F%4F%7A%79%77%34%32%2F%64%65%6C%65%74%65%2E%70%6E%67%27%20%73%74%79%6C%65%3D%27%63%75%72%73%6F%72%3A%68%61%6E%64%3B%63%75%72%73%6F%72%3A%70%6F%69%6E%74%65%72%3B%27%2F%3E%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E'));

<!-- visit http://infokanca.blogspot.com/ -->

</script>

9. Untuk yang berwarna merah danbiru bisa anda isi/ganti dengan url blog dan nama blog anda,

Contoh :



 <a href='http://www.facebook.com/home.php?sk=group_151944778194641'>Back Packer Grup</a>



 <a href='http://infokanca.blogspot.com/'>infokanca.blogspot.com</a>



10. simpan template dan lihat hasilnya..





Selamat Mencoba ..... :-)