Membuat Recent Posts Widget Thumbnails

Membuat Recent Posts Widget Thumbnails

04:41

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('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
Subscribe to: Post Comments (Atom)