Recents in Beach

banner image
banner image

Cara Membuat Widget Recent Post Dengan Gambar

Kode Widget Posting Terbaru dengan Gambar nan Unik
JIKA Anda ingin memasang widget Latest Post, Recent Post, Posting Terbaru, Foto Terbaru (untuk blog foto) atau Produk Terbaru (untuk blog toko online), dengan penampilan atau desain seperti yang dipasang di halaman depan (Home Page) ini dia kodenya. Tinggal pasang aja di blog Anda:

<style type="text/css">
#post-gallery {
  width:570px;
  margin:0px auto;
  font:normal 12px Arial,Sans-Serif;
  color:#294969;
  padding:1px;
  background-color:#777;
}
#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:#3a5795;
  text-align: center;
}
#post-gallery .bgt-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff;
  width:77px;
  height:70px;
}
#post-gallery .bgt-item img {
  width:77px;
  height:70px;
  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 #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 .bgt-item .bgt-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FA7C19;
}
#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    = 14,  
    numchar     = 190,  
    rcFadeSpeed = 610,
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinepMY8FNxNNPJku06wMH_x7aY2nAeD9SQ2hZbHD9ueUCuEvLhKx_lcBsAjuX8pYVeHRZLfV4EBny7LIcdYTq5llCgjR0Z0v0MTNF1rq8JETJXK05DIWfgTC5TWWFuNvn5r76wOXPvFjE/s1600/no-image-ava.jpg",
    blogURL     = "http://yuda-alfatir.blogspot.com";
</script>
<script src="https://googledrive.com/host/0B43vwjPtKakCSWx2MEtSRFEzQUk" type="text/javascript"></script>

Cara Memasang Kode Widget Posting Terbaru dengan Gambar di atas:
1. Layout > Add a Gadget > HTML/Javascript
2. Tinggal COPAS aja kode di atas!
3. Ganti alamat blognya.
4. Save!

BERESSSSS....!!!!
Cara Membuat Widget Recent Post Dengan Gambar Cara Membuat Widget Recent Post Dengan Gambar Reviewed by yuda djava on 00:52 Rating: 5
Powered by Blogger.