Cara Membuat Random Post dengan Gambar Berjalan ke Bawah

 Pada kesempatan kali ini Saya akan memberikan panduan blog gratis mengenai cara membuat random post / artikel acak / postingan acak  berjalan ke bawah pada blogspot. Random Post adalah kumpulan artikel yang dikategorikan dalam bentuk link aktif yang tertuju pada artikel terkait. Namun random post ini akan menamiplkan bukan hanya judul artikel yang disertai dengan lin aktif saja, tetapi dilengkapi dengan gambar / image / thumbnail dan ringkasan artikel yang bisa diatur jumlah karakternya.

Random Post juga menampilkan artikel acak atau setiap Anda mengunjungi laman yang berbeda maka artikel pada widget random post ini turut berbeda juga dari sebelumnya. Anda juga dapat menampilkan jumlah artikel lebih dari 5 dan dapat disesuaikan dengan kebutuhan. Tujuan lain dengan memasang Random Post ini adalah pengunjung blog akan melihat artikel baru dan artikel lawas / sebelumnya, maksudnya bukan hanya artikel baru yang dapat ditampilkan tetapi artikel yang paling dahulu pun akan tanpil pada Random Post ini.

Penerapan Random Post Blogspot

• Login ke Blogger dengan akun Anda
• Pilih Tata Letak (Layout) → Tambahkan Gadget (Add Widget) → Pilih HTML/Javascript
• Kemudian masukan kode script Random Post di bawah ini kedalamnya

 <marquee align="center" direction="down" height="100" scrollamount= "1" 

onmouseover='this.stop()' onmouseout='this.start()' width="100%">  

<style>
#random-posts img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F5F5F5;padding:

 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=110;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts)

;function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}

document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt

=json-in-script&max-results=0&callback=totalposts\"><\/script>');function 

getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var

 rndValue=get_random();

for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]

==rndValue){found=true;break}};

if(found){i--}else{rdp_current[i]=rndValue}}};function 

get_random(){var ranNum=1+Math.round

(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>  
function random_posts(json){for(var i=0;i<rdp_numposts;i++)

{var entry=json.feed.entry[i]

;var rdp_posttitle=entry.title.$t;if('content'in entry){var

 rdp_get_snippet=entry.content.

$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.

$t}else{var rdp_get_snippet="";}}

;rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_

snippet.length<rdp_snippet_length)

{var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.

substring(0,rdp_snippet_length)

;var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.

substring(0,space)+"…";}

;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_

commentsNum=entry.thr$total.$t+' 

'+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel

=='alternate'){var rdp_posturl=entry.

link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in

 entry){var rdp_thumb=entry.media$thumbnail

.url}else{rdp_thumb="http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI

/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"}}

};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel

="nofollow"><img alt="'+rdp_posttitle+'" 

src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'"

 rel="nofollow" title="'+rdp_snippet+'">'

+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('

<span><div  class="rp-info">'+rdp_postdate.substring

(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)

+' - '+rdp_commentsNum)+'</div></span>'}

;document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div

 style="clear:both"></div></li>')}};getvalue()

;for(var i=0;i<rdp_numposts;i++){document.write('<script type=\

"text/javascript\" src=\"/feeds/posts/default?alt=json-

in-script&start-index='+rdp_current[i]+'&max-results=1&callback=

random_posts\"><\/script>')};
</script>
</ul>

• Tahap akhir Simpan (Save)

      Keterangan

1. heght="100"  luas tab artikel  ke bawah yang muncul pada Random Post.
2. var numofpost=5; jumlah artikel yang muncul pada Random Post.

Demikianlah panduan blogger blogspot mengenai cara membuat random post di blog. Semoga artikel yang berjudul Cara Membuat Random Post dengan Gambar  Berjalan ke Bawah ini berguna dan bermanfaat.

Terima kasih.