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/>
#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!