Membagi Blogger Post Widget Menjadi Dua Kolom 3

Sebelumnya kita pernah membahas tentang Cara Membagi Artikel Blog Menjadi Dua Kolom dimana artikel blog tersebut akan di tampilkan dengan dua kolom setelah kita menambahkan kode pada isi artikel tersebut.Masih tentang postingan blogger kali ini kita akan membahas tentang Membagi Blogger Post Widget Menjadi Dua Kolom . Blogger Post Widget umumnya akan ditampikan pada blog dengan satu kolom,templete bentuk ini biasanya akan kita dapati pada templete magazine dimana Blogger Post widget tersebut terbagi menjadi dua kolom atau lebih pada home page.Teknik ini memiliki beberapa kekurangan dan kelebihan dimana kekurangan dari teknik ini adalah tidak ratanya deskripsi postingan pada tiap-tiap postingan di home page,dapat menyebabkan labatnya loading blog pada home page jika tuhmbnail postingan blog terlalu besar.
Sedangkan kelebihanya adalah dapat menarik para pengunjung karna adanya pariasi pada postingan blog di home page,dapat menampilkan postingan blog lebih banyak pada home page,memudahkan pencarian postingan yang tampil di home page.

Adapun Cara Membagi Blogger Post Widget Menjadi Dua Kolom adalah:

1. Buka Blogger Dasbor >>Pilih Opsi lainya >> Pilih/klik templete .

2. Back Up dulu Templete anda.

3. Selanjutnya Klik Edit HTMl >> centang kotak kecil Expand Template Widget.

4. Cari Kode ]]></b:skin> gunakan Ctrl + F untuk memudahkan Pencarian.

5. Copy Kode di bawah ini dan pastekan dibawah Kode ]]></b:skin> tadi.

<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<b:if cond="data:blog.pageType != &quot;item&quot;">
<style>

.post {

width:265px;
height:400px;
margin-right:5px;
overflow:hidden;
float:right; background:#F2F2F2
border:3px double #808080;
}
/* Clear CSS Float */
#blog-pager,
h2.date-header {
clear:both !important;
}

</style>
</b:if>
</b:if>

Keterangan :

I. Kode CSS di atas merupakan contoh & bila tidak ada pada template Anda,kemungkinan terdapat pada .post-outer atau selector lain.

II. Post-outer harus diperlakukan tanpa border, untuk menjaga struktur pengkodean yang telah kita tentukan di atas. Sebaiknya penambahan border & pernak-pernik lain ditambahkan pada .post.

6. Cari kode css .post { harus kode ini jangan yang lain seperti contoh dibawah ini :

.post {
margin:.2em 0 5px 0.2em;
background:#ffffff url('http://cilimoes-file.googlecode.com/files/kuda-post.jpg') no-repeat top left;
padding:10px;
text-align: justify;
border:1px solid #C0C0C0;
}

7. Perhatikan kode margin postingan anda seperti margin:.2em 0 5px 0.2em; pasti setiap posting template blog berbeda-beda seperti posting anda dan orang lain, jangan hiraukan hal itu, coba anda lihat kode auto letakan kode ini diantara margin anda seperti di bawah ini.

.post {
margin:.2em auto 5px 0.2em;
background:#ffffff url('http://cilimoes-file.googlecode.com/files/kuda-post.jpg') no-repeat top left;
padding:10px;
text-align: justify;
border:1px solid #C0C0C0;
}

8. Coba klik preview , kalo berhasil save template anda.


Selamat mencoba...