Recent post dengan thumbnail

Juli 28, 2013


Recent post dengan thumbnail versi pertama

<style type="text/css" scoped="scoped">
#mini-gallery {
width:330px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
margin:0 auto;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#666;
padding:8px;
background-color:#fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
box-shadow:0 1px 3px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

#mini-gallery h2 {
font:normal normal 14px Arial,"Arial Narrow",Arial,Sans-Serif;
color:#fff;
text-shadow:0 1px 0 black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#990099;
}

#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0 0;
background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}

#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0 0 !important;
padding:0 0 !important;
background:transparent !important;
display:none;
}

#mini-gallery .rp-item .rp-child {
position:absolute;
top:95%;
left:90%;
z-index:1000;
width:170px;
background-color:white;
border-top:4px solid #009999;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
box-shadow:0 0 3px rgba(0,0,0,0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
}

#mini-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0 0 5px;
color:#660099;
}

#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script type="text/javascript">
var rpTitle = "Artikel Terbaru", // Tentukan judul widget
numposts = 12, // Tentukan jumlah thumbnail/posting
numchar = 100, // Tentukan jumlah karakter pada deskripsi tooltip
rcFadeSpeed = 600, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
blogURL = "http://oyinayashi.blogspot.com"; // Alamat blogmu
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/rp-mini-gallery.js" type="text/javascript"></script>

Versi kedua :

<style type="text/css" scoped="scoped">
#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0 0;
background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}

#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0 0 !important;
padding:0 0 !important;
background:transparent !important;
display:none;
}

#mini-gallery .rp-item .rp-child {
position:absolute;
top:95%;
left:90%;
z-index:1000;
width:170px;
background-color:white;
border-top:4px solid #009999;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
box-shadow:0 0 3px rgba(0,0,0,0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
}

#mini-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0 0 5px;
color:#660099;
}

#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script type="text/javascript">
var rpTitle = "Artikel terbaru", // Tentukan judul widget
numposts = 12, // Tentukan jumlah thumbnail/posting
numchar = 100, // Tentukan jumlah karakter pada deskripsi tooltip
rcFadeSpeed = 600, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
blogURL = "http://oyinayashi.blogspot.com"; // Alamat blogmu
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/rp-mini-gallery.js" type="text/javascript"></script>

Semua koding ini sudah di test dan berjalan...

You Might Also Like

0 Comments

» Komentar anda sangat berguna untuk peningkatan mutu posting
» Terima kasih bagi yang sudah menulis komentar.

SUBSCRIBE NEWSLETTER

Get an email of every new post! We'll never share your address.

Flickr Images