Fast Load and Asynchronous Random Posts Script for Google Blogger (Blogspot)

Having a high pageview is one of the dream of every blogger, including me hehe... As a blogger we must make our blog or website designed carefully so every visitors that come to our website / blog like to spend more time reading more the pages. And one of the widget that have a good chance to increasing you Blog / website pageview is random posts widget.

Oh yeah for Bloggers who are already on a self host platform and using CMS-es like Wordpress, etc. adding new widget or functionality like random posts is easy with things called "plugin". But for Google blogger / blogspot user, you sure didn't see any random posts on the widget pages on your blogger dashboard right?

Google blogger blogspot icon

Fortunately Google blogger a.k.a blogspot have good API (Application Programming Interface), and in this case it's the blog feed API. By using and manipulate the feeds of our Google blogger / blogspot using Javascript, we can make interesting widgets including our own random posts script for our Google blogger / blogspot.

So in this post, I will share my own crafted random posts script for Google blogger / blogspot. This random posts script utilize the most popular Javascript library, jQuery to "write less, do more" hehe.

This Google blogger / blogspot random posts script is fast load because it is using the short version of our Google blogger / blogspot feed. And it is designed to work asynchronously, means it won't block your blog loading.

Applying the random posts script to your Google blogger / blogspot blog

Below are the steps to add and adjust the random posts script on your Google blogger / blogspot.

1. Include jQuery library

This random posts script is utilizing jQuery. So first, you must include jQuery in your blog. Edit your blog template HTML, open the search bar by pressing ctrl+f, then search for </head>. Add the following code snippet just before the </head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Change the feed setting to "short"

Next, this script also require your blog feed setting set up to "short". We also do this to make the random posts script have faster loading.

Blogger Blog change feed setting
Change feed setting to "Short".

3. Adding the script

To add the random posts script in your blog, just go into the "Layout" section from your blogger dashboard. Add new gadget, then choose "HTML/Javascript gadget". Copy the script to it, and save.

