Membuat Recent Posts Widget Thumbnails ~ Lubang Pengetahuan

Hari ini saya akan share tentang Widget, yang pasti akan membuat tampilan blog sobat lebih bagus kalo memasang widget ini. Coba sobat lihat SS yang ada di atas bagus bukan kalo sobat ingin memasang nya di blog sobat mari lihat Demo nya dulu

Step Memasang Widget

Login ke dasbor Blog sobat
Masuk ke tata letak dan tambah gadget
Tambah HTML/JavaScript
Dan masukan code di bawah ini

<style type="text/css">
#post-gallery {
  width:300px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#494848;
  padding:8px;
  background-color:#ff0000;
  -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 .bgt-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMh_Y4i_Z7Fb9ty5hzEJMKDiK2gJad8w85MMUyNPShtLv8Pd5Q20hoAtLWOK76VizQjsEVNEtW6s9y9Mohyphenhyphen9f_EtI3jRPTyZQOzknYru7Cku54JQ2SN2sx8Uy_h82n3OEXwcgJicUYH1o/s1600/395.GIF') no-repeat 50% 50%;
  width:71px;
  height:71px;
}
#post-gallery .bgt-item img {
  width:71px;
  height:71px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .bgt-item .bgt-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:5px solid #5a00ff;
  -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 .bgt-item .bgt-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#5a09ef;
}
#post-gallery .bgt-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 bgtTitle     = "Latest Posts",
    numposts    = 16,     
    numchar     = 190,     
    rcFadeSpeed = 610,   
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Mb1mBvszJdVDWcqRmKsEkUMfimNDIddWNQq9TrCi6GXM7tbQLWOe4Mv8phBN9x6BpATD4gvVPDiqbgwg0Zb5UkS-t2yj0hzrpaka1ArHk0ifzJx_lJI_y7_wn76S_aBf_b2vM0p30AM/s1600/no-image-ava.jpg", 
    blogURL     = "http://lubangpengetahuan.blogspot.com/";
</script>
<script src="https://googledrive.com/host/0B43vwjPtKakCSWx2MEtSRFEzQUk" type="text/javascript"></script>

   NB: Ganti WARNA MERAH dengan URL blog sobat
   16 Jumlah postingan yang akan ditampilkan
   Latest Post adalah judul widget
           Dan save Silahkan Berkerasi Sesuka sobat