Cara Menambah kolom widged footer di Blogspot

Cara Mudah Menambah Footer di Blogspot - Udah lama banget kayaknya gak update blog. Nah, pada pagi hari yang cerah ini admin mau bagikan trik keren Cara Mudah Menambah Footer di Blogspot. Mungkin sudah banyak yang bahas artikel ini, tapi saya bisa jamin tingkat kemudahan dan keberhasilan 90%. Kenapa saya berani bilang begitu ? ya karena saya juga baru selesai menambahkan footer disalah satu blog saya. Saya akan beberkan Cara Mudah Menambah Footer di Blogspot sebanyak 2,3, atau 4. Sekarang terserah kamu mau pilih yang mana untuk dipasangkan di blog kamu. Berikut demo footer 3 kolom yang  sudah saya tambahkan :

Footer 3 Kolom Blogspot

Tutorial Cara Mudah Menambahkan Footer di Blogspot

• Login dengan akun blogger kamu terlebih dahulu
• Pilih Rancangan --> Edit HTML
• Jangan Lupa Beri centang pada Expand Template Widget 
• Cari kode  ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya

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

• Cari kode seperti seperti berikut :

<div id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> atau <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> 

• Setelah ketemu, tambahkan kode di bawah ini tepat di bawah <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )

Jika ingin membuat footer 2 kolom. Gunakan kode ini :

<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>

Jika ingin footer 3 kolom. Gunakan kode ini :

<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>

Membuat footer menjadi 4 kolom. Gunakan kode ini :

<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>

Langkah terakhir adalah menyimpan hasil editan. Selamat mencoba :)

Silahkan dibagikan keteman Via

Tweet

Artikel Terkait :