Membuat Widget Feature Dengan Thumbnail.

Terasa lama gak jumpa dengan teman-teman blogger semua... hehehhe, maklum sibuk dan lagi sibuk-sibuknya denagn Program Pemberdaayn Masyarakat Mandiri Perdesaan (PNPM-MPd) ya itung-itung buat sosial kemasyarakatan. Oke kita langsung pada artikel kali ini yang akan membahas tetang pembuatan Widget Feature blogger Dengan Thumbnail.

Jika ingin lebih jelasnya silakan lihat Demo atau hasilnya disini

Pada langka ini ada 2 langkah yang harus anda lalu untuk mengoptimalkan tampilan feature yang akan dibuat.

Langkah Pertama adalah:

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode berikut sebelum kode ]]></b:skin>

#kodkotak{height:210px;overflow:hidden;margin:0px;position:relative;width:948px;background:; border:0px solid #333; padding:5px 5px;}
#kodkotak ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 100%; }
#kodkotak ul li{ overflow: hidden; float: left; width: 180px; height: 180px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }
#kodkotak ul li:hover{ border-bottom:1px solid #c5c5c5; }
#kodkotak img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px; margin-top:0px;}
#kodkotak img:hover{border: 1px solid #c5c5c5; }
.kodboxes img{float:left}
.kodboxes{position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}
.kodboxes h3{padding:5px 0;font-size:12px;font-weight:bold; font-family: verdana, sans-serif, arial; margin:0;}
.kodboxes h3 a:link,.mbtbody h3 a:visited{color:#2F97FF;}
.kodboxes h3 a:hover{color:#c5c5c5}
.kodboxes 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;
}

• Lalu Simpan Template.

Langkah yang Kedua sebagai berikut:

• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu Simpan, selesai.

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

<ul>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>
<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST'>post 1 description</a></h3>
<p>Description Post</p>
</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>
<img height='100' src='URL IMG' width='170'/>

</a>
<div class='clear'></div>
<h3><a href='post 2 link'>Judul Post</a></h3>
<p>Description Post</p>
</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>
<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST'>Judul Post</a></h3>
<p>Description Post</p>

</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST' rel='nofollow'>
<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST' rel='nofollow'>Judul Post</a></h3>
<p>Description Post</p>
</div>
</li>
<li>
<div class='kodboxes'>
<a class='fadein3' href='URL POST'>

<img height='100' src='URL IMG' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='URL POST'>Judul Post</a></h3>
<p>Description Post</p>
</div>
</li>
</ul>
</div>
</div>

Catatan: Silakan ganti pada tanda-tanda yang diatas sesuai dengan keinginan anda
Semoga bermanfaat bagi anda semua. Amin