Tutorial Cari Uang

Sunday, May 04, 2008

Blogger Footer Navbar



Bila anda ingin memodifikasi tampilan blog anda dan menampilkan navbar (navigational bar) seperti yang ada di bagian bawah atau footer dari Anang's Blog ini. Navbar tersebut senantiasa muncul pada bagian bawah blog kita, meskipun halaman tergulung (scrolled) ke atas maupun ke bawah.

Nah, untuk membuatnya berikut ini akan saya tunjukkan beberapa langkah-langkahnya. Pertama sekali tentunya anda harus login dulu ke akun Blogger anda. Buka Dasbor dan klik pada menu Layout dilanjutkan dengan menu Edit HTML dan beri tanda centang pada Expand Template Widget. Lalu pastekan kode CSS berikut ini persis sebelum tanda ]]></b:skin>:

#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}

#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}

#navbar-footer a {
color: #333;
}

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

Langkah selanjutnya, masukkan kode berikut persis sebelum </body>:

<div id="navbar-footer">
<p>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYfgdgefUEceQPlmQaiIxUYjGmroqqXUgFsknn9Gb7jjYkY4hDa3CBdSp2ypAgXUvWFE6o7NFbvgHRQWr-7tCMT2NJkBYCexgsDJdEyIOjL4HoOE-zPC6IYUtEY4Tm0T3MLnzB/s400/anang.jpg"/>&#160;&#160;<a href="http://anangku.blogspot.com/index.html">Anang's Blog</a>&#160;&#169;&#160;2006-2008 <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WZt6VLV9a_U1Mkm-6X-2gn8mUEc8QbaAXN4IwzedjKmMBZZo8tzr9B5D7WT4uR3PjOtgOAJvPwc36Ee8SBi6PlLU2d0cCwCnsLCvyhx69n3lSnCkjohJOz2qXIKCdsbDQRgG/s400/signature.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Created and Maintained by <a href="http://www.friendster.com/anangku" target="_blank">Anang</a><br/>Best viewed in Firefox 1.5+ at 1024x768 or higher resolution
<br/>
</p>
</div>

Ganti semua yang berhuruf tebal warna merah sesuai dengan keyakinan anda.. Halah.. Sesuai dengan blog dan identitas anda... Avatar, tandatangan, URL Blog/Friendster terserah anda...! Oke?

Selamat mencoba!

Source gambar dari wiki CA.
Inspirasi dari sini.

