Membuat Recent Posts Widget Thumbnails


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
  1. Login  ke dasbor Blog sobat
  2. Masuk ke tata letak dan tambah gadget
  3. Tambah HTML/JavaScript
  4. Dan masukan code di bawah ini
  5.  
<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('http://4.bp.blogspot.com/-eCiZkDJWUlY/UuSV0XpuesI/AAAAAAAADv8/11yalH-3T7Q/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      = "http://1.bp.blogspot.com/-WGU5Q8PKZL4/UuStTipXfkI/AAAAAAAADwM/8QeimiTON0A/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
Previous
Next Post »

21 komentar

Click here for komentar
Jaya Fida
admin
October 18, 2014 at 7:55 AM

Ilmu baru neh, layoutnya jadi bertambah keren gan :)

Reply
avatar
si andri
admin
October 18, 2014 at 8:14 AM

dah lama gak singgah
udah ada update baru
makasih atas sharing nya

Reply
avatar
October 18, 2014 at 9:50 AM

mantap gan , fast loading dan enak dipandang :D

Reply
avatar
October 18, 2014 at 9:58 PM

Nice artikel gna.. kelemahannya apa gan?? :)

Reply
avatar
Raja Online
admin
October 18, 2014 at 10:33 PM

Keren banget ya gan recent postsnya, jadi lebih rame gitu deh pokoknya

Reply
avatar
October 18, 2014 at 11:20 PM

wah makasih banyak atas kunjungan nya

Reply
avatar
Rismawan N
admin
October 18, 2014 at 11:24 PM

membuat recent post sangat bagus nih buat salah satu meningkatkan visitor, dan tentunya buat nurunin bounce rate..

#rismawan.com

Reply
avatar
October 20, 2014 at 1:57 AM

Mantap Gan Jadi Indah Di lihat .. Nice Post ..

Reply
avatar
October 20, 2014 at 2:08 AM

Wah Blog nya keren gan pas buat niche nya :D

Reply
avatar
October 20, 2014 at 2:21 AM

eheheh ijin coba bro cara membuat nya :D gampang nih kayaknya

Reply
avatar
October 20, 2014 at 3:13 AM

wah keren recent post .. ijin nyoba mas

Reply
avatar
October 20, 2014 at 4:07 AM

Wah seneng banget ni yang make blogger :D

Reply
avatar
Ainnul Yaqin
admin
October 22, 2014 at 9:33 PM

wahhh kereennn nih gan Tutorial Membuat recent Posts nya saya izin Praktekan yah

Reply
avatar
October 25, 2014 at 8:57 PM

Keren gan, tapi itu cuma gambarnya yaa? nggak ada judulnya? keren, tapi loading blog apakah lebih berat?

Reply
avatar
Aan Anshori
admin
November 22, 2014 at 6:57 AM

ijin coba gan yah.. :)

Reply
avatar
Delmi Lingga
admin
December 29, 2014 at 9:31 AM

THANKS YA

MAMPIR JUGA YA

Reply
avatar
Thanks for your comment