Prakerin ke 47

Hari,Tanggal     : Jumat,23 November 2012
Mulai Pukul      : 08.00 sampai 16.00

Cara memodifikasi footer blog agar lebih elegan

Hai sobat blogger,kali ini saya akan update tutorial blog lagi nih sobat blogger.  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.

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>
7.) Lalu paste kode dibawah ini tepat diatas kode ]]></b:skin>

#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(http://3.bp.blogspot.com/-TqLu1nGjAJI/TjQDRVTvBHI/AAAAAAAAB7s/z7Qm32_VzwA/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 cari kode </body>, taruh kode ini diatas kode </body>

<div id='footer-column-container'><div id='footer2' 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='footer3' 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='footer4' 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></div><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><!--//end --> <div class='footer-menu' id='section-left'></div></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
.coba aja




www.kebumenmedianet.com