68 comments:

  1. kalo mau ada gambarnya kayak punyanya mas anang tinggal tambahin kode html standar img kan mas? thanks infonya!

    ReplyDelete
  2. coba aahh di blog saya yang di blogspot... :D

    ReplyDelete
  3. wah ada tutorial disini..:)
    Thanks Ilmunya..^_^

    ReplyDelete
  4. ah.... wordpress ngak bisa :P

    ReplyDelete
  5. lha kalo bikin tanda tangannya secara manual bagaimana urut2annya mas anang? coba diposting berikut gambarnya... darimana dulu nggarisnya kalo mo bikin tanda tangannya mas anang...

    ReplyDelete
  6. hooo, lumayan dpt ilmu css lagi hehehhe sip sip

    ReplyDelete
  7. wah... udah lama nih aku gk kunjungi blog nya mas anang...


    inget dolo ,terakir kali ngunjungi blognya mas anang pas masih di multiply.. ^^

    ReplyDelete
  8. patut dicoba mas, tapi kalo tandatangane elek gak usah dipasang kan ra po2 to mas?? hehe

    ReplyDelete
  9. Mbok sisan avatar dan signaturenya gitu loh. Sekalian dikasih kodenya termasuk link ke file aslinya.

    Maksudnya supaya persis gitu loh.

    ReplyDelete
  10. @ jimmy : yup terserah mo ditambahin aja boleh.. selera masing-masing

    @ ghatel : silahken mas.

    @ yolla : yuk mari..

    @ asruldinazis : ya memang ga bisa.. :D

    ReplyDelete
  11. @ bangpay : langkah-langkah membuat tanda tangan manual...

    1. pake Microsoft Powerpoint :
    lakukan goresan dengan menggunakan menu AUTOSHAPE yang terdapat pada toolbar DRAWING.. Usahakan goresan semirip mungkin dengan tanda tangan anda. Setelah goresan-goresan tanda tangan tersebut di GROUPING, klik kanan dan pilih menu SAVE AS PICTURE. Jangan lupa save ke dalam format GIF, karena otomatis background gambar menjadi transparent. Jadi deh tanda tangan virtual.

    2. Dengan kertas putih polos. Coretkan tanda tangan anda. Kemudian SCAN dan edit background putih menjadi transparent dengan bantuan software Photoshop, dll. Simpan sebagai GIF. Jadi kan?

    3. Online signature creator. Banyak situs yang bisa bikin tanda tangan online.. Tanya paman Google aja.. Dia tahu kok...!!

    4. Ini cara yang paling mudah... Minta bantuan teman yang ahli... hahaha...

    ReplyDelete
  12. @ Ojat : saya dapat komentar..

    @ khafi : mulai sekarang kunjungi blogspot terus ya..! :D

    @ wkurniawan : lho, kan terserah sampeyan to mas... mau dipasang pa ndak urusan sampeyan.. selera yang berbicara..

    @ elly.s : tanda tangan ya tinggal bikin dong buk...

    ReplyDelete
  13. kalo wordpress bisa g bang>>

    ReplyDelete
  14. @ diorockout : silahken..

    @ Kombor : oke, udah tak ganti biar mirip cak.. Makasih sarannya..

    ReplyDelete
  15. Langsung tak links, tararengkyu yah... sudah mau mendokumentasikan nya

    ReplyDelete
  16. ngenteni aku ol nang warnet ki..
    gak ngabot-ngaboti to nang? tgantung ukuran imagenya to ndop.. ndop..

    diluk ngkas tak saingi blogmu nang...
    *halah ndop, kamu masi syang sama wp mu ngono loh..*

    ReplyDelete
  17. padahal itu kan ciri khas blog ini nang, hehe, gw belom pernah liat sih ada yang make selain loe, baik juga dibagi2 caranya, hehe.

    ReplyDelete
  18. akhirnya dipost juga navbar ini..tambah sip nang :)

    ReplyDelete
  19. Saya kok gagal terus ya?? tolong diberi inspirasi baru dong mas..!

    Kegagalan itu bunyinya begini:

    "Kami tidak dapat menyimpan template Anda.
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "p" must be terminated by the matching end-tag "".

    ReplyDelete
  20. Mas Anang memang TOP BGT. :)

    ReplyDelete
  21. wahhh..saya dah pindah wordpress..kekeke..

    ReplyDelete
  22. nah ini yang ditunggu2... ntar deh dipraktekkan... bookmark dulu :D ada versi wordpress gak?

    ReplyDelete
  23. hmm, mkasih buat ilmunya y mas,berharga bgt nch buat dbagi ma tmen2

    ReplyDelete
  24. maaf mas pendatang baru jadi masih sering bingung......
    pas mau masukin kode footer navbarnya
    pas mau saya preview/pratinjau
    selalu keluar kalimat ini
    "Kami tidak dapat menyimpan template Anda.
    Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "p" must be terminated by the matching end-tag "....apa ada yang salah?????

    ReplyDelete
  25. thanks banget mas tutorialnya, oy kasih tambahan kenapa yang copy paste codenya awal tujuannya sama pengen cepet selesai n beres cuman di code yang mas kasih itu tutup dari p class info nya gak ada makanya ada yang eror... hehehe... sukses ya

    ReplyDelete
  26. mas anang, blog ku navbarnya ilang... kalo mau di tampilin lagi gimana yah? aku download template pake finalsense. pliz help. thanks

    ReplyDelete
  27. mas anang mw tanya nih . . . . . .

    wakt usaya ngoprek Data Css nya buat potong Footernya cuman yg kiri aja yg bisa....

    klo Kanan gmana caranya??? jadi saya bisa NgeFitting ato ngasih pas Footer ini dengan Ukuran Web saya.... habis kelihatannya kaya panjang bgt klo ukurannya gini. . . .. .

    pliss reply ya mass GPL

    ReplyDelete
  28. Kang anang hatur nuhun pisan atas tutorialnya,saya udah coba dan ternyata berhasil mas.... sukses terus bwt mas anang...

    ReplyDelete
  29. Wah makasih banyak mas anang atas tutor-nya :D sangat membantu

    ReplyDelete
  30. mas anang, klo boleh tanya neh, source codena dari mas anang dw ato darimana mas? soalna saiyah mo mbahas tentang navbar jugak di blog saiyah, jadi biar enak klo saiyah tau sumbernya :D

    makasih yo :)

    ReplyDelete
  31. mas,punyaku gak pake tanda tangan.jadinya tulisan copyrightnyaada di bawah.bukan di tengah.gimana ya?

    ReplyDelete
  32. mas anang, ntuh cara pasang link fotony gimana, aku hosting di imageshack kok ga bisa keluar ya fotonya ... bantuen po'o

    ReplyDelete
  33. Makasih banyak Mas Anang: Makasih kode CSSnya: Coba Perhatikan Navbar Blogger Defaultnya di Atas nah di sini Beda Mas, "Membuat Navbar Blogger tampil di Bawah/Footer"

    ReplyDelete
  34. mas, sy sudah pasang semua kode, tapi kok footer navbarnya gak mau floating ya..
    tapi nempel dibawah, jadi kl digeser keatas, ikut gak keliatan..

    tolong mas anang..

    tx b4

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. Salam Kenal, Pa Anang.
    Dahsyat, Numpang Pake ya Codenya.
    Tokcer Langsung jadi.
    Terima kasih
    http://dbsjakartateam.blogspot.com

    ReplyDelete
  37. Terima kasih atas tutorialnya yang amat membantu,, :)

    ReplyDelete
  38. Assalamualaikum......SALAM KENAL=====================
    Temen-temen ingin WIRAUSAHA ??? Jadi entrepreneur ???
    Ingin punya bisnis ??? Mau buka usaha ???
    Yang nyata, halal, prospektif & mudah ??? ( Bukan MLM )
    Atau butuh bimbingan / konsultasi ???
    Wujudkan Bersama Kami. "CV.HAZET Computer & Konsultan Bisnis"
    Hubungi 08121479434 Bp.Afif Naofal atau Klik

    http://WWW.INFOBAGUS.TK atau
    http://WWW.HAZETCOM.BLOGSPOT.COM

    ReplyDelete
  39. Dear Author anangku.blogspot.com !
    I refuse.

    ReplyDelete
  40. I want to quote your post in my blog. It can?
    And you et an account on Twitter?

    ReplyDelete
  41. Berhasil.. Thanks mas.. dulu gagal sekarang baru bisa.. ternyata tergantung juga dari tema yg kita pakai :)

    ReplyDelete
  42. I am really Glad i ran across this web site.Added anangku.blogspot.com to my bookmark!

    ReplyDelete
  43. I am Glad i came across this web site.Added anangku.blogspot.com to my bookmark!

    ReplyDelete
  44. Thanks you very much for a very nice post.

    ReplyDelete
  45. oh, bgus juga yah?? aq pengen pasang banner iklan PPC.

    ReplyDelete
  46. footer ny unik yah, bru kali ini saya liat..

    ReplyDelete
  47. tampilan nya boleh juga nih, bisa ubah warna gak??

    ReplyDelete
  48. like this article & book mark the webpage

    ReplyDelete

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)