Friday 15 June 2012

Cara Mudah Menambah Footer di Blogspot

Cara Mudah Menambah Footer di Blogspot - Udah lama banget kayaknya gak update blog. Nah, pada pagi hari yang cerah ini admin mau bagikan trik keren Cara Mudah Menambah Footer di Blogspot. Mungkin sudah banyak yang bahas artikel ini, tapi saya bisa jamin tingkat kemudahan dan keberhasilan 90%. Kenapa saya berani bilang begitu ? ya karena saya juga baru selesai menambahkan footer disalah satu blog saya. Saya akan beberkan Cara Mudah Menambah Footer di Blogspot sebanyak 2,3, atau 4. Sekarang terserah kamu mau pilih yang mana untuk dipasangkan di blog kamu. Berikut demo footer 3 kolom yang  sudah saya tambahkan :
Footer 3 Kolom Blogspot

Tutorial Cara Mudah Menambahkan Footer di Blogspot


  • Login dengan akun blogger kamu terlebih dahulu
  • Pilih Rancangan --> Edit HTML
  • Jangan Lupa Beri centang pada Expand Template Widget 
  • Cari kode  ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya
  • #footer-column-divide { clear:both; } .footer-column { padding: 10px; }
  • Cari kode seperti seperti berikut :
  • <div id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> atau <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> 
  • Setelah ketemu, tambahkan kode di bawah ini tepat di bawah <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )
Jika ingin membuat footer 2 kolom. Gunakan kode ini :
<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
Jika ingin footer 3 kolom. Gunakan kode ini :
<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Membuat footer menjadi 4 kolom. Gunakan kode ini :
<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Langkah terakhir adalah menyimpan hasil editan. Selamat mencoba :)

30 comments:

  1. makasih tutorialnya gan, visit back ya :D

    ReplyDelete
  2. terima kasih kawan, artikel ini bermanfaat buat saya. silahkan cek hasilnya di blog saya.

    ReplyDelete
  3. mantap gan nanti saya coba
    thank untuk triknya gan

    ReplyDelete
  4. salut dah buat om Fajri :D

    salam

    www.nyongnyong.com

    tempatnya download software gratis !

    ReplyDelete
  5. kebetulan blog ane belum ade footernya neeh, siap di coba dulu daah

    ReplyDelete
  6. wah tau gitu, oke gan makasi atas infonya

    ReplyDelete
  7. oh gitu gan saya baru tau, kalu aku cara mindahin data itu cara manual, tau gini ga usah susah-susah masi gan atas infonya >

    ReplyDelete
  8. makasih atas informasi tentang tutorial blog

    ReplyDelete
  9. Hello this is somewhat of off topic but I was wondering if blogs use WYSIWYG editors
    or if you have to manually code with HTML.
    I'm starting a blog soon but have no coding knowledge so I wanted to get advice from someone with experience. Any help would be enormously appreciated!
    Here is my weblog :: Abendmode

    ReplyDelete
  10. postingan yang bagus tentang Cara Mudah Menambah Footer di Blogspot

    ReplyDelete
  11. thenks bgt gan..
    don't forget to visit my blog
    salam blogger!

    ReplyDelete
  12. Makasih udah di share :D
    ane perlu artikel nya :D

    #Salam blogger

    ReplyDelete
  13. terima kasih kawan atas tutorialnya, sudah saya coba dan berhasil ....

    ReplyDelete
  14. Kl untuk cms wordpress, gimana caranya gan??

    ReplyDelete
  15. thx sob...berhasil...berhasil...hurray

    ReplyDelete
  16. wah nambah ilmu baru nih , oke langsung coba

    ReplyDelete
  17. Thanks gan infonya. Udah berhasil ane terapin di blog and sukses

    ReplyDelete
  18. Setelah ane coba,,,, ternyata berhasil.. tapi lumayan bikin kepala nyut-nyutan yah, pusing..
    :D

    ReplyDelete
  19. mantap gan... sangat bermanfaat ..udah ane coba sama blog ane..hehehehe
    nice shared...

    ReplyDelete
  20. thank infinya visit back ya gan amhproart.blogspot.com

    ReplyDelete