Pasang Widget Feature Blogger Dengan Thumbnail

Apakah Anda ingin mempunyai bab posting blog Anda ditampilkan dalam Blogger? Anda mungkin akan menyadari bahwa bab ditampilkan dalam blog Wordpress cukup sering. Orang biasanya memakai bab ini untuk ada posting atas mereka melakukan, sehingga mereka mendapat lebih meningkatkan oleh tayangan tersebut ekstra. Seperti banyak orang cenderung membaca posting fitur, widget ini bekerja dengan baik.

Kaprikornus mari kita lihat apa yang akan kita capai. Widget ditempatkan di bab bawah blog uji.


Langkah 1
Masuk Ke Menu Desain >> Edit HTML dan centang kotak Expandate. Dan jangan lupa untuk men-download template Anda untuk tujuan cadangan.

Sekarang cari instruksi berikut dengan (Ctrl + F):

]]></b:skin>


Langkah 2
Setelah anda menemukan instruksi diatas. Copy Paste code dibawah ini dan posisikan code dibawah sempurna diatasnya kode ]]></b:skin>

/*----------- MBT Gallery -----------------*/

#mbtboxes{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#mbtboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 100%; }
#mbtboxes ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#mbtboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }
#mbtboxes img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px; margin-top:0px;}
#mbtboxes img:hover{border: 1px solid #c5c5c5; }
.mbtbody img{float:left}
.mbtbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.mbtbody h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.mbtbody h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.mbtbody h3 a:hover{color:#c5c5c5}
.mbtbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}
.Fadein3 img {
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
.Fadein3:hover img {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}

Langkah 3
Tambah Gadget >> HTML / JavaScript. Copy Paste instruksi berikut di widget HTML / JavaScript :

<div id='mbtboxes'>
<div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '>

<ul>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 1 LINK'>
<img height='100' src='POST 1 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3>
<p>POST 1 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 2 LINK'>
<img height='100' src='POST 2 IMG LINK' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3>
<p>POST 2 PARAGRAPH </p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 3 LINK'>
<img height='100' src='POST 3 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3>
<p>POST 3 PARAGRAPH</p>

</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 4 LINK' rel='nofollow'>
<img height='100' src='POST 4 IMG LINK' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 4 LINK' rel='nofollow'>POST 4 DESCRIPTION</a></h3>
<p>POST 4 PARAGRAPH</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='POST 5 LINK'>

<img height='100' src='POST 5 IMG LINK ' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='POST 5 LINK'>POST 5 DESCRIPTION</a></h3>
<p>POST 5 PARAGRAPH</p>
</div>
</li>
</ul>
</div>
</div>

Langkah 4
Tulisan yang saya cetak T E B A L ( CONTOH : POST 1 LINK, POST 1 IMG LINK, POST 1 LINK'>POST 1 DESCRIPTION, POST 1 PARAGRAPH ) anda ganti sesuai dengan link postingan, link gambar, judul postingan, Descrption.