Cara Membuat Widget 2 Kolom Di Bawah Postingan Blog

Cara membuat widget/gadget 2/dua kolom di bawah postingan blog atau cara membuat 2 kolom di bawah postingan blog, Screen Soltnya terlihat seperti gambar di bawah ini.

Sebenarnya widget ini saya buat karena saya tidak mau menambah widget di footer, karena hanya akan menambah berat loading blog dan menambah banyak CSS, dengan menambahkan widget 2 kolom di bawah postingan blog akan mengurangi berat loading blog itu sendiri

Okay langsung saja Cara membuat widget 2 kolom di bawah postingan :

1. klik Edit Html , dan jangan lupa centang Expand Template Widget

2. kemudian letakan kode dibawah ini , tepat di atas kode ]]></b:skin>

.bawahpost {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}

.bawahkiri {float:left;width:305px;margin-right:5px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}

.bawahkanan {float:right;width:305px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}

3. setelah itu letakan kode di bawah ini tepat di bawah kode <data:post.body/>, Bila sudah menggunakan readmore, Pilih <data:post.body/> yang ke 2.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bawahpost'>
<div class='bawahkiri'>
Kode Widget atau tulisan anda ada di sebelah kiri disini
</div>
<div class='bawahkanan'>
Kode Widget atau tulisan anda ada di sebelah kanan disini
</div>
</div>
</b:if>

Catatan :

Anda dapat merubah css anda sesuka hati, bila ukuranya tidak sesuai anda bisa merubahnya di width:305px, Contohnya di rubah menjadi 200px maka tinggal edit width:200px.

Sekian tutorial dari saya mengenai : Cara membuat widget/gadget 2/dua kolom di bawah postingan blog atau cara membuat 2 kolom di bawah postingan blog.

<a href="http://ngocop16.blogspot.com/2012/05/cara-membuat-widget-2-kolom-di-bawah.html">Cara Membuat Widget 2 Kolom Di Bawah Postingan Blog</a>

Share this article :