Cara membuat 3 kolom dibawah header pada NewTemplate Blogger

Bagikan :

Tweet

Sekarang ini aku liat diblog teman-teman banyak yang pake 3 kolom dibawah Header , biar tambah cantik kali ye..
Pada Template asli bawaan Blogger agak berbeda dengan Template dari selain blogger tentunya. Ini disebabkan karena scrip yang digunakan berbeda. Dan Post kali ini khusus untuk Template blog yang ingin menambah 3 kolom / elemen dibawah header yang pake Template asli dari Blogger .

Langsung aja dech gak usah bertele-tele ngomongnya hiihihi..

Silakan ikuti tahapan berikut ini :

1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut
]]></b:skin>  letakkan kode dibawah ini diatas ]]></b:skin> :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

2. Kemudian cari kode </b:section> atau yang mirip kode dibawah ini:

</div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='alfians blog (Header)' type='Header'/>
</b:section>

Untuk lebih tepatnya anda bisa melihat di  title='alfians blog (Header)' .
alfians blog adalah judul blog saya dan tentunya judul blog teman-teman akan tertulis disitu.

3. pasang /paste kode berikut tapat dibawa </b:section> :

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya,. Mudah bukan??
4. Jangan lupa tinggalkan komentar ya…

Tag : Blogger