DAY 4 : TUTORIAL - HOW TO ADD RANDOM POSTS WIDGET

I'm behind the schedule of 7 DAYS : 1 WEEK BLOG CHALLENGE. Rakan blogger lain semua dah update sehingga topik Day 6 dan aku baru nak update topik Day 4. Lambat weii ⌛

Untuk topik tutorial hari ni, aku nak ajar bagaimana nak letak "Random Posts Widget" on blog sidebar.

Korang perasan tak pada "Random Posts" widget di sidebar blog aku? Pada mulanya hanya ada Popular Posts saja dan beberapa bulan lepas, aku tambah Random Posts widget pulak.

Sebenarnya, aku telah kurangkan widget di sidebar agar blog aku tak berat dan cepat loading dan Random Posts Widget adalah salah satu widget yang aku sayang nak buang. Pendapat aku, random posts widget boleh juga menambah tarikan viewers dan readers to read other posts than what they're currently into. Sama juga seperti konsep "Picks For You" at the end of each post. 

Just a simple step. You will do it in less than 2 minutes. Or maybe a minute? Believe me ☺

My Random Posts

HOW TO ADD RANDOM POSTS WIDGET

1. Go to Layout.

2. Go to your sidebar and click "Add A Gadget".

3. Choose HTML/JavaScript.

4. Copy below code and paste it to your HTML/JavaScript box content.

5. Save.

<style type="text/css">
#random-posts img{padding:0!important;margin:0!important;height:auto;width:100%;}
ul#random-posts{list-style-type:none;padding:0}
#random-posts li{width:100%;position:relative;height:200px;overflow:hidden;margin-bottom:12px;}
.random-title{background: #fff;color:#222;text-align:center;font-family:'Playfair Display',serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;line-height:1.7;padding:5px;}
.random-title a{color:#222;}
.random-title1{display:block;position:absolute;width:100%;height:100%;margin:0;padding:0;top:0;left:0;}
.random-title2{display:table;width:80%;height:100%;margin:0 auto;}
.random-title3{display:table-cell;vertical-align:bottom;width:100%;height:100%;}
.random-summary{margin-top:5px;display:block}
</style>
<ul id='random-posts'>
<script type='text/javascript'>
var randomposts_number = 5;
var randomposts_chars = 50;
var randomposts_details = 'no';
randomposts_details2 = '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 a=0;a<randomposts_number;a++){for(var b=!1,c=get_random(),d=0;d<randomposts_current.length;d++)if(randomposts_current[d]==c){b=!0;break}b?a--:randomposts_current[a]=c}}function get_random(){var a=1+Math.round(Math.random()*(total_randomposts-1));return a}
</script>
<script type='text/javascript'>
function random_posts(a){for(var b=0;b<randomposts_number;b++){var c=a.feed.entry[b],d=c.title.$t;if("content"in c)var e=c.content.$t;else if("summary"in c)var e=c.summary.$t;else var e="";if(e=e.replace(/<[^>]*>/g,""),e.length<randomposts_chars)var f=e;else{e=e.substring(0,randomposts_chars);var g=e.lastIndexOf(" ");f=e.substring(0,g)+"&#133;"}for(var h=0;h<c.link.length;h++){if("thr$total"in c)var i=c.thr$total.$t+" "+randomposts_comments;else i=randomposts_commentsd;if("alternate"==c.link[h].rel){var j=c.link[h].href,k=c.published.$t;if("media$thumbnail"in c)var l=c.media$thumbnail.url;else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvD6dcJV0ofbSKiU4Zu5c2Nqkj1ye5WOWPn9BzeYHQgUl8QVf6mzuxoUU8qig4dt5xoMdOhvHpQvrjQpKQL56hd7qtNLzB5cLccPtPngcuhoRx0zeDifbM4KRLmOeunuF8oS9eULhzuA/s1600/no_thumb.png"}}document.write("<li>"),document.write('<a href="'+j+'" rel="nofollow"><img alt="'+d+'" src="'+l+'"/>'),document.write('<div class="random-title1"><div class="random-title2"><div class="random-title3"><div class="random-title">'+d+"</a></div></div></div></div>"),"yes"==randomposts_details&&document.write('<span class="random-details">'+k.substring(8,10)+"."+k.substring(5,7)+"."+k.substring(0,4)+" - "+i)+"</span>","yes"==randomposts_details2&&document.write('<span class="random-summary">'+f)+"</span>",document.write('<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 style="font-size: 10px; float: right;"><a href="http://helplogger.blogspot.com/2012/03/add-random-posts-widget-to-blogger.html" rel="nofollow">Random Posts Widget</a></div>

Senang kan?

Happy trying, all ❤