Any Blogger or website owner receives traffics on internet for their blog/site from mainly four resources viz. search engines, referrals, social media and direct traffics. But, any of the four resources may not give guarantee to the blog owner that they will keep live visitors engaged with your blog for long time. This is because after reading the landing page, users generally exit the site, resulting 100% bounce rate.
One of the best way to keep your blog readers for long time on your blog is to show them related stories at the end of each blog post. They might be interested to read more related posts/tutorials/articles at the end of the webpage they have landed upon either directly or through searching key words ranked highest for your blog or by the referrals on social media.
Accordingly, we have developed a free widget that interlink your blog posts and display posts from the same labels under which any particular blog post is labeled. Thus, after reading the current post, live visitors of your blog find more related stories tagged with the same category they are interested in and that are relevant to readers of the current blog post. In other words, if you have posted seven posts under label named INSURANCE then at the end of each and every individual post you will be able to show the rest of blog posts filed under that insurance category.
How to Show Related Posts with Titles, Summaries and Thumbnails
No sign up required for adding swtRelatedPosts widget into your blogger blog. This widget will fetch and show randomly recent as well as earlier posts linked to the current post tagged with the same category/label.
Step-1:
Login to your blogger blog and navigate the template tab from left sidebar menu options.
Step-2:
Click on Edit HTML text button to open blogger template editor where you will see a bunch of html codes related to your blogger blog. Now, click anywhere in the template editor and press Ctrl+F to get a small search box which will help you to find codes quickly.
Step-3:
Now, find closing </head> tag and paste this JavaScript file just before/above </head>
<script type='text/javascript'>
var swtRelatedNumbers = 4;
var swtRelatedSnippets = 195;
var swtRelatedNoImage = "http://3.bp.blogspot.com/-d8PWBQOQmFU/VJQEXl1eorI/AAAAAAAAAGA/i77MNZ4S9ns/s1600/swtRelatedPosts-Thumbnails.png";
var swtRelatedRight =true;
</script><script src='https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtRelatedPosts-JavaScripts.js'/>
Step-4:
Search for closing ]]></b:skin> tag and paste the following CSS codes just above/before ]]></b:skin> tag.
/*****************************************
SWT Related Posts
******************************************/
.swtLinkedPosts {
width: 100%;
}
.swtRelated {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
width: 280px;
height: 145px;
display: inline-block;
}
.swtRelated:hover {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .35);
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, .35);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .35);
-webkit-transition-duration: 0.9s;
-moz-transition-duration: 0.9s;
-o-transition-duration: 0.9s;
transition-duration: 0.9s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
}
.swtRelated a {
font-family: Georgia,'
Times New Roman',serif;
text-transform: capitalize;
color: #0d495e;
display: inline;
font-size: 11px;
line-height: 1;
}
.swtRelated img {
margin-top: 25px;
height: 85px;
padding: 3px;
width: 85px;
float: left;
border: 1px solid #fff;
-webkit-border-radius: 100px 10px 500px;
-moz-border-radius: 100px 10px 500px;
border-radius: 100px 10px 500px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
overflow: hidden;
}
.swtRelated img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.swtRelated p {
border-top: 1px solid #e5ebea;
color: #f5f8f1;
font-size: 10px;
font-style: italic;
height: 6em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
Step-5:
To read the labels of your each blog posts to fetch interlinked posts, you have to place this code where your blog posts labels are shown i.e. within post-footer-line. That means you have to search for <data:label.name/> in your blog template editor. You will see the following lines
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
And just before </b:loop> paste the following line of codes which reads all posts indexed under each label under which posts are tagged.
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=swtReadLabels&max-results=8"' type='text/javascript'/>
Step-6:
Lastly, we are going to display related posts under each blog post. So, find <b:includable id='postQuickEdit' var='post'> and immediately above it you will see a closing </b:includable> tag.
Now, just above/before closing </b:includable> tag, paste these codes in accordance with your preference:
Show swtRelatedPosts only on Post/article/tutorial pages
<div class='post-footer-line post-footer-line-4'>
<span class='swtLinkedPosts'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
swtRelatedPosts();</script>
<div style='clear:both;'/>
</b:if>
</span>
</div>
Show swtRelatedPosts on all blog pages including Home Page
<div class='post-footer-line post-footer-line-4'>
<span class='swtLinkedPosts'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
swtRelatedPosts();</script>
<div style='clear:both;'/>
</b:if>
</span>
</div>Show swtRelatedPosts on all blog pages excluding Home Page
<div class='post-footer-line post-footer-line-4'>
<span class='swtLinkedPosts'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<script type='text/javascript'>
swtRelatedPosts();</script>
<div style='clear:both;'/>
</b:if></b:if>
</span>
</div>Step-7:
Finally, click on the save template and enjoy swtRelatedPosts widget under each single blog post/static/search label page of your blogger blog.