Cara memodifikasi footer blog supaya menjadi lebih elegan


Selamat datang di blog sederhana Temukan Cara. Pada artikel sebelumnya saya telah berbagi ilmu tentang bagaimana cara dasar edit html tanpa eror, pada artikel kali ini saya akan berbagi ilmu mengenai cara memodifikasi blog supaya menjadi lebih elegan. Sebagai contohnya, dapat melihat gambar berikut ini, Apakah munutut anda menarik? jika kurang menarik, anda dapat mengganti sesuka hati anda, mulai dari background, font, widget, dll.
 
Langsung saja saya jelaskan cara-caranya sebagai berikut ini:

1.) Silahkan anda login/ masuk ke akun blogger anda.
2.) Kemudian masuk ke Dashboard  > Template  > Edit Html  > Lanjutkan
4.) Beri centang tanda expand template widget 
5.) Hapus dulu kode CSS Footer anda sebelumnya, cari kode #footer-wrap, jika tidak ada, dapat melanjutkan ke langkah berikutnya
6.) kemudian setelah itu, coba cari kode ]]></b:skin>
7.) Kemudian 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.) Kemudian cari kode </body>, paste kode dibawah 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://temukancara.blogspot.com/' target='_blank'>Temukan Cara</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.) Anda dpat edit seperlunya html itu sendiri
10.) Yang terakhir jangan lupa simpan template dan lihat hasilnya

Jika artikel ini sudah tidak relavan dan tidak layak untuk dibaca, mohon bantuannya dengan cara berkomentar pada postingan ini dan saya akan segera memperbaikinya. Tetapi jika artikel ini bermanfaat, saya berharap untuk ikut membantu kemajuan blog ini supaya menjadi baik lagi kedepannya. Caranya? 

Comments

Popular posts from this blog

Cara agar pukulan kita dahsyat

Cara Mengobati Tekanan Darah Tinggi (Hipertensi)

Cara agar pintu rizqi terbuka