Membagi 3 Kolom Post Widget Dengan Thumbnail 1

Beberapa waktu yang lalu saya telah mencoba berexperiment dengan templete blogger yang saya miliki , dimana experiment tersebut adalah membagi kolom postingan widget menjadi tiga kolom dan di sertai thumbnail serta read more . Mungkin Experiment ini dapat di bilang lebih sulit di bandingkan dengan yang sebelumnya yaitu Membagi Blogger Post Widget Menjadi Dua Kolom , Karena kita hanya membagi blogger post widget tersebut menjadi dua tanpa thumbnail dan readmore pada homepage . Secangkir kopi besar , sekarung camilan dan sebungkus rokok ternyata bahan-bahan yang dapat dibilang sangat berperan penting dalam keberhasilan experiment ini , bagaimana tidak berperan penting ! tanpa ketiga bahan tadi mungkin saya tidak akan betah dan kepala akan cepat pusing jika berlama-lama mengotak-atik kode , dan bukan hanya satu templete yang saya buat mungkin 2 sampai tiga dan akhirnya jadilah postingan kali ini dengan judul Membagi 3 Kolom Post Widget Dengan Thumbnail .

Dan adapun cara Membagi 3 Kolom Post Widget Dengan Thumbnail 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 type='text/css'>
.blog-feeds,.feed-link,.date-header {display:none;}
.post-header{text-indent:-9999em;background:transparent;height:0px}
#main-wrapper {position:relative;width: 62%;float:left;padding:5px 1%;word-wrap:break-word;margin:10px 10px;overflow:hidden;background:#fff}
#sidebar-wrapper {position:relative;width:32%;float:right;word-wrap:break-word;margin: 10px 10px 5px 0;overflow:hidden;background: #fff;box-shadow: 0 0 6px #999;}
.readmore{
position: absolute;
top: 100px; left: 137px;font-size: 10px;}
.post {
position: relative;
width:190px;
height:120 px;
float:left; 
margin:0px 2px 10px 6px; 
padding: 5px 0px 5px;
background:url(http://newtemplete-project.googlecode.com/files/template-clean-post-white.png)  no-repeat center;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:0px 0px 0px #d100b2;
-webkit-box-shadow:0px 0px 0px #d100b2;
box-shadow:0px 0px 0px #ccc;
border:0px solid;
box-shadow:0px 0px 0px #ccc;
}
.post-body{padding:0px 0px;background:transparent}
.post-footer{text-indent:-9999em; height:0px;} 
.post-utama{
position: absolute;
left:0px;
width:125px;
padding: 0px 0px;
margin-top:5px;
color: #919090;
line-height: 1.0em;
font-size: 12px;
font-style:italic;
text-align:left;}
.post-utama:hover{
color:#919090;}
.post-home-thumbnail img{
float:right;
padding: 4px;
margin: 20px 0px 0px 0px;
width: 45 px; 
height:45 px;
-moz-transition: 
-moz-transform 0.5s ease 0s;
background: #fff; 
border: 1px solid #f5f5f5}
.post-home-thumbnail img:hover {
background:#ffffff !important;
border: 1px solid #f5f5f5;
-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-ms-transform:rotate(15deg);
}
</style>
</b:if>
</b:if>

Keterangan :

* Kode yang berwarna 190 Hijau Merupakan lebar dari postingan widget.
* Kode yang berwarna 120 Biru Merupakan tinggi dari postingan widget.
* Kode yang berwarna 125 Orange merupakan lebar dar snippet postingan.
* Kode yang berwarna 45 Pink merupakan lebar dari image (thumbnail)
* Kode yang berwarna 45 Purpler ( ungu ) merupakan tinggi dari image (thumbnail).
* Kode-kode tersebut bisa anda sesuaikan sesuai kebutuhan.

6. Cari kode seperti atau mirip kode di bawah ini gunakan Ctrl+f atau F3 untuk mempermudah pencarian.

<div class='post-body entry-content' expr:id='data:post.id'>

<data:post.body/>

7. Setelah anda menemukan kode seperti atau mirip kode diatas ( no.6 ) , Ganti <data:post.body/> dengan kode di bawah ini.

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

<b:if cond='data:post.thumbnailUrl'>

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</div>

<b:else/>

<div class='post-home-thumbnail'>
<div class='Image-home'>
<img border='0' height='95' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBN13SbbXHqkU2mXK7SqT8M3bs0PfCCHYh38pFHcISLXvPAaqBlSshUd1Wk-IUFN_pokP2RWANmA_Ej5A07WvQXkBH35bjoJ6JLTKbyYem_bS5SHGAcQhX2-FPF3Hd6GjPHgEHsf-JNujN/s0/no-image.png' width='95'/>
</div>
</div>
</b:if>

<div id='post-utama'>
<b:if cond='data:post.snippet'>
<data:post.snippet/>
</b:if>
</div>

<div class='readmore'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>Read More</a></b:if>
</div>    
   
<b:else/>

<data:post.body/>

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

8. Simpan Templete anda.

Selesai dan selamat mencoba.....