Cara Membuat Widget Random Post (Artikel Acak) Pada Blog

 


Keuntungan memasang widget random post ini menurut saya bisa mengeksplor lebih banyak daftar artikel yang ada di blog kita. Dari artikel terbaru sampai artikel pertama yang dibuat ketika baru membangun blog akan ditampilkan secara acak oleh widget random post ini. Dengan demikian pembaca juga akan lebih tertarik untuk membaca setiap artikel kita, kita pun juga akan diuntungkan dengan terbacanya kembali artikel-artikel lama kita yang sebelumnya makin terbenam tak terbaca. Padahal tidak jarang artikel-artikel lama kualitasnya juga tidak kalah dengan yang terbaru. Bagaimana cara membuatnya? Caranya mudah, anda bisa ikuti langkah-langkah berikut ini.


1. Buka akun blogger anda.

2. Pilih menu layout (tataletak).

3. Klik tambahkan gadget (add gadget) dan pilih html/javascript. 

4. Setelah terbuka, isi kolom judul dengan nama Random Post, Artikel Acak atau semacamnya. 

5. Pada kotak html, masukkan kode berikut ini ke dalamnya. 

Berikut kodenya:

<style> #bo-random-posts img { background: #ddd; height: 70px; float: left; width: 70px; margin: 4px; padding: 0px; } #bo-random-posts img:hover { opacity: 0.5; filter: alpha(opacity=50); } ul#bo-random-posts { list-style-type: none; margin-left: 5px; margin-right: 5px; background: #ffffff; background-repeat: no-repeat; } #bo-random-posts li { margin: 8px 0; border-bottom: 1px solid #ddd; } #bo-random-posts li a strong { padding: 10px 0; color: #000080; text-decoration: none; } #bo-random-posts li a:hover{text-decoration:none} .bo-random-summary { display: block; } </style> <ul id='bo-random-posts'> <script> var borp_number = 10var borp_details = 'yes'; var borp_chars = 60; var borp_details2 = 'no'; var borp_comments = 'Komentar'; 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/AVvXsEjTV2Rkbvbn9F-CBLmp6MTlATaEJNOz0TquEfqVWVBLjPlkvSg-ZRxLi3YOkNRdKNIbDQx4NEVqt-8SSGLPHDu_L12WZ0FcI-pAZ9uN3NtppDhtGAHkIPac-f2jgEsK8iv75fSASFG-Efcm/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>

Keterangan:

Angka 10 (berwarna merah) merupakan jumlah daftar artikel yang ditampilkan. Anda bisa mengubahnya sesuai selera anda. 

6. Kemudian klik simpan.

7. Jika ingin menampilkannya pada versi mobile, pilih menu tema dan klik edit html.

8. Setelah terbuka, cari kode yang dipasang tadi dan tambahkan kode pengaturan mobile='yes', Contohnya seperti berikut ini.

Pengaturan versi mobile

8. Jika sudah, klik simpan tema dan lihat hasilnya.

Kalau anda ingin agar postingan pada widget random post berasal dari situs/ blog lain, anda bisa edit lagi kode di atas menjadi seperti berikut ini:
<style> #bo-random-posts img { background: #ddd; height: 70px; float: left; width: 70px; margin: 4px; padding: 0px; } #bo-random-posts img:hover { opacity: 0.5; filter: alpha(opacity=50); } ul#bo-random-posts { list-style-type: none; margin-left: 5px; margin-right: 5px; background: #ffffff; background-repeat: no-repeat; } #bo-random-posts li { margin: 8px 0; border-bottom: 1px solid #ddd; } #bo-random-posts li a strong { padding: 10px 0; color: #000080; text-decoration: none; } #bo-random-posts li a:hover{text-decoration:none} .bo-random-summary { display: block; } </style> <ul id='bo-random-posts'> <script> var homePage = 'https://hikayatmanfangat.blogspot.com'; var borp_number = 10; var borp_details = 'yes'; var borp_chars = 60; var borp_details2 = 'no'; var borp_comments = 'Komentar'; 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=\"' + homePage + '/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/AVvXsEjTV2Rkbvbn9F-CBLmp6MTlATaEJNOz0TquEfqVWVBLjPlkvSg-ZRxLi3YOkNRdKNIbDQx4NEVqt-8SSGLPHDu_L12WZ0FcI-pAZ9uN3NtppDhtGAHkIPac-f2jgEsK8iv75fSASFG-Efcm/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="' + homePage + '/feeds/posts/default?alt=json-in-script&start-index='+borp_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script> </ul>
Keterangan: 
  • Yang ditandai warna merah adalah kode yang ditambahkan. 
  • Ganti Url di atas (ditandai warna hijau) dengan Url dari situs/blog yang anda kehendaki. 

Untuk pengaturan versi mobile abaikan saja jika template blog anda sudah responsive. Demikianlah Cara Membuat Widget Random Post (Artikel Acak) Pada Blog. Semoga bermanfaat. 

Top Post Ad

Below Post Ad