I have created different layouts for different elements to be showed on the posts list, so check them out and pick any you prefer.

  • Title only
    title only
    Random posts with title only

    The simplest random posts for your Google blogger / blogspot blog showing post titles only:

    <!-- Title only |  start random posts script by Daryadi.S -->
    
    <div id="random-posts"><ul id="random-posts-ul">LOADING...</ul></div>
    <script>
    var Rlimit = 10;
    var Ritems = ''; var Rrandom = []; var Rtemp = '';
    var Ri;
    $(document).ready(function(){
    	$.getScript('/feeds/posts/default?max-results=50&alt=json', function(data){
    var dataClean = data.toString(); dataClean = dataClean.replace(/\\n/g, "\\n").replace(/\\'/g, "\\'").replace(/\\"/g, '\\"').replace(/\\&/g, "\\&").replace(/\\r/g, "\\r").replace(/\\t/g, "\\t").replace(/\\b/g, "\\b").replace(/\\f/g, "\\f"); dataClean = dataClean.replace(/[\u0000-\u0019]+/g,""); var json = JSON.parse(dataClean); var feed = json.feed; var entryLength = feed.entry.length;
    		for (Ri=1; Ri<=entryLength; Ri++){
    			Rtemp = Math.floor(Math.random()*entryLength);
    			if(Rrandom.indexOf(Rtemp) == -1){
    				Rrandom.push(Rtemp);
                }
    			else { Ri--; }
    		}
    		Rlimit = Rlimit - 1;
            if (entryLength <= Rlimit) { Rlimit = entryLength - 1;
            }
            for (Ri=0; Ri<=Rlimit; Ri++) {
    			var entry = feed.entry[Rrandom[Ri]]; var title = entry.title.$t; var titleText = title.replace(/"/g,'').replace(/'/g,"").replace(/</g,'').replace(/>/g,''); var url = entry.link[4].href;
                Ritems += '<li><a href="'+url+'" title="Read '+titleText+'" class="title">'+title+'</a></li>';
                if (Ri==Rlimit) {
    				$('#random-posts-ul').html(Ritems);
                }
            }	
    	});
    });
    </script>
    
  • Title and thumbnail
    Title and thumbnail
    Random posts with title and thumbnail.

    Showing title and the post image thumbnail.

    <!-- Title and thumbnail |  start random posts script by Daryadi.S -->
    
    <div id="random-posts"><ul id="random-posts-ul">LOADING...</ul></div>
    <script>
    var Rlimit = 10;
    var Ritems = ''; var Rrandom = []; var Rtemp = '';
    var Ri;
    $(document).ready(function(){
    	$.getScript('/feeds/posts/default?max-results=50&alt=json', function(data){
    var dataClean = data.toString(); dataClean = dataClean.replace(/\\n/g, "\\n").replace(/\\'/g, "\\'").replace(/\\"/g, '\\"').replace(/\\&/g, "\\&").replace(/\\r/g, "\\r").replace(/\\t/g, "\\t").replace(/\\b/g, "\\b").replace(/\\f/g, "\\f"); dataClean = dataClean.replace(/[\u0000-\u0019]+/g,""); var json = JSON.parse(dataClean); var feed = json.feed; var entryLength = feed.entry.length;
    		for (Ri=1; Ri<=entryLength; Ri++){
    			Rtemp = Math.floor(Math.random()*entryLength);
    			if(Rrandom.indexOf(Rtemp) == -1){
    				Rrandom.push(Rtemp);
                }
    			else { Ri--; }
    		}
    		Rlimit = Rlimit - 1;
            if (entryLength <= Rlimit) { Rlimit = entryLength - 1;
            }
            for (Ri=0; Ri<=Rlimit; Ri++) {
    			var entry = feed.entry[Rrandom[Ri]]; var title = entry.title.$t; var titleText = title.replace(/"/g,'').replace(/'/g,"").replace(/</g,'').replace(/>/g,''); var url = entry.link[4].href; var thumbnail = entry.media$thumbnail.url;
                Ritems += '<li><a href="'+url+'" title="Read '+titleText+'" class="title"><span class="img-container"><img src="'+thumbnail+'" alt="'+titleText+' thumbnail" /></span>'+title+'</a><span class="clearfix"></span></li>';
                if (Ri==Rlimit) {
    				$('#random-posts-ul').html(Ritems);
                }
            }	
    	});
    });
    </script>
    
  • Title, thumbnail, and description
    Title, thumbnail, and post summary
    Random posts with title, thumbnail, and posts summary.

    A full elements of random posts showing title, thumbnail, and its post summary.

    <!-- Title, thumbnail, and summary |  start random posts script by Daryadi.S -->
    
    <div id="random-posts"><ul id="random-posts-ul">LOADING...</ul></div>
    <script>
    var Rlimit = 10;
    var summaryLength = 100;
    var Ritems = ''; var Rrandom = []; var Rtemp = '';
    var Ri;
    $(document).ready(function(){
    	$.getScript('/feeds/posts/default?max-results=50&alt=json', function(data){
    var dataClean = data.toString(); dataClean = dataClean.replace(/\\n/g, "\\n").replace(/\\'/g, "\\'").replace(/\\"/g, '\\"').replace(/\\&/g, "\\&").replace(/\\r/g, "\\r").replace(/\\t/g, "\\t").replace(/\\b/g, "\\b").replace(/\\f/g, "\\f"); dataClean = dataClean.replace(/[\u0000-\u0019]+/g,""); var json = JSON.parse(dataClean); var feed = json.feed; var entryLength = feed.entry.length;
    		for (Ri=1; Ri<=entryLength; Ri++){
    			Rtemp = Math.floor(Math.random()*entryLength);
    			if(Rrandom.indexOf(Rtemp) == -1){
    				Rrandom.push(Rtemp);
                }
    			else { Ri--; }
    		}
    		Rlimit = Rlimit - 1;
            if (entryLength <= Rlimit) { Rlimit = entryLength - 1;
            }
            for (Ri=0; Ri<=Rlimit; Ri++) {
    			var entry = feed.entry[Rrandom[Ri]]; var title = entry.title.$t; var titleText = title.replace(/"/g,'').replace(/'/g,"").replace(/</g,'').replace(/>/g,''); var url = entry.link[4].href; var thumbnail = entry.media$thumbnail.url; var summary = entry.summary.$t;
                Ritems += '<li><a href="'+url+'" title="Read '+titleText+'" class="title"><span class="img-container"><img src="'+thumbnail+'" alt="'+titleText+' thumbnail" /></span>'+title+'</a><span class="summary">'+summary.replace(/<[^>]*>/g, '').substring(0,summaryLength)+'&hellip;</span><span class="clearfix"></span></li>';
                if (Ri==Rlimit) {
    				$('#random-posts-ul').html(Ritems);
                }
            }	
    	});
    });
    </script>
    

4. Styling the random posts using CSS

You can style the appearance of the posts list using CSS. Here are the CSS codes:

/* Main container */
#random-posts { 
  background:#fff; 
}

/* The post line */
#random-posts li { 
  padding:10px 15px; 
  border-bottom:1px solid #ccc 
}

/* link color */
#random-posts a.title { 
  color:#333;
}

/* The post title */
#random-posts .title { 
  font-size:14px;
}

/* Clear fix for the floating post thumbnail */
#random-posts .clearfix { 
  display:block; 
  clear:both; 
}

/* Post thumbnail container */
#random-posts .img-container { float:left;
  display:inline-block; 
  margin:3px 10px 0px 0px
}

/* The post summary */
#random-posts .summary { 
  display:block; 
  font-size:12px; 
  color:#999;
  line-height:1.2
}

Comments on "Fast Load and Asynchronous Random Posts Script for Google Blogger (Blogspot)"