Home » » Membuat Latest Post dengan Gambar Thumbnail

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/AVvXsEgKrn-n4mC8YlnUtqCVeNGT2nlQbghRAKopNqOenoHqj5Wq3e4m_ZsJ5-QFo7VBBlFdTLcUxXnDPLVpLgafIpSaYVP3YjjPSKeRpcpE_Czob0qyJONNMBrvhGpOf00IVDDrLZytt1ABSUI/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!

Membuat Latest Post dengan Gambar Thumbnail


Powered by Blogger.