Rabu, Oktober 05, 2011

Mengingat adanya keterbatasan disetiap template padahal kita masih banyak yang harus dipasang diblog baik artikel, iklan, dan lain sebagainya, dengan keterbatasan template tersebut saya akan mencoba membantu secara sederhana bagaimana cara membuat widget fotter blog menjadi beberapa kolom caranya sebagai berikut :

1. Login ke blogger anda
2. Klik rancangan dan klik Edit HTML

3. Agar temple anda aman dan bisa dikembalikan kalau ada masalah setelah melakukan perubahan backup terlebih dahulu template anda dengan cara klik pada download full template, terus simpan di computer anda.

4. Setelah melakukan download templete cari kode ]]></b:skin>

5. Setelah ketemu copy paste script dibawah ini di atas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

6. Langkah selanjutnya adalah cari kode seperti dibawah ini
<div id='footer-wrapper'>

7. Setelah ketemu langkah no.5 copy paste script di bawah ini tepat dibawahnya no. 5

Anda tinggal pilih script di bawah ini sesuai dengan kebutuhan anda mau berapa kolom 2, 3 atau 4 kolom :
Script untuk 2 kolom widget
<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 3 kolom widget
<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 4 kolom widget
 <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>

8. Setelah melakukan semua langkah di atas terus simpan template dan lihat hasilnya di rancangan

Contoh :




SEMOGA BERHASIL……

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.

Instagram

.

Video

Popular Posts

Silahkan add FB

About Me

Follow Twitter

Pengunjung

Flag Counter