Add Related Posts Widget to Blogger or Blogspot
It be better to display related or similar articles below your articles or posts on your blog. This way your readers would easily know that there are related articles you written and they can further read.
The steps to adding related posts widget is easy. It would take less than 3 minutes add it on your blog.
Before starting, make sure to download the related post JavaScript file or ccopy and paste its content to your desired file.js. Then make sure to upload it online where it will be available for import on your template. I recommend you to upload it on Weebly.com, SigMirror.com or HotLinkFiles.com to get a DIRECT LINK to that file.
Step 1: Most important of all, backup your template incase something go wrong or messed up. Goto www.blogspot.com "Layout" portion, then go to "Edit HTML" section. Download present template and make sure to secure the copy on your file storage device.
Step 2: Click on "Expand widget templates" and look for this code:
</head>and on top of it insert the following code:
<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://www.weebly.com/..../relatedposts_forblogger.js' type='text/javascript'/>
<!--RelatedPostsStops-->Replace the red link above with your own direct link.
Step 3: Look for the code:
<data:post.body/>Under it, insert the following code:
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->To limit the maximum number of related or similar articles to display under the post, just change max-results=xx by the number you like.
Finally, save your template and test. Related Posts widget should be located under your article or post. Do remember to add categories or labels before you publish your post. Otherwise, no related post will be displayed.
Hope this tutorial helps.
Paul Labis is a young software engineer who is passionate in programming. He is one of the co-founder of CDO-IT Group and an expert in web-based Java programming. He is a graduate of BS-Information Management in Ateneo de Cagayan-Xavier University and an experienced software engineer with focus on Java technologies.
0 Comments