Cara Bikin Footer Navbar

Mungkin buat sebagian orang agak kurang mengerti apa itu footer navbar, Jadi saya akan sedikit mencoba menjelaskan mengenai apa itu footer navbar sebelum bagaimana cara bikinnya. Pertama kali saya melihat footer navbar ini di blognya mas anang, karena kelihatan menarik..maka saya pun mencoba mengaplikasikannya di blog ini. Dan hasilnya...anda semua bisa melihat di bagian paling bawah dari blog ini. Berikut screenshootnya :


Anda bisa lihat text yang berada di dalam lingkaran biru, nah itulah yang disebut dengan footer navbar. Pasti dah ngertikan......Pengen pasang footer navbar di blog anda...? Ikuti cara2-nya dibawah ini :

1. Login di blogger, lalu setelah masuk dashboard pilih blog yang akan anda pasangi navbar ini

2. Seperti biasa, masuk layout --> edit html

3. Beri tanda centang pada expand template widget

4. Cari ]]></b:skin> lalu copy paste kode dibawah, diatas kode barusan

#navbar-footer a {
color: #000;
font-weight:bold;
}

#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #fff;
width: 100%;
left: 0px;
text-align: left;
color: #000;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}


5. Langkah selanjutnya, masukan kode berikut persis diatasnya kode </body>

<div id='navbar-footer'>
<p align='center'>
<a href='http://kursus-blog.blogspot.com/'>Kursus Blog</a> © Juni 2008<br/>Template Designed by <a href='http://www.blogger.com/profile/01431888848076356714' target='new'>Mizwar</a> | on <a href='http://bloggertemplates-foryou.blogspot.com' target='new'>Blogger Templates</a></p>
</div>


Silahkan ganti semua text yang berwarna merah sesuai dengan data anda sendiri. Jika anda mengerti, anda bisa memodifikasi kode diatas sesuai keinginan anda. Bisa ditambahkan gambar, marquee, atau apa saja terserah anda. Ok...Selamat mencoba.

25 komentar:

  1. ijin sedot mas dan saya pasang di artikel saya ya. makasih

    BalasHapus
  2. Ikutan mas.. saya jiplak footer navbarnya.. makasi..

    BalasHapus
  3. Mas Dunia-Blogger numpang download Templatenya yach.... dan artikel ini udah di coba kok bisa di liat di http://Dunia-Blogger.blogspot.com;;)

    sebagai rasa terima kasih juga masih ada linknya kok ke blog Kursus-Blogger...

    ok dech semoga bermanfaat ya mas......

    BalasHapus
  4. mas... ada kendala nih.... pada edit HTML blog saya .. tidak ada tulisan /body" tolong informasinya mas....:-/

    BalasHapus
  5. terima kasih atas Pelajaran dan Ilmunya ya mas..saya doain mas makin JAYA and SUCCSES.saya mau copy mas punya buat di blog saya..boleh ya mas..Thanks

    BalasHapus
  6. @haryanto : masa sih....coba lebih teliti lagi. untuk posisi tag </body> itu. letaknya di paling bawah. Gunakan menu pencarian browser untuk lebih mudahnya dg cara menekan ctrl+f lalu ketik </body>

    BalasHapus
  7. makasih ya mas...saya udah nyoba tuh..jadi makin keren aja blognya..kalau buat nambah kolom-kolom gimana caranya mas..ajarin kita DONK...

    BalasHapus
  8. @chaca : tunggu aja postingannya ya...

    BalasHapus
  9. so PASTI aku TUNGGU lo mas..tapi jgn lama2 ya mas..AKU UDAH NGAK TAHAN nihh...he..he..he..PENGEN CEPAT..cepat mahir kayak mas mizwar..

    BalasHapus
  10. mas biar ada gambarnya gimana caranya ya???

    BalasHapus
  11. @andrian : kalo mo nambahin gambar, tinggal tambahin aja tag <img src="URL GAMBAR" alt=""/>

    BalasHapus
  12. Heuheu berguna neh, kpn2 coba akh. Thx ya

    BalasHapus
  13. mw nanya.. kalau nge edit footer yg udh ada default terus diapus boleh gak?? bisa pasang script jg ya di situ?:-/

    BalasHapus
  14. THX atas kursusnya,sob leh tau ndak gimana cara bikin tampilan navbar kreasi sendiri,thx atas infonya

    BalasHapus
  15. mantap pren, bs buat panduan lgkp utk menghias blog-ku...
    Thank berat yak...
    klo pengen liat hasilnya di http://www.igepnet.blogspot.com

    BalasHapus
  16. thanks om.. nice.. salam =)

    BalasHapus
  17. .:INVESTASI-99 | INVESTASI CERDAS | PELUANG USAHA:. Klik disini: http://www.investasi-99.com/?ref=55

    BalasHapus
  18. mas bagus nih artikelnya, bisa belajar bikin blog disini

    BalasHapus
  19. for kaka mizwar..

    mas apa yg slalu aq tulis tentang komik,cheat game,dll
    slalu jadi 1...

    padahal aq inginya berbeda halaman kalo diskusi komik dan cheat game mempunyai halaman sendiri

    kalo mas mizwar tau tolong kasih tau ke aq

    ni email aq:neverbest_holick@yahoo.com

    bales secepatnya ya

    BalasHapus
  20. untuk template klasik gimana caranya bos

    BalasHapus

blogger