Mobile Game

Cara Menambah 4 Kolom Footer di Blog

Cara Menambah 4 Kolom Footer di Blog

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

Simpan Lihat Blog.

Catatan :
Bila anda Pratinjau dan tidak kelihatan hasilnya memang seperti itu kelihatannya karena Gadgetnya masih kosong. Simpan/.Save dan lihat hasilnya di tata letak.
Semoga Bermanfaat.

Available link for download