November 19, 2016

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="http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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 ❤


21 comments:

  1. If tambah benda nie akan melambatkan lagi tak nak loading page blog kita nie? Sejak tukar template baru nie blog nadia slow and sometimes viewers or visitor dtg pun dia jadi blank . That's y my viewers and followers tak increase sampai skrang. It's so sad =,(

    ReplyDelete
    Replies
    1. Chika tak sure pulak nadia. Sebab chika rasa widget nie sama je macam popular posts. Rasa tak berat kot.. hee. Pageviews nadia meningkat tau. Nadia yang tak perasan nie agaknya ☺️

      Delete
    2. nadia dah siap delete icon yang google+ tue . Nak cepatkan blog nadia loading bila org view anddddd maybe nadia nak if org baru nak follow nadia better click blogger follower button instead of google+ punya follower button . hihihi ... Nice sharing yank . =)

      Delete
    3. Yess! Siqah pun dah buang jugak google+ sejak dah perasan rupanya ada je kat navigation bar. Hii.

      Betul. Lebih prefer follow blog dengan followers button drpd google+. Hee. Thank you yank :)

      Delete
  2. Boleh try ni siqah. Dia bukan popular post kan

    ReplyDelete
    Replies
    1. Bukan dear. Random posts. Trylah. Siqah datang jengah blog wani nanti :)

      Delete
  3. wahhh dah lama mencari widget ni akak.Thanks for tutorial. :)

    btw sy tggu update for next day. 😊

    ReplyDelete
    Replies
    1. My pleasure shaf :)

      Hee. Dah update entri untuk hari ni. Jemputlah datang lagi bloh akak πŸ˜ŠπŸ˜‰

      Delete
  4. Senangnya kak Siqah, mai guna ya...

    ReplyDelete
    Replies
    1. Gunalah mai :) Happy to share 😊

      Delete
  5. Chika tukar template ke ? menarik !!! =)

    ReplyDelete
    Replies
    1. Hehe. Tukar grid style je πŸ™ˆ Template masih kekal yang sama. Tukar sebab nak nampak lagi kemas. yeayyy! Tq nadia 😊

      Delete
  6. Baru saya faham tapi belum gerenti saya boleh buat. Kalau saya nak ubah apa2 kat blog saya, i'll ask u first. Boleh kan?

    ReplyDelete
    Replies
    1. Boleh je.. if saya tahu, saya tolong..cuma saya tak pandai pun nanye. Hihi

      Delete
  7. Siqa, Beeha nak tanya ni. Macam mana nak buat latest instagram mcm siqah tu dekat bawah blog? Beeha guna snapwidget tu tapi tak berapa suka sebab bila klik dia tak link terus ke instagram. Kalau boleh tolong share mcm yang siqah punya. :) Thank you.

    ReplyDelete

Dear all ~ Thank you for reading. Feel free to leave your comments here. Happy to hear your thoughts 。^‿^。