Cara Memasang Random Post Lengkap Dengan Thumbnail Admin : Unknown

Assalamu'alaikum,wr.wb

Cara Mudah Membuat Random Post dengan Gambar (Thumbnails)
Banyak Pilihan Tampilan.

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

Random Post juga menampilkan artikel acak atau setiap sobat membuka laman yang berbeda maka artikel pada widget random post akan turut berbeda juga dari sebelumnya. Sobat juga bisa 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 pada blog kita, maksudnya bukan hanya artikel baru yang dapat ditampilkan tetapi artikel yang paling dahulu pun akan tanpil pada Random Post ini.

Namun perlu diketahui ada kelebihan pastilah ada kekurangannya, memasang random post mungkin akan mngurangi kecepatan loading blog,bisa diakibatkan oleh pemasangan itu sendiri atau memang pengaruh koneksi internet yang lelet. Pengaruh template juga ada,berdasarkan pengalaman saya,saya pernah nyoba di beda template dan hasilnya yang satu mau keluar dan yang satu tidak mau keluar. mungkin itu yang perlu kita perhatikan,agak riweh sih...

Biasalah seperti memasang yang lainnya atau kebanyakan memasang widget juga pasti berakibat sama ( loading blog lelet ) udah biasa.. okeh berikut ada beberapa pilihan dan tampilan,contohnya random post hanya judul link saja / tanpa gambar. namun kali ini saif buat yang ada tumbnail gambarnya,berikut caranya :

Penerapan / langkah pemasangan Random Post pada Blog

• Login ke Blogger dengan akun Anda
• Pilih Tata Letak (Layout) → Tambah Gadget (Add Widget) → Pilih HTML/Javascript
• Kemudian masukan kode script Random Post di bawah ini kedalamnya,ada beberapa pilihan model,silahkan pilih salah satu modelnya.
• Kalau sudah selesai silahkan disimpan

Gambar Model

Kode Script Model 1 ( lengkap dengan diskripsi posting / Tgl / jumlah komentar )

<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)+"&#133;";};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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUXF6yLYIXinypgaMb2WE0Vv1ld-o8k53WIBYD7htYKr7QVzn7nOZ08x4YEEYnzbOfl8MaNNJwi8-FPqezDxBOEt1jL65gX_4CU5LnitDtcprp4zBDWky6p-tHWkkplDHN6V1ko1xGyI/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><center><a href="http://catatansaif.blogspot.com/2014/05/cara-memasang-random-post-bergambar.html" target="_blank">Get This Widget</a></center>

Catatan :
1. var snippet_length=110; jumlah ringkasan artikel yang muncul pada Random Post.
2. var numofpost=5; jumlah artikel yang muncul pada Random Post
3. Untuk menambahkan fungsi scroll bisa sobat baca disini KLIK SAYA PLIZZ (paling bawah)

Kode Script Model 2 ( dilengkapi dengan tombol share facebook )

<style>
#hovernyo:hover{background:#f1f1f1;}
.judulnyo { color:#222222;text-decoration:none;}
.judulnyo:hover{text-decoration:none;}
.isinyo {height:65px;max-height:40px;margin: 0px;font-size: 80%;border-bottom:1px solid #cccccc;padding-bottom:8px;padding-right:5px;}.gambarnyo {margin:3px 10px 3px 0px!important;float: left !important;width:60px;height:40px;!important;}
.rp-pubdate {font-style: italic;margin-bottom: 0px;}
</style><script type="text/javascript">var randarray = new Array();var l=0;var flag;
var lengthsummary = 70;
var numofpost=10;
function randomposts(json){var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){flag=0;randarray.length=numofpost;
l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){flag=1;}}if(flag==0&&l!=0){randarray[i++]=l;}}
document.write('<div>');for(n in randarray){var p=randarray[n];
var entry=json.feed.entry[p-1];var item ="";
var posttitle = entry.title.$t || "[Untitled]";"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<div id='hovernyo'><div style='padding:3px;'><a class='judulnyo' href='" + entry.link[k].href + "'>" + posttitle + "</a></div>";break;}}
var pubdate = new Date(entry.published.$t).toDateString();item +="";
if('media$thumbnail' in entry)item += "<img class='gambarnyo' src='" + entry.media$thumbnail.url + "' alt='" + posttitle + "' title='" + posttitle + "'>"
var summary = "";if ("content" in entry) {
summary = entry.content.$t;}else if ("summary" in entry) {
summary = entry.summary.$t;}var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='isinyo'>" + summary.substring(0,lengthsummary) + " ...<a href='https://www.facebook.com/sharer/sharer.php?u=" + entry.link[k].href + "' target='_blank'><br/><img style='float:right;' src='https://lh5.googleusercontent.com/-Wi8QfIkuVbI/UlrbVxYANuI/AAAAAAAABuA/vfXDzh7i3no/w50-h18-no/fbshare.jpg' title='" + posttitle + "'/></a></p></div>";document.write(item);}document.write('</div>');}</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script><center><a href="http://catatansaif.blogspot.com/2014/05/cara-memasang-random-post-bergambar.html" target="_blank">Get This Widget</a></center>

Catatan :
1. var snippet_length=70; jumlah ringkasan artikel yang muncul pada Random Post.
2. var numofpost=10; jumlah artikel yang muncul pada Random Post.
3. Untuk menambahkan fungsi scroll bisa sobat baca disini KLIK SAYA PLIZZ (paling bawah)

Kode Script Model 3 ( hanya judul posting dan gambar kecil,dilengkapi fungsi scroll)

<div style="overflow:auto;width:100%;   height:460px;  padding:12px;">
<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:30px;height:30px;padding:3px}</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=20;
var rdp_snippet_length=150;
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)+"&#133;";};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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvFd1evtopR1P1h1JmES4KJ0r8CgpnXF1SMxBy2bTiJan08qx3je1cdH8LHPRtzbaEUIKA5I0Knpa5NowFrsrtSQvLJuYxB-9TMIRyCXbJvu1Do-nPAukuNNVdoqlrNTQD8AVMUSpaFKE/s1600/na_image.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes')
document.write('<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><center><a href="http://catatansaif.blogspot.com/2014/05/cara-memasang-random-post-bergambar.html" target="_blank">Get This Widget</a></center></div>

Catatan :

1. Warna Hijau adalah Panjang widgetnya

2. Warna Biru adalah Tinggi Widget

3. Warna Merah ada banyaknya artikel yang di tampilkan

Tambahan keterangan sedikit, untuk tampilan saat pemasangan akan berbeda2,tergantung dengan template sobat seperti warna link,kepala sidebar akan menyesuaikan dengan template yang sobat pakai,Mungkin cukup catatan saya kali ini, mungkin nanti kalau menemukan tampilan yang lebih oke akan saya sambung di postingan ini.

Posting terkait yang akan datang :

• Membuat random post hanya judul postingan saja.
• Membuat random post hanya tampilan gambar saja.
• Membuat recent post berjalan kebawah / Efek Marquee