Madriva: Recent Post Dengan Thumbnail Bergerak

Recent Post Dengan Thumbnail Bergerak

Posted by : Rhyf Ahmad Wednesday, May 23, 2012

Mumpung masih pagi, ada baiknya juga saya membagikan sebuah ilmu kepada sobat Blogger sekalian, isinya sangat sederhana, masih bermain-main dengan kode-kode. Recent Post dengan thumbnail merupakan sederetan daftar postingan terbaru di dalam blog atau website. Dengan gambar kah?? Ya iya dong, biar lebih terkesan menarik.

Selain itu, ada efek animasi bergerak disetiap thumbnailnya akan membuatnya semakin menarik, simak postingan berikut..

Langsung aja yah sobat Blogger, nih kodenya..

<center><style type="text/css">
#rp_plus_img{
height:260px; /* Tinggi Widget */
width:300px; /* Lebar Widget */
overflow:hidden;
border:solid 0px #fff;
padding:6px 10px 24px 5px;
background-color:transparent;
}
#rp_plus_img ul{
list-style-type:none;
margin:0;
padding:0
}
#rp_plus_img li{
border:1px;
margin:0;
padding:0;
list-style:none
}
#rp_plus_img li{
height:60px;
padding:5px;
list-style:none
}
#rp_plus_img a{
color:#0f0;
}
#rp_plus_img .news-title{
display:block;
font-size:14px;
font-weight:bold !important;
color:#F68629;
text-align:justify
}
#rp_plus_img .news-text{
display:block;
font-size:11px;
font-weight:normal !important;
color:#000000;
text-align:justify
}
#rp_plus_img img{
float:left;
margin-right:14px;
padding:4px;
border:solid 1px 0f0;
width:55px; /* Lebar thumbnail */
height:55px; /* Tinggi thumbnail */
}
</style>
<script src="https://sites.google.com/site/rhyf1411/jquery.js" type="text/javascript">
</script>
<script
src="https://sites.google.com/site/rhyf1411/newsticker-plick.js"
type="text/javascript">
</script>
<script type="text/javascript">
var speed = 3000;
var pause = 3000;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 10;
var numchars = 0;
</script>
<script src="http://rhyfahmad.blogspot.com/feeds/posts/default?orderby=published&
alt=json-in-script&
callback=rpthumbnt">
</script>
</ul>
</center>

Kode yang berwarna merah yang bergaris bawah adalah alamat blog saya, silahkan sobat Blogger merubahnya dengan alamat web atau blognya sendiri.
Berikut adalah kode yang bisa sobat rubah.

var speed = 3000; Ini adalah kecepatan slide dari widget, semakin besar semakin lambat.
var pause = 3000; Kalau ini, lamanya slide berhenti.
var numposts = 10; Banyaknya artikel yang akan dipasang di dalam widget.
var numchars = 0; Banyaknya karakter artikel yang ada di dalam widget.

Tinggi dan lebar gambar sebaiknya tidak usah dirubah, karena saya sudah menyesuaikannya dengan tinggi widget, namun jika sobat blogger ingin merubahnya silahkan saja.

Download Kode Recent Post dengan Thumbnail Bergerak (1 kB)