Cara Membuat Random Post With Thumbnail

Posted by : Unknown - Posted On : 11/15/2013 with : 12 Comments

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.

Tweet

Related Posts

Cara Membuat Random Post With Thumbnail

4/ 5

Oleh : Unknown