Social Icons

twitterfacebookgoogle pluslinkedinrss feedemail

Pages

Minggu, 13 Mei 2012

cara membuat 2 sampai 4 kolom di bawah postingan


  • Login Blogger
  • Pilih Rancangan-Edit HTML
Perhatian :
Agar tidak terjadi kesalahan, simpan atau salin template blog ke notepad komputer Anda, dalam keadaan centang  (√)  Expand Template Widget.
  • Selanjutnya hilangkan tanda centang Expand Template Widget agar mudah mengikuti langkah-langkah nya
  • Kalau sudah, Anda cari kode ]]></b:skin> dan letakkan kode berikutdi atas kode ]]></b:skin>
#footer-column-divide
clear:both;
}
.footer-column {
padding: 10px;
}

  • Berikutnya, cari kode yang mirip seperti kode di bawah ini :
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

Atau

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
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'>.
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;'/>
</div>
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>

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>

  • Jika sudah di tambahkan, klik tombol Simpan Template, dan lihat hasilnya, nanti footer blog akan menjadi sebagai berikut :
 

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

Tidak ada komentar:

Posting Komentar

jika sobat menemukan link yang rusak atau error tinggalkan komentar kami akan melakukan updated terhadap link yang rusak tersebut