Membuat Tiga Kolom Widget Dibawah Header Blogspot Template Baru

Setelah beberapa hari off, kali ini saya akhirnya bisa posing lagi. Mungkin untuk dua sampai tiga hari kedepan juga bakalan off lagi gara-gara mau ujian tengah semester.
Langsung aja ke permasalahanya ya. Kali ini saya akan membahas bagaimana membuat 3 widget dibawah header yang khusus untuk template baru blogspot. Mungkin maksud dari pembahasan kali ini yaitu terlihat pada gambar dibawah :





langsung saja kita ketahap pelaksanaannya.

1. yang pertama adalah cari kode berikut :

]]>

2. setelah ketemu pastekan kode berikut tepat diatas kode tersebut :

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

untuk besaran padding dapat disesaokan berdasar keinginan Anda.

3. Kemudian cari kode berikut :

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

kalau tidak ada cari yang kodenya mirip karena setiap blog berbeda.

4. Pastekan kode berikut tepat dibawah kode berikut :

<div id='box2' style='width: 33%; float: left; margin:50; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 33%; float: left; margin:50; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 33%; float: right; margin:50; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:righ;'/>
</div>
<div style='clear:both;'/>
</div>

kode diatas adalah untuk kode tiga kolom. Jika Anda ingin menambahkan maka tinggal sesuaikan jumlah barisnya. Untuk ukuran presentasi dapat diubah sesuai selera Anda.

5. Save template Anda kemudian lihat di Elemen Halaman maka Anda sudah bisa menikmati hasilnya..

Nb : jangan lupa centang kotak disamping tulisan expand template widget

semoga bermanfaat

sumber foto http://diexxx.blogspot.com