Cara memodifikasi footer blog agar menjadi lebih elegan

Hai sobat blogger, kali ini saya akan menyempakan diri memposting artikel , setelah kurang lebih beberapa hari ga update. Nah,kali ini saya akan update tutorial blog lagi nih sobat blogger. Kali ini saya akan memberikan tutorial bagaimana cara memodifikasi blog agar menjadi lebih elegan. Untuk contoh, bisa lihat gambar dibawah ini, gimana? menarik bukan ? jika kurang menarik, sobat bisa mengganti sesuka hati kok mulai dari background, font, widget, dll.

Jika tertarik, mari kita bahas dan kupas tuntas tutorial pemodifikasian footer blogger ini bersama-sama.

FIX UPDATE ( Work 100% )  28 Desember 2012
1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Langsung masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda expand template widget 
5.) Hapus dulu kode CSS Footer anda sebelumnya, cari kode #footer-wrap, jika tidak ada, bisa melanjutkan ke langkah selanjutnya
6.) setelah itu, coba cari kode ]]></b:skin> atau kode footer blog yang anda gunakan saat ini.
7.) Lalu paste kode dibawah ini tepat diatas kode ]]></b:skin> atau ganti kode footer anda dengan kode dibawah ini

Klik untuk melihat kode

#footer-wrap{background:#FCFCFC}#footer{background:#fbfbfb;height:50px;padding:25px 35px 20px;border-top:1px solid #eee;text-decoration:none}#footer-column-container{clear:both;padding:0px 0px 10px 0px;background:#fff;color:#FFF}#footer-column-container a{text-decoration:none;color:#FFF}#footer-column-container a:hover{text-decoration:none;color:#FFF}#footer-column-container h2{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-kc7MCsCSabauH1APyg0SwtUhB2TM2PtYbMTo7avSQxzJaEMudXMbeZadmi7KUm6ROIW7N9kbxRIpfAJDwFOowL9-gA_-2XfnPO3cH5SekqpObbeF_1LDbup0z-AaQ8fw9hsiSXtNlrX/s1600/widget-title-bg.png) left top repeat-x;font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 5px 0;padding:8px 0 7px 10px;text-transform:uppercase}#footer-column-container ul{list-style-type:none;list-style:none;margin:0px;padding:0px}#footer-column-container ul li{padding:6px 0 6px 10px;margin:0;background:#292929;border-top:5px solid #666;margin:0 auto;padding:0 auto}.footer-column{padding:4px 10px}.credits{float:left;width:350px}#footer .credits p{line-height:100%;font:$(heading.font);font-size:16px;font-weight:700;margin:0 0 5px;padding:0}#footer .footer-menu{float:right;height:100pxmargin:0;padding:5px 0 0 0}

8.) Lalu ganti kode javascript / html footer blog anda dengan kode dibawah ini, biasanya berada diatas </body>. ( Setiap template menggunakan kode footer yang berbeda-beda, silahkan anda cari sendiri. Biasanya kebanyakan template menggunakan kode #footer-wrap, #footer-outer, #footer, dll. )

Klik untuk melihat kode

<div class='span-24' id='footer-wrap'> <div id='footer'> <div class='credits'> <p>&#169; 2012 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p> <small>Powered by <a href='http://www.blogger.com' target='_blank'>Blogger</a> | Template Designed by <a href='http://rizaldipriantama.blogspot.com' target='_blank'>Rizaldi Priantama</a><br/> &#169; All right reserved - Dilindungi oleh DMCA dan Hak Cipta Blogger</small> </div><div class='footer-menu' id='section-left'>Don&#39;t Understand Indonesian?<br/><div style='float:right'><div id='google_translate_element'/><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: &#39;id&#39;,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, &#39;google_translate_element&#39;);
}
</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div></div></div></div>

9.) Jika perlu, edit seperlunya html itu sendiri, jika ada pertanyaan silahkan layangkan lewat komentar
10.) Simpan Template dan lihat hasilnya

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :