Cara Membuat 2, 3 dan 4 Kolom di Bawah Postingan

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْم

Bingung Mau nambah tempat gadget atau kolom terutama di bawah postingan. Jangan khawatir karena saya pada kesempatan kali ini akan memposting tentang membuat 2, 3 dan 4 kolom di bawah postingan, sebenarnya artikel kayak gini udah ada di mana-mana namun apa salahnya saya posting dengan persi saya itung-itung nambahin artikel saya dan jikalau ada yang belum tau kan jadi tau.

Tidak panjang lebar karena bakalan panjang nanti berat lagi loadingnya - langsung saja yah ke pembahasan :

Apa yang mesti sobat lakukan ?

ikuti Tur dibawah ini, he he Tur bagus nian bahasanya...

1. Tentunya, Login dulu ke Blogger, bukan ke facebook.
2. Pilih Rancangan-Edit HTML
3. Centang  (√)  Expand Template Widget.
   
   Nb : jika takut terjadi kesalahan unduh dulu tamplate anda - untuk jaga-jaga.
4. Kalau sudah, Anda cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atas kode ]]></b:skin>
   
   
5. #footer-column-divide
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }


6.  Berikutnya, cari kode yang mirip seperti kode di bawah ini :
7.  <div id='footer'>
   <b:section class='footer' id='footer' showaddelement='yes'/>
   </div>   
8. Atau
9. <div id='footer-wrapper'>
   <b:section class='footer' id='footer' showaddelement='yes'/>
   </div>
10. Note :
    Biasanya, setiap template memiliki kode yang berbeda-beda.
    
    Dalam hal ini, jika Anda tidak dapat menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' /> , yang perlu Anda lakukan adalah menambahkan kode berikut di bawah kode =>
    <div id='footer'> atau <div id='footer-wrapper'>.
11. Untuk membuat footer 2 kolom, letakkan kode berikut :
    
    <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;'/>

Lihat juga

• Tips Mencegah Serangan Hacker
• CSS Menu Dropdown Keren untuk Blogger

</div>

Jikalau Untuk membuat footer 3 kolom, letakkan kode berikut :

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

Dan Untuk membuat footer 4 kolom , letakkan kode berikut :

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

Jika sudah di tambahkan, klik tombol Simpan Template, dan lihat hasilnya,

Kalau ada masalah silahkan komentarnya, apalagi kalau berhasih.. he he maklum blog ane kan baru dan ni blog dofollow - komentar agan sangat bermanfaat bagi saya. :D