Skip to content

ADDING A COOL RELATED POST WIDGET TO YOUR BLOGGER BLOG

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.

related post for blogger

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 == &quot;item&quot;’>

<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;

}

&nbsp;

#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=&quot;Related Posts&quot;;

</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 == &quot;item&quot;’>

<div id=’related-posts’> <b:loop values=’data:post.labels’ var=’label’> <b:if cond=’data:label.isLast != &quot;true&quot;’> </b:if> <b:if cond=’data:blog.pageType == &quot;item&quot;’> <script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;’ type=’text/javascript’/></b:if></b:loop>

<script type=’text/javascript’> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </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.

10 thoughts on “ADDING A COOL RELATED POST WIDGET TO YOUR BLOGGER BLOG”

  1. 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.

Leave a Reply to gioitrelocthuy Cancel reply

Your email address will not be published. Required fields are marked *