Membuat Widget Postingan Acak Random Post di Blogger dengan Gambar

Karena blog anda seperti buku harian pribadi atau karena struktur otomatis yang dibuat blogger, sering kali artikel dari postingan yang telah lama selalu diabaikan dan hampir tidak mendapatkan pengunjung langsung dari situs web anda. Google Blogger selalu menampilkan artikel dengan postingan terbaru. Jarang sekali kita lihat, sebuah Blogger menampilkan artikel yang telah usang seperti artikel yang telah berumur 5 atau 7 tahun lalu. Namun, meskipun artikel tersebut tergolong usang, jika isinya masih relevan dan layak dibaca, anda harus menampilkan artikel itu di Blogger.

Biasanya ketika kita akan membuka sebuah Blogger, secara otomatis bila anda tak mengatur script blogger, yang ditampilkan artikel yang masih segar atau terbaru. Tapi anda tak usah mengeluh, artikel anda masih bisa tampil dan dibaca oleh banyak orang.

Ada banyak cara untuk menampilkan artikel lama anda di Blogger, cara yang paling umum dan sering dilakukan oleh para blogger mania, artikel tersebut ditempatkan di bagian sisi dari Blogger (sidebar). Dengan fitur "Random Post", semua artikel yang lama dan baru dapat ditampilkan secara acak di sisi sidebar tersebut. Jadi dengan adanya fitur Widget random post ini, anda tak perlu khawatir artikel anda yang di taon jebot tak dibaca oleh orang lain.

Pada postingan ini, kami akan mengulas secara detail tentang proses pembuatan fitur widget random post. tujuan dari penulisan ini, agar seluruh artikel baik yang lama dan yang baru dapat ditampilkan secara otomatis oleh Blogger (random).

Pengguna baru yang bergabung dengan situs web Anda, mengambil manfaat penuh darinya tetapi tidak pernah repot-repot mengunjungi artikel lama Anda yang bagus. Namun, cara sederhana untuk menarik kembali perhatian ke postingan lama anda adalah dengan menampilkannya di suatu tempat di bilah sisi blogger anda (sidebar).

A. Apa itu Widget Postingan Acak/Random Post?

Menampilkan posting acak dari blog Anda sangat bagus untuk lebih melibatkan pengguna. anda melihat seluruh label postingan blogger anda. Widget Random Post adalah salah satu fitur tambahan yang ada di Blogger untuk menampilkan seluruh artikel (baik yang lama ataupun yang baru) secara acak. Dengan bantuan javascript dan Feed RSS widget Random post mampu melakukan pekerjaannya dengan sempurna.

Bahkan tak hanya itu saja, dengan bantuan script CSS, postingan artikel anda dapat ditampilkan secara menarik berkat adanya gambar Thumbnail yang muncul. Untuk menampilkan postingan acak dengan thumbnail dimungkinkan di blogger. Untungnya, ini bukan pekerjaan yang sulit, Anda cukup menambahkan widget untuk menampilkan posting acak dengan thumbnail di Blogger hanya dengan menambahkan sedikit script java.

Widget atau gadget posting acak dapat membantu anda untuk menampilkan beberapa posting acak di blog blogger dan sangat berguna untuk menampilkan beberapa posting acak untuk meningkatkan tampilan halaman.

B. Mengapa kita perlu menambahkan widget posting Acak ke Blogger?

Di sini Blogger memiliki fitur gadget posting yang populer tetapi jika Anda ingin menampilkan beberapa posting acak artikel lama untuk pengunjung blogger anda, maka blogger tidak memiliki gadget atau widget seperti itu, secara default di blogger kami tidak memiliki pilihan gadget Random Posts.

Menggunakan widget posting acak dapat membantu dalam desain blog dan memberikan lebih banyak pilihan postingan artikel kepada pengunjung dan mereka dapat dengan mudah memilih acak salah satu postingan yang mereka sukai dan anda bisa mendapatkan tampilan halaman tambahan, jadi mari kita mulai proses untuk menambahkan posting acak ke blog blogger, sekarang mari kita mulai.

C. Cara Menambahkan widget Random Post ke Blogger

Seperti telah kami jelaskan dibagian atas, widget Random post ini sangat bagus ditempatkan dibagian "Sidebar" dari blogger anda. Untuk memudahkan anda, pada artikel ini kami menggunakan tempalte blogger dari mang "VTrick - Premium Creative Blogger Template". Kami sarankan untuk mempraktekkan isi artikel ini anda buat blogger baru, dan samakan templatenya dengan template yang kami gunakan.

Untuk memulai pembuatan widget Random post, ikuti langkah-langkah di bawah ini.

1. Buka Dashboard Blogger

