Cara membuat random post dengan gambar thumbnail di blog

Cara membuat dan memasang widget random post dengan gambar thumbnail di blog - Random post atau yang di artikel dengan postingan acak,yaitu sebuah widget di blog yang menampilkan postingan secara acak sesuai dengan jumlah yang telah kita tentukan.Widget random post ini berfungsi untuk memperlihatkan artikel-artikel di blog kita yang lama maupun baru secara random.Untuk blogger pemula mereka sering belum tahu dengan widget blog yang satu ini,bahkan saya sendiri saja baru tahu widget ini setelah saya mengunjungi sebuah blog yang menggunakan widget random post ini.Dalam versinya random post terbagi atas dua macam yang pertama versi tanpa gambar dan yang kedua versi thumbnail atau dengan gambar,tapi dalam tutorial kali ini saya hanya akan memberikan cara membuat random post dengan gambar saja karena menurut saya apabila dengan gambar dapat menarik perhatian pengunjung untuk melakukan klik karena mayoritas pengunjung lebih suka dengan hal-hal berbau keindahan dan seni jadi dengan tampilan popular post yang keren sekaligus dilengkapi dengan gambar thumbnail maka dapat menambah keindahan tersendiri untuk widget random post ini,jadi silahkan anda simak baik-baik.

Selain berfungsi untuk menampilkan postingan secara random,widget yang satu ini juga merupakan sebuah widget navigasi yang dimana dapat membantu pengunjung untuk melihat-lihat postingan blog kita yang lain.Sebenarnya masih ada lagi widget navigasi yang wajib ada di blog kita seperti menu bar navigasi dan juga widget popular post yang menampilkan postingan populer dalam kurun waktu tertentu.Selain itu widget random post ini juga membantu meningkatkan trafik blog kita dengan adanya PV klik dari pengunjung sehingga satu pengunjung saja bisa mengunjungi lebih dari 2-5 postingan blog kita dalam sekali berkunjung,nah bayangkan saja bila sampai 1000 pengunjung.Baiklah tanpa memperpanjang kata lagi langsung saja simak cara membuat dan memasang rnadom post dengan gambar thumbnail di blog.

membuat widget random post di blog


Cara membuat randam post dengan gambar di blog

1. Silahkan anda masuk di blog anda kemudian masuk pada menu Tata letak > Tambah Widget > HTML/Javascript,setelah itu anda copy kode ini dan pastekan tepat di dalam kotak HTML yang sudah di sediakan di sana.

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=10;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/AVvXsEijFGEqyqsu29gvQOdhKSdTS91xEZFLRHt73O3HDr3wCeimoM4axL0qW_dTqkWCDfx4D2wMpX8NnEoFmOvjn9pFvIpkdQdt5ygxEjmt8AIm9qj0CMTh1Wd6IZN5veZn1EwN8L-URM7GmFo/s1600/default.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('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}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>

 2. Silahkan anda ganti kode berwarna merah dengan jumlah postingan yang ingin anda tampilkan di random post anda,terakhir silahkan anda klik Save atau simpan dan lihat hasilnya.

Sekarang widget random post dengan gambar telah berhasil dipasang di blog anda,jika terjadi kesalahan dalam kode di atas silahkan bertanya di kotak komentar jika ada yang perlu di tanyakan,baiklah mungkin hanya ini yang dapat saya berikan untuk postingan saya kali ini semoga artikel saya tentang cara membuat randaom post dengan gambar thumbnail di blog ini bisa bermanfaat untuk anda semua,terima kasih dan salam blogger.
Share this :

Penulis by abid

Previous
Next Post »

1 Komentar

avatar

Keren nih kayaknya random postnya izin save siapa tau butuh :d

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