Cara Membuat Widget Random Post (Artikel Acak) Pada Blog

Santos el Salam

14 September 2019

Sebetulnya penggunaan widget Random Post atau Artikel Acak ini jarang digunakan oleh para blogger. Namun jarang bukan berarti tidak ada yang memasangnya. Widget random Post ini sebenarnya fungsinya seperti recent post dan popular post, hanya saja daftar judul artikel yang ditampilkan oleh ketiganya berbeda. Jika artikel terbaru (recent Post) menampilkan daftar artikel terkini, dan artikel populer menampilkan daftar artikel yang populer, maka artikel acak (random post) menampilkan daftar artikel secara acak. 

Artikel acak

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 = 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=\"/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/AVvXsEh0qu4ovpopp__CucZSvAtZTyC9jMfHm4Mnq2OOKhyphenhyphennnDfSElSnEJBhiiaOEax7UEzsupCZiUtOykwXyoD8KSGNYWSAX29i7ACj8gLZEcNHhcGRbtyt0QVYUHQry84qKB7SPH-_lCsinKDN/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.

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/AVvXsEh0qu4ovpopp__CucZSvAtZTyC9jMfHm4Mnq2OOKhyphenhyphennnDfSElSnEJBhiiaOEax7UEzsupCZiUtOykwXyoD8KSGNYWSAX29i7ACj8gLZEcNHhcGRbtyt0QVYUHQry84qKB7SPH-_lCsinKDN/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. 

Labels: Blogging

Thanks for reading Cara Membuat Widget Random Post (Artikel Acak) Pada Blog. Please share...!

Facebook

Twitter