Membuat Latest Post dengan Gambar Thumbnail

Membuat Latest Post, Recents Post, Posting Terkini, atau Tulisan Terbaru dengan Gambar (Image) Thumbnail. Demonya seperti di bawah ini.

INI KODENYA:

<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/AVvXsEiCRBsPw59bu7LnF-W5vqUEy2c00op11shhIP46qeBe5afvc_5b4CBg4PkRHsjY83hnAcPjIO_pTlcLyFXEEcmQ66qlmviVgEUQ3zjpxEJt5U25yRJZyAIlgDdpivMR6xhlidaptXLLDRY/s1600/no-image-ava.jpg",
    blogURL     = "http://cbbloggerlab.blogspot.com";
</script>
<script src="https://googledrive.com/host/0B43vwjPtKakCSWx2MEtSRFEzQUk" type="text/javascript"></script>
<br/>

CARA PASANG:
1. Layout > Add a Gadget > HTML/Javascript
2. Copas kode di atas ke kolom "Content"
3. Save!

Tweet

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Subscribe to receive free email updates: