Saturday, 31 August 2013

Cara Membuat Footer 3 Kolom di Blogger

Postingan ini akan membahas tentang cara menambahkan footer di blogger. Footer itu letaknya dibawah, bisanya dipake untuk memasang widget-widget tertentu. Disini akan dibahas footer yang terdiri dari 3 kolom. Contoh bentuk footer lihat saja diblog ini di bagian bawah, disitu saya pake buat naruh widget-widget statistik dari blog ini.

Langsung saja, berikut step-stepnya:

1. Login ke blog sobat terlebih dahulu.
2. Klik Template > Edit HTML 
3. Cari code ]]></b:skin> untuk mempercepat taruh kursor mouse di kotak edit htmlnya lalu gunakan Ctrl+f 
4. Copy code di bawah ini lalu letakkan tepat di atas code ]]></b:skin> 
 #footer-column-container {     
clear:both;     }    
 .footer-column {     
padding: 10px;     
}

5. Selanjutnya cari code <div id='footer'> atau id='footer' 
6. Lalu copy lagi code di bawah ini letakkan tepat di bawah code <div id='footer'> atau id='footer' 
<p>
    <hr align='center' color='#ffae00' width='90%'/></p>
    <div id='footer-column-container'>
    <div id='footer2' style='width: 30%; 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: 40%; 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: 30%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    <p>
    <hr align='center' color='#ffae00' width='90%'/></p>
    <div id='footer-bottom' style='text-align: center; padding:
    10px; text-transform: lowercase;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    <b:widget id='Text2' locked='false' title='' type='Text'/>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>
keterangan. code warna merah adalah code buat membatasi atas bawah menggunakan garis , jadi kalau mau dihilangkan juga gak masalah. 

7. Kalau sudah silahkan Save Template sobat.
Nah sekarang coba sobat lihat di Tata Letak atau layout. Sudah berubah kan hehe..

Happy blogging

WAJIB BACA!
Penghasilan Online paling realistis dan anti SCAM. Kerja Online cuma dengan mengetik kode captcha, anda digaji dollar. Silahkan baca postingan kerja online ketik captcha disini.

Share artikel ini :
Labels:

Artikel Terkait

Silakan Berkomentar Melalui Akun Facebook atau Akun Blogger Anda



0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a comment

Jika menggunakan akun blogger, silakan isi komentar di bawah. Jika ingin menampilkan emoticon, cukup copas kodenya yang tertampil di sebelah kanan emoticonnya. Please No Spam, No Porn, No Junk!

CATATAN. Tampilan komentar di blog ini menggunakan sistem scroll, jika ada postingan yang sudah banyak komentarnya, maka untuk melihat komentar terakhir dari sobat perlu ditarik scrollnya sampai ke bawah, atau jika masih belum muncul berarti ada page berikutnya maka klik "newest" terlebih dahulu baru kemudian tarik scroll-nya ke bawah.

zonatyper tutorial kerja ngetik captcha
Langganan Artikel via Email