Fast Load & Asynchronous Related Posts Script for Blogger Blog using JQuery

Related posts is one of very essential part of a blog. By providing related posts after a post, your reader can be engaged to stay longer in your blog and increasing the pageview. Although related posts is not present by default on Blogger official templates, we can add related posts feature to our Blogger by make use of the "Feeds manipulation".

Blogger guides and tutorials by Weblogwap

By only from its API feeds, we can create many widgets in our Blogger blog like recent posts, random posts, recent comments, and of course related posts.

Although its not something easy to implement Blogger feeds API to create widgets because you will need the deep understanding of Javascript and HTML. At least, that's what I feel because on one or two years back when I still don't know anything about Javascript i even didn't know that this method was exist.

Most of related posts script I noticed on my Blogger blog templates before is to load the feeds in JSON format through Javascript src and then use the data in a callback function. But after I tried to learned and deep the Javascript, I found this method is not quite good because it block the loading at some point. I noticed the rendering of the sidebar in my blog is blocked. This happens because in the HTML structure, the sidebar is actually written after the post where the related posts script is located.

Then I tried to implement JQuery $.getScript(); and I found it's better because it is not block the document loading process like the script src does. $.getScript(); is the shorthand method for JQuery AJAX to load external script. All JQuery AJAX function is asynchronous by default, it means all other scripts process won't be blocked while the request running. And, JQuery has $(document).ready(); that will hold the scripts until the document is loaded.

But at this post you don't need to understand Javascript more to create related posts on your Blogger Blog, because all you need is just to copy and paste the related posts script to your Blogger blog template.

Create related posts widget on Blogger Blogspot using JQuery

1. Include JQuery library

Because this related posts script is using JQuery, first you must include JQuery library source in your blog. Open your Blogger Blog theme menu, then click "Edit HTML". Click Ctrl+F to open the template search menu it should open the search input at the right top of the text area. Then search for </head>. Add the following code just before it:

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

You can skip this first step if you have included JQuery library on your blog before.

2. Add the related posts script

Allright now is the most important part just to add the related posts script to your Blogger Blog template in the Blog widget section. Still editing your template, open again the search menu with Ctrl+F, then search for <b:widget id='Blog1'. Expand the line, and search for line <b:includable id='footerBylines'> just not far below it. Expand the <b:includable id='footerBylines'> line then copy the related posts script below just after it.

Blogger Blog edit html theme search footer byline
Add the related posts script after <b:includable id='footerBylines'> line.
<!-- Start Blogger Blog Related Posts by Daryadi.S: http://weblogwap.blogspot.com -->
<b:if cond='data:view.isSingleItem and data:view.isPost'>
	<div id='related-posts'>
		<h3>Related Posts</h3>
		<ul id='related-posts-ul'/>
	</div>
	<script>
		var labels = &quot;<b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop>&quot;;
		//<![CDATA[ 
		var limit = 5; var items = ''; var random = []; var temp = ''; var i; labels = labels.split(','); var rand = Math.floor(Math.random()*(labels.length-1));
		$(document).ready(function(){
			$.getScript('/feeds/posts/default/-/'+labels[rand]+'?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 (i=1; i<=entryLength; i++){ temp = Math.floor(Math.random()*entryLength); if(random.indexOf(temp) == -1){ random.push(temp); } else { i--; } } limit = limit - 1; if (entryLength <= limit) { limit = entryLength - 1; }
			for (i=0; i<=limit; i++) { var entry = feed.entry[random[i]]; var title = entry.title.$t; var titleText = title.replace(/"/g,'').replace(/'/,'').replace(/</g, '').replace(/>/g,''); var url = entry.link[4].href; items += '<li><a href="'+url+'" title="Read '+titleText+'" class="w3-hover-text-teal">'+title+'</a></li>'; if (i==limit) { $('#related-posts-ul').html(items); } } }); });          
	//]]></script>
</b:if>

The above script will show related posts with title only. If you want to show the thumbnail or snippet too, you can use the following alternative scripts. But first you must change your Blogger blog feed setting in "Setting" -> "Other", look on the "Site feed" section. Then change the "Allow Blog Feed" option to "Short".

Blogger Blog change feed setting
Change feed setting to "Short".
  • Title and thumbnail
    Blogger Blog related posts with title and image

    This script will create related posts list with post thumbnail and title on your Blogger Blog:

    <b:if cond='data:view.isSingleItem and data:view.isPost'>
    	<div id='related-posts'>
    		<h3>Related Posts</h3>
    		<ul id='related-posts-ul'/>
    	</div>
    	<script>
    		var labels = &quot;<b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop>&quot;;
    		//<![CDATA[ 
    		var limit = 5; var items = ''; var random = []; var temp = ''; var i; labels = labels.split(','); var rand = Math.floor(Math.random()*(labels.length-1));
    		$(document).ready(function(){
    			$.getScript('/feeds/posts/default/-/'+labels[rand]+'?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 (i=1; i<=entryLength; i++){ temp = Math.floor(Math.random()*entryLength); if(random.indexOf(temp) == -1){ random.push(temp); } else { i--; } } limit = limit - 1; if (entryLength <= limit) { limit = entryLength - 1; }
    			for (i=0; i<=limit; i++) { var entry = feed.entry[random[i]]; var title = entry.title.$t; var titleText = title.replace(/"/g,'').replace(/'/,'').replace(/</g, '').replace(/>/g,''); var url = entry.link[4].href; var thumbnail = entry.media$thumbnail.url; items += '<li><a href="'+url+'" title="Read '+titleText+'" class="w3-hover-text-teal"><span class="thumbnail-container"><img src="'+thumbnail+'" alt="'+titleText+' thumbnail" class="thumbnail" /></span><span class="title">'+title+'</span></a><div class="clearfix"></div></li>'; if (i==limit) { $('#related-posts-ul').html(items); } } }); });          
    	//]]></script>
    </b:if>
    
  • Title, thumbnail, and snippet
    Blogger Blog related posts with title, image, and summary

    This one will create full featured elements related posts on your Blogger Blog with title, thumbnail, and also the snippet or post summary.

    <b:if cond='data:view.isSingleItem and data:view.isPost'>
    	<div id='related-posts'>
    		<h3>Related Posts</h3>
    		<ul id='related-posts-ul'/>
    	</div>
    	<script>
    		var labels = &quot;<b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop>&quot;;
    		//<![CDATA[ 
    		var limit = 5; var summaryLength = 150; var items = ''; var random = []; var temp = ''; var i; labels = labels.split(','); var rand = Math.floor(Math.random()*(labels.length-1));
    		$(document).ready(function(){
    			$.getScript('/feeds/posts/default/-/'+labels[rand]+'?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 (i=1; i<=entryLength; i++){ temp = Math.floor(Math.random()*entryLength); if(random.indexOf(temp) == -1){ random.push(temp); } else { i--; } } limit = limit - 1; if (entryLength <= limit) { limit = entryLength - 1; }
    			for (i=0; i<=limit; i++) { var entry = feed.entry[random[i]]; var title = entry.title.$t; var titleText = title.replace(/"/g,'').replace(/'/,'').replace(/</g, '').replace(/>/g,''); var url = entry.link[4].href; var thumbnail = entry.media$thumbnail.url; var summary = entry.summary.$t.substring(0,summaryLength) ; items += '<li><a href="'+url+'" title="Read '+titleText+'" class="w3-hover-text-teal"><span class="thumbnail-container"><img src="'+thumbnail+'" alt="'+titleText+' thumbnail" class="thumbnail" /></span><span class="title">'+title+'</span></a><span class="summary">'+summary.replace(/<[^>]*>/g, '').substring(0,summaryLength)+' &hellip;</span><div class="clearfix"></div></li>'; if (i==limit) { $('#related-posts-ul').html(items); } } }); });          
    	//]]></script>
    </b:if>
    

3. Styling the related posts list using CSS

Here is the CSS path and classes so you can style it to match with your Blogger Blog theme:
/* Start Blogger Blog Related Posts CSS by Daryadi.S: http://weblogwap.blogspot.com */

/* Related posts parent container */
#related-posts {
  display:block;
}

/* "Related posts" h3 heading */
#related-posts h3 {
  font-size:22px;
  font-family:Verdana;
  color:#222;
}

/* List parent container */
#related-posts ul {
  padding:0;
  list-style:none;
}

/* Post item */
#related-posts ul li {
  margin-bottom:10px;
}

/* Post title  */
#related-posts ul li .title {
  font-size:16px;
  font-family: Arial;
  color:#999;
  text-transform:uppercase;
}

/* Thumbnail container */
#related-posts ul li .thumbnail-container {
  float:left;
  margin-right:15px;
  padding:5px 5px 2px 5px;
  background:#efefef;
}

/* Thumbnail image */
#related-posts ul li .thumbnail-container .thumbnail {
  border:1px solid #fff;
}

/* Post summary/text snippet */
#related-posts ul li .summary {
  display:block;
  font-family: Lato;
  font-size: 14px;
  color:#333;
}

/* Clearfix for floating thumbnail image */
#related-posts ul li .clearfix {
  clear:both;
}

Comments on "Fast Load & Asynchronous Related Posts Script for Blogger Blog using JQuery"