Untuk menyisipkan script java dan Feed RSS kedalam sidebar, langkah pertama anda harus masuk ke akun blogger anda. Pada bagian dashboard blogger anda klick menu "Layout" dan klick lagi menu "Add a Gadget" dan pilih Gadget HTML/JavaScript, seperti gambar di bawah ini.

Membuat Widget Postingan Acak Random Post di Blogger dengan Gambar

Menambahkan gadeget untuk
mengetikkan script java Random Post

2. Membuat Script Java

Setelah menu "Add a Gadget" terbuka anda masukkan script di bawah ini.

Script Widget "Random Post"

<style>
#bo-random-posts img{background:#fff;height:50px;float:left;width:50px;margin:5px 5px 0px 0px;-webkit-border-radius:50%;border-radius:50%;-moz-border-radius:50%;padding:3px;}
#bo-random-posts img:hover{opacity: 0.5;filter: alpha(opacity=50);}
ul#bo-random-posts {list-style-type: none;background-image: url("");background-repeat: no-repeat;}
#bo-random-posts li {margin: 10px 0;}
#bo-random-posts li a{padding: 5px 0;text-decoration: none;}
.bo-random-summary {display: block;}</style>
<ul id='bo-random-posts'><script>
var borp_number = 5;
var borp_details = 'yes';
var borp_chars = 60;
var borp_details2 = 'no';
var borp_comments = 'Comments';
var borp_commentsd = 'Comments Disabled';
var borp_current = [];
var total_randomposts = 0;
var borp_current = new Array(borp_number);
function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue(){for(var r=0;r<borp_number;r++){for(var n=!1,o=get_random(),t=0;t<borp_current.length;t++)if(borp_current[t]==o){n=!0;break}n?r--:borp_current[r]=o}}function get_random(){return 1+Math.round(Math.random()*(total_randomposts-1))}
</script><script>function random_posts(t){for(var e=0;e<borp_number;e++){var r=t.feed.entry[e],s=r.title.$t;if("content"in r)i=r.content.$t;else if("summary"in r)i=r.summary.$t;else var i="";if((i=i.replace(/<[^>]*>/g,"")).length<borp_chars)var a=i;else{var n=(i=i.substring(0,borp_chars)).lastIndexOf(" ");a=i.substring(0,n)+"&#133;"}for(var o=0;o<r.link.length;o++){if("thr$total"in r)var l=r.thr$total.$t+" "+borp_comments;else l=borp_commentsd;if("alternate"==r.link[o].rel){var m=r.link[o].href,c=r.published.$t;if("media$thumbnail"in r)var u=r.media$thumbnail.url;else u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCI6j9XXQu3iobCQZ4BWt3fgY589uwbNhEOOuNNMaeZ5PTlHsS5OpnNzNPQ4S9yaQixykSM8X5PHK0-8GwfWhM9NxmrfzMPSakwaFuUyCdsZmHZowVVEgRldFMpXuGGEAeWwQrA909gsO0/s1600/no_thumb.png"}}document.write("<li>"),document.write('<img alt="'+s+'" src="'+u+'"/>'),document.write('<div><a href="'+m+'" rel="nofollow">'+s+"</a></div>"),"yes"==borp_details&&document.write("<span>"+c.substring(8,10)+"."+c.substring(5,7)+"."+c.substring(0,4)+" - "+l),"yes"==borp_details2&&document.write('<span class="random-summary">'+a),document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<borp_number;i++)document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+borp_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script></ul><div style="font-size: 10px; float: right;"><a href="https://techtspot.blogspot.com/2018/09/how-to-add-random-post-in-blogger.html" rel="nofollow">Random Posts Widget</a></div>

Tempat meletakkan
script Java Random Post

3. Lihat hasilnya

Setelah semua prosesnya telah anda jalankan, sekarang kita lihat hasilnya.

gambar: Hasil dari Widget Random Post

Hasil dari proses pembuatan
Widget Random Post

Sangat mudah bukan?. Seperti anda lihat, tampilan dari Random Post begitu menawan dan sangat sesuai dengan tampilan lainnya yang ada di halaamn postingan blogger anda.

D. Contoh Script lainnya yang bisa anda Praktekkan

selain contoh script di atas, kami juga akan memberikan anda beberapa script yang bisa anda praktekkan. Caranya sama dengan cara di atas. Yang bedsa, PASTI scriptnya saja.

Contoh Script 1 "Random Post Tanpa Thumbnail"

<style>#bo-rp-box{float:left;margin-bottom:10px;margin-top:0px;}
#bo-rp-box ul{margin:0px;float:left;margin-left:20px;padding:0px;}
#bo-rp-box li{vertical-align:middle;list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpbTy4Bw5zG2waP9g4KTiMYZb58QPB9OuubN0gitqurPrrrJr2d5nbEnh8RkkZiHBtVULvbMqtSHtsYJ56RbT7uv7sbRnxy0zGzt04bWAMloH-B2ZGUJ8ac4L4PEQvcowFqyILiLlJVj1o/s1600/b1.png"); margin-bottom:0;width:auto;margin-top:0;padding:10px 0;}
#bo-rp-box a{color:#0F0F0F;text-decoration:none;font-size:14px}
#bo-rp-box a:visited {text-decoration: none;color:blue;}
#bo-rp-box a:hover{color:blue}</style><script>
function rp_results_label(r){for(var e=0;e<r.feed.entry.length;e++){var l=r.feed.entry[e];rpTitles[rpTitlesNumb]=l.title.$t;for(var t=0;t<l.link.length;t++)if("alternate"==l.link[t].rel){rpUrls[rpTitlesNumb]=l.link[t].href,rpTitlesNumb++;break}}}function removeRandomDuplicate(){for(var r=new Array(0),e=new Array(0),l=0;l<rpUrls.length;l++)contains(r,rpUrls[l])||(r.length+=1,r[r.length-1]=rpUrls[l],e.length+=1,e[e.length-1]=rpTitles[l]);rpTitles=e,rpUrls=r}function contains(r,e){for(var l=0;l<r.length;l++)if(r[l]==e)return!0;return!1}function showRandomLabels(){for(e=0;e<rpUrls.length;e++)rpUrls[e]==currentposturl&&(rpUrls.splice(e,1),rpTitles.splice(e,1));var r=Math.floor((rpTitles.length-1)*Math.random()),e=0;for(rpTitles.length>1&&document.write("<ul>");e<rpTitles.length&&e<20&&e<maxresults;)document.write('<li><a href="'+rpUrls[r]+'">'+rpTitles[r]+"</a></li>"),r<rpTitles.length-1?r++:r=0,e++;document.write("</ul>")}var rpTitles=new Array,rpTitlesNumb=0,rpUrls=new Array;
</script><div id="bo-rp-box"><script src="/feeds/posts/default?alt=json-in-script&amp;callback=rp_results_label&amp;max-results=10"></script>
<script>var currentposturl="";var maxresults=10;removeRandomDuplicate(); showRandomLabels();</script></div><div style="font-size: 10px; float: right;"><a href="https://techtspot.blogspot.com/2018/09/how-to-add-random-post-in-blogger.html" rel="nofollow">Random Posts Widget</a></div>

Contoh Script 2 "Random Post"

<style type="text/css"> #random-posts li{width:125px;height:150px;margin-right:12px;float:left;list-style:none;position:relative} #random-posts li:last-child{margin-right:0} #random-posts li img{width:125px;height:150px} #random-posts li img a{border:#333 solid 2px}; #random-posts li .isinyako{position:absolute;width:250px;top:-150px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:2px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0} #random-posts li:last-child .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:90%;color:#B30B0B} .isinyako p{font-size:90%;} </style><ul id='random-posts'><script type='text/javascript'>var randomposts_number = 5;var randomposts_chars = 50;var randomposts_details = 'no';randomposts_details2 = 'no';var randomposts_comments = 'Comments';var randomposts_commentsd = 'Comments Disabled';var randomposts_current = [];var total_randomposts = 0;var randomposts_current = new Array(randomposts_number);function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');function getvalue(){for(var a=0;a<randomposts_number;a++){for(var b=!1,c=get_random(),d=0;d<randomposts_current.length;d++)if(randomposts_current[d]==c){b=!0;break}b?a--:randomposts_current[a]=c}}function get_random(){var a=1+Math.round(Math.random()*(total_randomposts-1));return a}</script><script type='text/javascript'>
function random_posts(a){for(var b=0;b<randomposts_number;b++){var c=a.feed.entry[b],d=c.title.$t;if("content"in c)var e=c.content.$t;else if("summary"in c)var e=c.summary.$t;else var e="";if(e=e.replace(/<[^>]*>/g,""),e.length<randomposts_chars)var f=e;else{e=e.substring(0,randomposts_chars);var g=e.lastIndexOf(" ");f=e.substring(0,g)+"&#133;"}for(var h=0;h<c.link.length;h++){if("thr$total"in c)var i=c.thr$total.$t+" "+randomposts_comments;else i=randomposts_commentsd;if("alternate"==c.link[h].rel){var j=c.link[h].href,k=c.published.$t;if("media$thumbnail"in c)var l=c.media$thumbnail.url;else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFjp2c1QrBt43EiVuhZr8JkiHblKLON_h302tIfUVhocDI4zTZ5SqBcra82jFuifIRTXLIbJXD8xpxt2J-aYPV_Gb5xMJymvBSwakH6P0osfDzLz-8BEYzVTZWq2nsNpLNmq-T4LJ7ZZE/s1600/no_thumb.png"}}document.write("<li>"),document.write('<img alt="'+d+'" src="'+l+'"/>'),document.write('<div class="random-title"><a href="'+j+'" rel="nofollow">'+d+"</a></div>"),"yes"==randomposts_details&&document.write('<span class="random-details">'+k.substring(8,10)+"."+k.substring(5,7)+"."+k.substring(0,4)+" - "+i)+"</span>","yes"==randomposts_details2&&document.write('<span class="random-summary">'+f)+"</span>",document.write('<div style="clear:both"></div></li>')}}getvalue();
for (var i = 0; i < randomposts_number; i++) {document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')};</script></ul><div style="font-size: 10px; float: right;"><br/><br/><a href="https://techtspot.blogspot.com/2018/09/how-to-add-random-post-in-blogger.html" rel="nofollow">Random Posts Widget</a></div>

Contoh Script 3 "Random Post"

<ul id='random-posts'>
<script type='text/javaScript'>
var tow_numposts=5;
var tow_snippet_length=150;
var tow_info='yes';
var tow_comment='Comments';
var tow_disable='Comments Disabled';
var tow_current=[];var tow_total_posts=0;var tow_current=new Array(tow_numposts);function totalposts(json){tow_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<tow_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<tow_current.length;j++){if(tow_current[j]==rndValue){found=true;break}};if(found){i--}else{tow_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(tow_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<tow_numposts;i++){var entry=json.feed.entry[i];var tow_posttitle=entry.title.$t;if('content'in entry){var tow_get_snippet=entry.content.$t}else{if('summary'in entry){var tow_get_snippet=entry.summary.$t}else{var tow_get_snippet="";}};tow_get_snippet=tow_get_snippet.replace(/<[^>]*>/g,"");if(tow_get_snippet.length<tow_snippet_length){var tow_snippet=tow_get_snippet}else{tow_get_snippet=tow_get_snippet.substring(0,tow_snippet_length);var space=tow_get_snippet.lastIndexOf(" ");tow_snippet=tow_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var tow_commentsNum=entry.thr$total.$t+' '+tow_comment}else{tow_commentsNum=tow_disable};if(entry.link[j].rel=='alternate'){var tow_posturl=entry.link[j].href;var tow_postdate=entry.published.$t;if('media$thumbnail'in entry){var tow_thumb=entry.media$thumbnail.url}else{tow_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRNHr4dsxtnpZy9WdHW0Cf8IGXc6QimnYiGFs6L9WzyJAP0Vp3yW-L4RXH3PBeVuf_wcBD7XHqJTMf_czuFbExDeySW4teW_BnmNtCneH1yGXppEi7gEqx8ZWQSX7um8bsGuVbLSm0Dso/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+tow_posttitle+'" src="'+tow_thumb+'"/>');document.write('<div><a href="'+tow_posturl+'" rel="nofollow" title="'+tow_snippet+'">'+tow_posttitle+'</a></div>');if(tow_info=='yes'){document.write('<span>'+tow_postdate.substring(8,10)+'/'+tow_postdate.substring(5,7)+'/'+tow_postdate.substring(0,4)+' - '+tow_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<tow_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+tow_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
<p><a href="https://www.talkofweb.com/show-random-posts-with-thumbnails-in-blogger" rel="nofollow" title="Talk of web Blogger Widgets">Grab this Widget</a></p>
</ul>
<style type='text/css'>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:100px;height:100px;padding:3px}
#random-posts li{margin: 0px 0px 10px 0px;}
</style>

Contoh Script 4 "Random Post"

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=80;
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/AVvXsEiGS-A9xyw2n8iWmxYg2_PYZ_3QZ_n3yu4jerA_b-PX6HRC6XT5VU9ScG_hsG6aUo8pvsiJUDh_RlRdoXMdBDkUMHMpgvXZ5tGNu9bl5toFt4Hxv4weOcOGUdWKmVnEveUlhLzNI3c3g3E/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>

Kami harap tutorial ini telah membantu anda untuk mempelajari cara menampilkan posting acak di blogger. Jika anda menggunaakn Blogger dan tertarik untuk mempelajari blogger lebih serius lagi, baca juga artikel kami lainnya yang membahas tentang blogger. Tak hanya itu, kami juga menulis tentang program python danlainnya yang berhubungan dengan blogger.

Warnet Dapurnet

Internet Cafe