Tutorial Memasang Random Post Pada Blog

Tutorial Memasang Random Post Pada Blog - Kali ini saya akan membagikan tutorial untuk menjadikan pengunjung Blog anda merasa menjadi lebih nyaman dan betah ketika memabaca artikel - artikel yang anda sajikan, sekaligus dapat mempercantik tampilan blog anda. Seperti yang telah kita ketahui fungsi Kolom Random Post adalah untuk menampilkan secara acak artikel yang telah anda terbitkan, dengan adanya Kolom Random Post ini sedikit banyak dapat menaikan trafik blog anda dikarenakan kemungkinan artikel lama yang telah terkubur dibawah dan tidak menjadi Popular Post akan tampil, hal ini tentu saja memungkinkan pula para pengunjung lebih tertarik mengunjungi artikel lama tersebut. Sebenarnya banyak macam pilihan desain Random Post yang akan anda gunakan, tapi untuk kali ini saya akan memberikan tips membuat Random Post dengan 2 desain :

1. Random Post dengan Thumbnail Gambar dan Judul Artikel
2. Random Post dengan Tombol (Button)

Langsung saja perhatikan langkah - langkah yang akan saya sebutkan seperti dibawah ini :

• Silahkan Login ke dalam akun Blogger anda masing yang ingin anda tambahkan Random Post
• Langkah selanjutnya langsung menuju ke tab Tata Letak
• Tambahkan Gadget lalu Pilihlah tempat yang strategi supaya mudah dilihat oleh pengunjung, dapat di side bar sebelah kiri atau kanan atau di Footer.
• Lalu masukanlah Kode Java Script atau HTML
• Silahkan Copy Kode yang saya berikan ke dalam elemen yang baru saja anda buat

Kode Script untuk Random Post dengan Thumbnail

Jika anda menggunakan Script dibawah ini maka tampilan Random Post anda meliputi gambar dalam artikel dan judulnya. contohnya seperti ini : 

Random Post dengan Thumbnail

<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/AVvXsEgwV90CQRKG5yTkLx2YEHqbI_8w2uHWziRr9gSkF5tm0A41GwTtjdVdQFbJ5eAmemJ3KKDXisGItbugbiYNGjhDm9O3Ei1CAVa3t1aBEphOGZnGEN5Ss2PC7CLMnhPMkIFlxH_K5iiI2Nk/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="http://www.ciptakanide.blogspot.com/tutorial-memasang-random-post-pada-blog" rel="nofollow" title="Ciptakan Ide">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>

Catatan : Anda dapat mengganti jumlah post yang akan anda jadikan random dengan cara mengedit sedikit Kode Script pada numpost:5 , ganti angka 5 sesuai dengan keinginan anda.

Kode Script untuk dengan Tombol Button

Random Post Button

Jika anda menggunakan kode script ini maka yang keluar hanya Tombol bertuliskan Random Post, ketika pengunjung mengkliknya secara otomatis akan diarahkan ke artikel lainnya yang ada dalam blog anda secara Random. Silahkan Copy Script dibawah ini, metodenya sama :

<style>

#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}

#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}

#abt-random a{color: #fff;}

</style>

<center><div id="abt-random"></div></center>

<script type="text/javascript"> 

function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">

</script>

• Langkah selanjutnya adalah simpan Script tersebut dan lihat hasilnya

Akhirnya selesai juga anda membuat Random Post, sekarang coba anda lihat dan refresh browser anda sebanyak 3 kali, jika anda perhatikan artikel yang ada di kolom Random Post akan selalu berubah - ubah yang ditampilkan setiap pengunjung merefresh halaman browsernya. Silahkan anda pertimbangkan terlebih dahulu menggunakan desain Random Post yang seperti apa, usahakan sesuai dengan Template Blog anda. Sekian Tips dari dari mengenai Tutorial Memasang Random Post Pada Blog , Semoga dengan adanya tips ini dapat menjadikan blog anda semakin menarik dan ramai pengunjung. Terimakasih :D

Artikel terkait :