Membuat Postslider Dengan Gambar (Thumbnails)

Sebetulnya postingan ini merupakan request trik dari sobat bloger. Namun ane baru bisa sharing sekarang setelah sebulan ane tedampar di kampung yang bisa dibilang pedalamanlah, dengan jaringan telephone yang lemah ane terpaksa ga bisa berinteraksi dengan internet. Setelah waktu berlalu, hari ini ane sempatkan untuk mempostkan triknya. (Ma'af ni sob sebelunya.....)

Nah sekarang ane coba untuk mempostingin triknya. Sesuai dengan gambar yang ada di samping atau kalau sobat mau lihat demonya, sobat bisa klik home pada blog ini. Tentunya postslider ini juga salah satu trik agar blog menjadi tampil menarik dan userfriendly. Gimana, jika sobat-sobat yang lain mau, silahkan ikutin step-stepnya.
Dalam hal pemasangan gadged ini sobat bisa etakn dengan dua cara, yang pertama dengan menambah gadged dan yang kedua diletakan sesuai dengan keinginan sobat melalui edit html.
Ini scriptnya css :

<style type='text/css'>
#rp_plus_img{height:212px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:blue; text-decoration: none; font-size:13px; font-weight:bold;} /*link*/
#rp_plus_img a:hover{color:#f61c3b; text-decoration: none; font-size:13px; font-weight:bold;} /*ketika mouse didekatkan */
#rp_plus_img .news-title{color:blue; display:block;font-weight:bold !important;margin-bottom:4px;font-size:12px;} /*judul postingan*/
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:black;text-align:justify;} /*isi postingan*/
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;} /*image */
.slidespost {
padding:0px;
border:0px;
margin:0px;
height:260px;
width:400px;
float:left;
}
</style>

Ini script htmlnya :


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript' />
<script type='text/javascript' language='javascript' src='http://syamsjs.googlecode.com/files/syams_slide_post_script.js' />
<div class='slidespost'>
<script type='text/javascript'>
var speed = 500; /*kecepatan slide/gerak */
var pause = 2500; /*lama waktu berhenti slide */
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id='rp_plus_img'>
<script style='text/javascript'>
var numposts = 15; /*jumlah post yang ingin di tampilkan */
var numchars = 200; /*jumlah karakter post yang ingin di tampilkan */
</script>
<script src='http://syamsmobillex.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt'></script> <!-- ganti  syamsmobillex.blogspot.com  dengan url/link blog spobat -->
</ul>
</div>

Cara pemasanganya :

Login ke akun blog sobat,
Pilih Rancangan --> Edit Html,
Cari kode </head>,
Masukan script css di atas kode no.3,
Nah tinggal pemasangan script html, seperti saya katakan di atas ada dua pemasangan script ini. Pada tambah gadged dan pada Edit Html,
Jika sobat akan memasang pada Add Gadged sobat pindah pada Edit Laman,
Setelah itu klik Add Gadged dan pilih Html/Javascript lalu pastekan script html dan simpan.
Jika sobat ingin meletakanya di Edit Html silahkan sobat sesuaikan di mana letaknya asalkan di dalam tag <body> dan pastekan script html dan simpan.

Gimana, Semoga bermanfa'at bagi sobat......

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.