Agar Posisi Widget di Tengah | Center Pada Header Atau Footer Blog

Adakalanya pada saat kita memasukan Widget pada Header atau Footer Blog, posisi widget tersebut tidak berada ditengah-tengah/center. Untuk mengatasi hal tersebut, kita perlu menambahkan sedikit kode script kedalam Widget tersebut.

Langkah-langkahnya adalah sebagai berikut:

1. Login ke Blogger.

2. Klik Tata Letak.

3. Klik Elemen Laman.

4. Klik Edit pada salah satu Widget yang posisinya tidak berada ditengah-tengah Header atau Footer.

Contoh kode script Widget yang belum ditambah:

<a href="http://www.copyscape.com/duplicate-content/"><img src="http://banners.copyscape.com/images/cs-gy-234x16.gif" alt="Protected by Copyscape Duplicate Content Tool" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." width="234" height="16" border="0" /></a>

5. Tambahkan kode script dibawah ini:

<p style="margin-top:0px; margin-bottom:0; padding-bottom:0; text-align:center; line-height:0"> ..................................................................................................................................</p>

Sehingga kode script-nya menjadi seperti ini :

<p style="margin-top:0px; margin-bottom:0; padding-bottom:0; text-align:center; line-height:0"><a href="http://www.copyscape.com/duplicate-content/"><img src="http://banners.copyscape.com/images/cs-gy-234x16.gif" alt="Protected by Copyscape Duplicate Content Tool" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." width="234" height="16" border="0" /></a></p>

keterangan: kode script warna merah adalah kode script yang ditambahkan.

6. Klik Simpan Template.

7. Selesai.

Cara Menambahkan 2 Kolom Di Bawah Footer Pada Blog "Template Harbor"

Footer bawaan dari "Template Harbor" hanya 1 kolom. Agar kita memiliki Footer 2 kolom dibawah Footer default, sedikit kita lakukan modifikasi pada template tersebut. Mari kita ikuti langkah-langkahnya sebagai berikut:

1. Login ke blogger.

2. Klik Tata Letak.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> (Biar lebih mudah mencarinya, tekan tombol CTRL+F).

5. Selanjutnya copy dan paste kode berikut tepat di atas kode ]]></b:skin>.

#footer-column-divide {

clear:both;

}

.footer-column {

padding: 10px;

}

6. Kemudian Cari kode dibawah ini:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

7. Jika sudah ketemu, Hapus </div> dibawah kode <b:section class='footer' id='footer'/>

    karena sudah ada gantinya.

    Tambahkan kode dibawah ini tepat dibawah kode <b:section class='footer' id='footer'/>.

 

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

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:center;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>

</b:section>

</div>

<div id='footer2' style='width: 50%; float: left; margin:0; text-align:center;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>

</b:section>

</div>

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

</div>

</div>

Sehingga kodenya menjadi seperti ini:

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

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

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:center;'>

<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:center;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

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

</div>

</div>

8. Klik SIMPAN TEMPLATE dan selesai.

Catatan: 

Penambahan kode script seperti ini bisa langsung dilakukan jika pada footer default dari "Template Harbor" tersebut belum ditambahkan apa-apa, baik gadget ataupun yang lainnya. 

Jika sudah terlanjur anda menambahkan sesuatu di footer default tersebut, pindahkan dahulu ke tempat lain, lalu terapkan seperti langkah-langkah diatas.