Cara Mudah Membuat Widget Random Posts - Untuk mempercantik tampilan blog biasanya Blogger menambahkan widget yang berada disamping postingan artikel atau biasa disebut juga sidebar widget. Widget yang dapat ditampilkan juga bermacam-macam tergantung dari pemilik blog itu sendiri.
Namun pemasangan widget yang berlebihan juga dapat berdampak pada loading blog ketika diakses ya temans. Nah sebaiknya memasang sidebar widget yang sekiranya dapat membantu pengunjung dalam menelusuri seluruh isi blog tersebut. Jadi widget-widget terebut selain dapat mempercantik tampilan blog juga dapat berfungsi sebagai alat navigasi buat visitor blog/pengunjung.
Membuat Widget Random Posts
Pada sisi sidebar widget yang biasa ditampilkan adalah widget artikel terbaru, artikel populer, kategori atau label, bisa juga untuk menampilkan iklan. Selain itu widget yang biasa muncul disamping postingan artikel adalah widget Random Posts.
Widget random posts ini menampilkan deretan artikel yang ditampilkan secara acak. Keuntungan dari memasang widget ini adalah artikel-artikel lama berpeluang untuk muncul sehingga berkesempatan untuk dibaca kembali oleh pengunjung blog. Nah bagaimana cara membuat widget random posts ini? Kita simak terus artikel ini ya temans.
Widget random posts ini bisa dibuat selera, khususnya untuk menampilkan thumbnail atau tidak tergantung minat si empunya blog. Untuk sementara widget ini belum bisa diimplentasikan pada blog valid AMP ya temans. Oke langsung saja kuy, cara membuat widget random posts di Blogger adalah :
1. Widget random posts tanpa thumbnail
Nah jika temans ingin membuat random posts yang hanya menampilkan judul artikel saja bisa menggunakan cara ini :
- Buka dashboar Blogger
- Pilih menu tata letak
- Tambahkan gadget baru
- Pilih widget HTML/JavaScript
- Paste-kan kode berikut ini :
<ul id="random-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://www.gantiblogkamu.com/",
numPosts = 5;
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="random-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);
//]]>
</script>
- Kemudian jangan lupa simpan tema/template dan lihat hasilnya.
2. Widget random posts dengan thumbnail
Selanjutnya jika temans ingin membuat random posts yang menampilkan judul artikel dan juga thumbnail bisa menggunakan cara ini :
- Buka dashboar Blogger
- Pilih menu tata letak
- Tambahkan gadget baru
- Pilih widget HTML/JavaScript
- Paste-kan kode berikut ini :
<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 0;
var randomposts_details = '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 i = 0; i < randomposts_number; i++) {
var found = false;
var rndValue = get_random();
for (var j = 0; j < randomposts_current.length; j++) {
if (randomposts_current[j] == rndValue) {
found = true;
break
}
};
if (found) {
i--
} else {
randomposts_current[i] = rndValue
}
}
};
function get_random() {
var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
for (var i = 0; i < randomposts_number; i++) {
var entry = json.feed.entry[i];
var randompoststitle = entry.title.$t;
if ('content' in entry) {
var randompostsnippet = entry.content.$t
} else {
if ('summary' in entry) {
var randompostsnippet = entry.summary.$t
} else {
var randompostsnippet = "";
}
};
for (var j = 0; j < entry.link.length; j++) {
if ('thr$total' in entry) {
var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
} else {
randomposts_commentsnum = randomposts_commentsd
}; if (entry.link[j].rel == 'alternate') {
var randompostsurl = entry.link[j].href;
var randomposts_date = entry.published.$t;
if ('media$thumbnail' in entry) {
var randompoststhumb = entry.media$thumbnail.url
} else {
randompoststhumb = "https://2.bp.blogspot.com/-F1lTdmXTr0Y/VmpR_HBcVyI/AAAAAAAAGa8/a2_2T-p3AKM/s1600/bungfrangki_no_image_100.png"
}
}
};
document.write('<li>');
document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></a>');
document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
if (randomposts_details == 'yes') {
document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
};
document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><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 class='clear'/>
</div>
- Kemudian jangan lupa simpan tema/template dan lihat hasilnya.
Oke temans pemula sampai disini kita sudah bisa menampilkan widget random posts di blog kita. Harapannya dengan adanya widget baru ini dapat meningkatkan pengunjung blog dan dapat menambah semangat kita kedepannya dalam membuat artikel-artikel baru.
Semoga bermanfaat.