Cara Membuat Widget Footer Pada Blogger

Oleh Rafid Aslam

1 Agustus 2012

Footer- Tips Blogger kali ini berkaitan dengan Footer. Seperti yang anda tahu Footer biasanya untuk memasang tempat satu lagi di bawah tepat di paling bawah halaman blog, contohnya seperti gambar di atas ini. Biasanya ada footer pada template bawaan dan ada yang tidak, perbedaan itu membuat yang tidak mempunyai footer menjadi iri, karena itu saya membuat artikel ini.

Cara ini bisa dianggap mudah bagi blogger yang berpengalaman, dan bisa sulit untuk yang belum perpengalaman, karena cara kali ini memakai kode HTML, saya akan memakai petunjuk gambar dan tulisan secara jelas.

Ikuti Langkah-langkah di bawah ini:

1. Masuk ke Dasbor
2. Pilih blog yang ingin dipasang footer
3. Pilih Template

4. Klik Edit HTML

5. Klik Expand Template Widget

6. Copy kode berikut dan letakan tepat di atas ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

7. Selanjutnya cari kode <div id='footer-wrapper'> atau kode <div class='footer-outer'>
(jika tidak ketemu fokuskan pada kata footer di paling bawah kode HTML)

8.Pilih salah satu kode berikut lalu Letakan kode berikut di bawah kode <div id='footer-wrapper'> atau kode <div class='footer-outer'>

Script untuk menambah 2 kolom add gadget:

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Script untuk menambah 3 kolom add gadget:

<div id='footer-column-divide'>

<div id='footer1' 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='footer2' 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='footer3' 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>

Script untuk menambah 4 kolom Add Gadget:

<div id='footer-column-divide'>

 <div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

7. Klik Simpan Template

Hasilnya pada tata letak akan seperti ini.

Pada Blog Hasilnya akan seperti ini.

Bagus Bukan?

Bagi yang ingin bertanya silahkan tanyakan di kotak komentar di bawah artikel ini.

 
Keyword:

cara cepat bikin blog

template blog baru

tutorial membuat template

cara membuat template pada blog

cara membuat gadget pada blog

html blog templates

cara menambahkan template pada blog

menambah widget pada blog

cara membuat teks

Footer

Pada Blogger

Tag : Tips Blogger

Bagikan :

Tweet