Recently, a post was shared on how to Add Related Post Widget with Thumbnails to Blogger, but unfortunately, our readers kept demanding for the type of related post widget that is being used on this blog (i.e. related post widget in list format without thumbnails). So today, I want to share how I was able to add a related post widget beneath every post on this blog.
Before I share the method I use in adding the related post widget beneath every post on my blog, I want to share how it has helped JustNaira.com. Related post widget shows the list of post related to posts with the same labels, and this has increase our blog page views and decrease in blog bounce rate. Apart from these two, related post widget is a good SEO practice. Related post widget is a good widget every bloggers must have on their blog.
How to Add Related Posts Below Your Blog Posts
1. Log in to your Blogger Dashboard and Navigate to Template ==> Edit HTML and checked the Expand Widget Templates Check box. Then use (CTRL+F) to search for </head> tag in your templates.
2. Add the code below just Before/Above the closing
</head>
tag.
<!--JustNaira-Related-Posts-Starts--> <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; background : url("http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png") no-repeat 0 0; 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='https://justnaira.github.io/blogger-tricks/justnaira-recent-comments-gravatar.js' type='text/javascript'/><!--JustNaira-Related-Posts-Stops-->
3. Now search for this code line:
<data:post.body/>
4. And after that line, paste this code:
<!--JUSTNAIRA-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><!--JUSTNAIRA-RELATED-POSTS-STOPS-->
5. Note: In case you have use the Auto Read More Hack on you blog and you have more than one
<data:post.body/>
in your blog template, search for any of the code below and then past the code in step 4 above after it.
<p class='post-footer-line post-footer-line-1'>
or
<div class='post-footer-line post-footer-line-1'>
or
<div class='footer'>
6. Save your template.
Related Post Widget Configuration
To change the total no of posts displayed beneath your blog posts, Edit
to the actual number of related post you want to see at the end of each post on your blog.
Finally, after implementing this widget on your blog, if you fail to add label to your posts during publication, nothing will show up in the related post section. So always make it a point of duty to label your blog posts.
That’s all folks.
how do assign for h4 tags for word “related post” and how i change it?
Good day,
I have tried running this in my HTML codes but I can’t see any of these lines
or
or
Please help me.
Tnx alot bro, as i was always said ‘I rank/rate dis blog as No.1 Naija blog dat teaches bloggers newbies like me nd odas. Sir my question is dis: In d code provided above ‘On how to add related posts below every posts of blogger’, I c somtin like dis:
http://justnaira-css-js.googlecode.com/svn/related-post.js. And also:
…
My question: please am i going to change JustNaira to my blog name ?.
Thanks alot bros, u can inbox me @ nicemaster2020@gmail.com
@Mxtr Nicemaster, follow the procedure as outlined. You are not required to replace the JS URL with your blog address.
nice tutorial
Hi,
Did that and im very pleased.
Wanted to ask how can i make it bigger?
I mean yours are big and clear and mine are too small.
Thanks!
@Tamar, increase the font from 11 to anything. Search for
font : 11px Verdana;in the CCS code.After thanking you I want to learn- how you have designed your Comment Box? Thanks in advance for helping by giving answer.
@ HelpsLink, which blogging platform are you using.
I implemented all the steps but to no avail. It shows and works fine on mobile but refuses to show on my desktop view. Even my Linkwithin stopped working all of a sudden. What can be the problem? Please, help out.
@Adesanya Codedtee, contact admin@justnaira.com to assist with the installation.
I really enjoy your posts, as usual a very detailed and fine article, i can’t agree more with each and every point that you’ve mentioned here. Kudos again!
thank bro, u hv bn of great help to me n i believe it is so 4 everyone who has viewed ur posts. Keep it up.
cool….worked for me and my blog @ http://trustednaija.blogspot.com
please, the related post is not showing…..what do i do?
@Gc Godson, please follow the steps one after the other. It will work.
You’ve got great articles on your site. I really appreciate.
Keep the great work going. Thanks
Thanks for sharing
i am not being able to copy the code. please help
@sugam, you can now copy the code.
thank you bro, it helps me !
@Rakesh Rajbhar, change that in the css code.
I don’t wana use green bullet….i would like numbering…could u help me out
Thnx for this nyc post….I was looking for This!
thank bro, u hv bn of great help to me n i believe it is so 4 everyone who has viewed ur posts. Keep it up.