In 2012 we learned how to add related post with thumbnail but today, we are going to discussed how to add a text like related post to our blogger blog like the image below.
This widget/ gadget is just like the yet another related post (YARPP) plugin, the only different is this widget has a hover effect which makes it more sleek and beautiful to use. Let’s not bore you with talks, let’s move to the main event.
ADDING RELATED POST WIDGET THAT SHOWS ONLY TITLE TO YOUR BLOGGER BLOG
Must Read: ADDING RELATED POST WIDGET WITH THUMBNAIL TO YOUR BLOGGER BLOG
Before we move on always make sure that you make a proper backup of your template before proceeding.
Go to your blogger blog dashboard >>> Click Template >>> Click Edit HTML >>> Tick Expand Widget Templates.
Have you done that? Now locate the below code.
[php]</head>[/php]
Note: To make the search more easily, simultaneously press the ctrl + f key to bring out a search box below your browser.
Right above the tag paste the below code
[php]<!–Related Posts Scripts and Styles Start–>
<!–Remove–><b:if cond=’data:blog.pageType == "item"’>
<style type=’text/css’>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #000000;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}
#related-posts ul li:hover{
background-color: #b0520e;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type=’text/javascript’>
var relatedpoststitle="Related Posts";
</script>
<script src=’ http://onenaijablog.googlecode.com/files/related post widget.js’ type=’text/javascript’/>
<!–Remove–></b:if>
<!–Related Posts Scripts and Styles End–>[/php]
Have you done that? We have done the first part of the show, now let’s move to the second part which is the main part.
Still on the “Edit HTML”. Now locate the below code
[php]<div class=’post-footer’>[/php]
Have you seen it? Now right above it paste the below code
[php]<!– Related Posts Code Start–>
<!–Remove–>
<b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’> <b:loop values=’data:post.labels’ var=’label’> <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=6"’ type=’text/javascript’/></b:if></b:loop>
<script type=’text/javascript’> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!–Remove–></b:if> <!– Related Posts Code End–>[/php]
Now save your work and voila! Your related post will start showing. Tell me how simple is that?
Must Read: ADDING A SLICK “BACK TO TOP” WIDGET FOR BLOGGER & WORDPRESS
Well do you still have problems that you would love to share? Then do use the comment box below. If you have any comment or thoughts, then please do tell us using the comment box below. Remember that your comments and thoughts are very important to us and well appreciated.
Do you love the post? Then do like us, share us and recommend us to friends to gain what you’ve gained. Do not forget to subscribe to our feed for your latest post update on the go.
Thank for this beautiful widget.
It would be more convenient for me if I’m allowed to upload your js file on my own host!
I’m looking forward to hear from you.
TIA
Hello,
Glad you like you liked it. why not! you can as long as you know where you got it from. no problem
Is there a way to instead of making the widget find labels, it instead matches related contented by title?
when finding related post with content, it wont be accurate except using label but if you’d like it that way, you can still play with the js file to alter with it.
Would you be able to blog an explanation of that?
It’s a long process.. i might bring it up in a post. So just put your heads up
Hi there, thanks for this post. Is there a way to have related post show for only 1 label? For example, I have a label titled Videos. I only want related posts for that label. How could I do that with the above code?
Thanks for the help.
Hello Garry,
It is already working with labels. just label your post wisely and it will bring out that particular label.
The widget works, but the design is too simple. Can you please share something with a bit better design.
Hello Wasee,
There are two type, one with thumbnail and the simple one which is this. So if this one is too simple you can use the one with thumbnail.