Widget Recent Posts Unik ini cocok banget untuk blog foto dan toko online yang biasa menampilkan gambar produk di halaman depan atau di sidebar.
CARA MEMBUATNYA:
1. "Layout" > "Add a Gadget" > pilih "HTML/JavaScript"
2. Copy & Paste kode di bawah ini:
<style type="text/css">
#post-gallery {
width:300px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#494848;
padding:8px;
background-color:#17B986;
-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/AVvXsEiiJc_c7wiHTX3cB-RiarOeDdDAr6GQUnNhNwMCt4VLhMHsN9brGrY6uF8bd5L0oTngWYf1OT0HvZlxI4ACIgqE9Xlgj3kpN8TMBwMaGxpG72Uj3gHJ8cvpYmSVut9vz1oSf9xz087Jmag/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 #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 = 16,
numchar = 190,
rcFadeSpeed = 610,
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCRBsPw59bu7LnF-W5vqUEy2c00op11shhIP46qeBe5afvc_5b4CBg4PkRHsjY83hnAcPjIO_pTlcLyFXEEcmQ66qlmviVgEUQ3zjpxEJt5U25yRJZyAIlgDdpivMR6xhlidaptXLLDRY/s1600/no-image-ava.jpg",
blogURL = "http://contohblognih.blogspot.com";
</script>
<script src="https://googledrive.com/host/0B43vwjPtKakCSWx2MEtSRFEzQUk" type="text/javascript"></script>
#post-gallery {
width:300px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#494848;
padding:8px;
background-color:#17B986;
-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/AVvXsEiiJc_c7wiHTX3cB-RiarOeDdDAr6GQUnNhNwMCt4VLhMHsN9brGrY6uF8bd5L0oTngWYf1OT0HvZlxI4ACIgqE9Xlgj3kpN8TMBwMaGxpG72Uj3gHJ8cvpYmSVut9vz1oSf9xz087Jmag/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 #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 = 16,
numchar = 190,
rcFadeSpeed = 610,
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCRBsPw59bu7LnF-W5vqUEy2c00op11shhIP46qeBe5afvc_5b4CBg4PkRHsjY83hnAcPjIO_pTlcLyFXEEcmQ66qlmviVgEUQ3zjpxEJt5U25yRJZyAIlgDdpivMR6xhlidaptXLLDRY/s1600/no-image-ava.jpg",
blogURL = "http://contohblognih.blogspot.com";
</script>
<script src="https://googledrive.com/host/0B43vwjPtKakCSWx2MEtSRFEzQUk" type="text/javascript"></script>
Catatan:
3. Save!
Widget Recent Posts Unik untuk Blog di atas akan menjadi salah satu "pembeda" tampilan blog kita dengan yang lain, kecuali yang lain juga memasang widget yang sama. Good Luck!
Sumber
- Replace http://contohblognih.blogspot.com dengan alamat Url blog Anda.
- Replace 16 dengan jumlah posts yang akan ditampilkan
- Replace "Latest Posts" to change widget title!
3. Save!
Widget Recent Posts Unik untuk Blog di atas akan menjadi salah satu "pembeda" tampilan blog kita dengan yang lain, kecuali yang lain juga memasang widget yang sama. Good Luck!
Sumber
