November 15, 2013

Cara Membuat Random Post With Thumbnail

widget-random-post
Melanjutkan postingan Widget Random Post Pada Blogspot dan Widget Random Post Valid HTML5, keduanya memang tidak dengan gambar atau thumbnail, kali ini Laurencius share Random Post With Thumbnail.

Ini kami buat untuk memenuhi request beberapa rekan blogger widget random post dengan gambar atau thumbnail. Ok mari kita mulai mengerjakannya.

Cara Membuat Random Post With Thumbnail :

1. Login ke blogger.
2. Klik layout.
3. Klik Add a Gadget.
4. Pilih HTML/JavaScript Add.
5. Klik HTML/JavaScript Add.
6. Copy Paste script dibawah ini

<div style="margin-bottom: 15px;">
<style type="text/css" scoped>
#rp_plus_img{height:415px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#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:80px;padding:1px;list-style:none;}
#rp_plus_img a{color:#555555;}
#rp_plus_img a:hover { color:#4488DD;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#666666;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:70px;height:68px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js" type="text/javascript"></script>
<script type="text/javascript">
var speed = 400;
var pause = 7000;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<br />
<ul id="rp_plus_img">
<script>
var numposts = 20;
var numchars = 65;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul>
</div>
7. Klik tombol Save.
8. Pindahkan elemen yang baru dibuat tadi sesuai kemauan.
9. Selesai

Keterangan : 
1. Atur "var speed = 400" dan "var pause = 7000" sesuai keinginan.
2. "var numposts = 20" jumlah post yang akan di tampilkan secara random, dan "var numchars = 65" banyaknya karakter (huruf) 

Sudah di test dan diatas adalah screenshot dari script Random Post With Thumbnail ini. Selamat mencoba.

Related Posts

Cara Membuat Random Post With Thumbnail
4/ 5
Oleh :

12 comments

lumayan nih sob buat tambahan ilmu

Siapa tahu ada yang butuh Sob

iya sob aa lagi buat saya yang masih newbie

izin follow sama minta follbacknya sob

Trims sharenya kang

Sama-sama Cak Oni

penting juga nich widget random post untuk dipasang di blog, biar bisa menambah referensi bacaan yang lebih banyak kepada para pengunjung blog ya mas :)

Benar sekali Mbak Eka, Paling tidak artikel lama bisa terlihat lagi dan dibaca oleh para visitor Blog.

Anonymous delete 06:33

ty mas tutornya. buat nambah referensi random post gw. terus berkarya mas. cayo

penting banget ini gan, tapi kalo mau buat yang random postnya warna-warni itu gimana ya? saya sempet lihat ada yang pake kayak gitu soalnya...

Modifikasi dengan penambahan warna pada cssnya teman