Widget Recent Post Terbaru Tahun 2013 Dengan Thumbnail

Sebelumnya Saya sudah posting tentang widget recent comment simpel, dan sekarang Saya mau posting lagi tentang widget blogger yaitu widget recent post terbaru dengan thumbnail. Thumbnail itu sendiri dapat dipahami dengan sebuah gambar yang berukuran lebih kecil dari yang aslinya. Contohnya saja dalam widget, dalam posting anda ada gambar berukuran besar. Dengan widget ini , gambar ersebut akan ditampilkan lebih kecil dari ukuran sebelumnya. Untuk lebih jelasnya Anda bisa lihat pada gambar di atas.
Bentuk thumbnail ini biasanya banyak digunakan oleh para webmaste/blogger yang mempunyai sebuah web dengan tampilan gambar yang banyak dan untuk sebuah web toko online, agar gambar yang di posting dapat terlihat dengan berbagai variasi.

Jika Anda tertaring ingin mencoba widget ini, silahkan simak ulasan di awah ini:
1. Login ke Blogger
2. Pada laman dasbor, pilih Tata Letak => Tambahkan Gadget
3. Tambahkan Gadget dari HTML/JavaScript
4. Lalu copy kode di bawah ini kedalam kotak gadget tadi

<style type="text/css">
#post-gallery {
  width:280px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#ffffff;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://fbstatic-a.akamaihd.net/rsrc.php/v2/yb/r/GsNJNwuI-UM.gif') no-repeat 50% 50%;
  width:52px;
  height:52px;
}
#post-gallery .rp-item img {
  width:52px;
  height:52px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .rp-item .rp-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #FA7C19;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle     = "Se-cara Blog",       // Widget Title
    numposts    = 20,      // The number of thumbnail / posts to display
    numchar     = 200,      // Number of characters in the description tooltip
    rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
    pBlank      = "http://4.bp.blogspot.com/-egx5hydZZuI/UVrLlsxhX8I/AAAAAAAAAdI/SSH7CWqiwls/s175/SOME.png",      // Image that show up if the post doesn't have a image
    blogURL     = "http://se-cara.blogspot.com/";       // Your Blog Address
</script>
<script src="http://yourjavascript.com/01201910631/se-carablog.js" type="text/javascript"></script>
<span id=rcw-cr><a href='http://goo.gl/8BkeX' onmouseover='window.location=this.href'>Dapatkan Widgetnya di Sini</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 2px!important; padding-bottom: 2px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:2px;padding-top:2px;display:block;} </style>

Ket: Ganti kode yang berwarna biru di atas dengan alamat blog Anda. Untuk warna, ukurannya dan lainnya silahkan edit sendiri!

5. Langkah terakhir, klik simpan pada gedget javascript tadi dan lihat hasilnya.

Cukup sekian untuk tutorial kali ini, sekarang Anda dapat mengkreasikan artikel Anda dengan widget ini. Selamat mencoba... :)