Home » » Cara memodifikasi footer blog agar menjadi lebih elegan

Cara memodifikasi footer blog agar menjadi lebih elegan

Written By Amir Dzaky Dzul Imtiyaz on Rabu, 19 September 2012 | 14.25

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. Cara memodifikasi footer blog agar menjadi lebih elegan » Rizaldi Priantama Blog
  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>
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/AVvXsEjtlaEkPbWz7vBS6wLBIKPThMIBDLVC8Ovyw0yqTR1EWBeGVAKnutNnuLAhLUKVeHYClJFQzNeo7quHl9JqxicLEBrfaHwUJl2u-tkTieOW9ZDgI887aYoFXFja48ckT8w5GcQ2cVnB1ekj/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>
Klik untuk melihat kode
<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
Share this article :

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Hanya Ingin Berbagi Informasi - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger