Adding a list of related posts at the end of article is a tried and tested way to keep the visitors engaged with your blog for longer duration. It gives them a reason not to click the back button, thus increasing your blog's page views and average visit duration; and decreasing bounce rate.
There are plenty of related post widgets for Blogger but I was not satisfied with them (in fact, I am never satisfied with any piece of code). Therefore, I decided to write my own, with the following features:
- Light weight vanilla JavaScript code — no JavaScript framework required
- Customizable widget layout — just about everything can be styled using CSS
- Post thumbnails support — because a thumbnail image is worth a thousand words
- Google Analytics integration — clicks are logged in Google Analytics
- Lazy-loadable — the script can be loaded asynchronously
- Easy installation — does not require editing Blogger template
Try the Script on a Live Blog
To test the appearance and functionality of the script on your blog, open a post page in your browser and run the following code in the JavaScript console:
(function() {
var c = '#blogger-related-posts ul { padding: 0; list-style-type: none; text-align: center; } #blogger-related-posts li { float: left; margin: 0 1%; width: 18%; } #blogger-related-posts a { display: block; } #blogger-related-posts span { display: block; margin: 0 auto .5em; width: 72px; height: 72px; } #blogger-related-posts ul:after { content: ""; display: block; clear: both; }';
var s = document.createElement('style');
s.type = 'text/css';
if (s.styleSheet) {
s.styleSheet.cssText = c;
} else {
s.appendChild(document.createTextNode(c));
}
document.getElementsByTagName('head')[0].appendChild(s);
var t = document.createElement('script');
t.type = 'text/javascript';
t.src = '//salmanarshad2000.github.io/blogger-related-posts-widget/related-posts.min.js';
document.getElementsByTagName('head')[0].appendChild(t);
})();
Note that (i) post feeds must be enabled and (ii) posts must be labeled in order for the script to work.
Download the Script
The script is available under MIT license (yup, free software) and it can be downloaded from the Blogger Related Posts project page on GitHub.
Customize the Appearance
As mentioned earlier, the appearance of related posts widget is controlled by CSS. Here is an example of the widget, all spiced up using background colors, round corners and drop shadows (screenshot taken from this blog):
It is even possible to change the layout, like totally, with CSS:
Google Analytics Integration
If Google Analytics script is present on the page, the script will automatically log the clicks on related posts in Google Analytics; no setup or configuration is required for this. The activity will appear in the Standard Reporting > Content > Events section of the Google Analytics profile. This feature will help you gauge the effectiveness of related posts widget.
