Simple Related Post Widget For Blogger Blogspot

What is Related Post Widget?

Answer – Related Post widget is actually a list of posts in a blog that are related to the current blog post. This way let your blog visitor know that there are also other relevant contents that might help a visitor.

Why do each blog should have a related post widget?

Answer – This way you engage blog visitors on blog for longer time. This also helps to reduce the bounce rate of blog. Maximum bounce rate is not good for your monetized blogs. People visits your blog post from any search engines or social sites, looks only one page and then moves to some other sites.

Every blogger should include Related Post widget that ultimately helps to relatively increase your blog page views.

There are so many methods available on internet; however the one that I am listing below is quite simple and more effective.

Steps – Considering you have already an account on www.blogger.com

1)  Sign in into your blogger account. Once you logged in, blogger will show you the list of all your blogs.

2) Click on blog name to open overview page.

3) Click on Template à Edit HTML à Proceed and then tick the Expand Widget Templates. These steps are given in below image.

Blogspottips4u - Editing Blogger HTML

4) Now search </head> tag in the opened code window and just above the </head> tag paste following code.

<!--Simple Related Post Widget Starts-->

<style>

    #related-posts{ float: left; width: 480px; margin-top: 20px; margin-left: 5px; margin-bottom: 20px; font: 11px Verdana; font-weight: bold; margin-bottom: 10px;}

    #related-posts .widget{ list-style-type: none;margin: 5px 0 5px 0; padding: 0; }

    #related-posts .widget h2, #related-posts h2 { font-size: 20px; font-weight: bold; margin: 5px 7px 0; padding: 0 0 5px; }

    #related-posts a {text-decoration: none; }

    #related-posts a:hover { text-decoration: none; }

    #related-posts ul { border: medium none; margin: 10px; padding: 0; }

    #related-posts ul li { display: block; background: url(&quot;http://blogspottips4u.googlecode.com/files/Logo2_A1_For_Related_Post_Widget.png&quot;) no-repeat 0 0; margin: 0; padding-top: 0; padding-right: 0;padding-bottom: 1px; padding-left: 21px; margin-bottom: 5px; line-height: 2em; border-bottom: 1px dotted #cccccc; }

</style>

<script src='http://blogspottips4u.googlecode.com/files/simple-related-post-widget.js' type='text/javascript' />

<!--Simple Related Post Widget Ends-->

5) Next, Search following code

<data:post.body/>

6) Paste following code just above or below <data:post.body/>. If you paste above this tag then Related Post widget will appear on above of every post contents. If you paste the code below this tag then Related Posts will appear below every post contents.

<!-- Simple Related Post Widget Starts-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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 != &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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'>    removeRelatedDuplicates(); printRelatedLabels(5);

</script>

</div></b:if>

<!-- Simple Related Post Widget Ends-->

7) The code is configured to display 5 related post by default. If you want to increase or decrease the number of related posts then just search printRelatedLabels(5) and replace 5 with your desired number. That’s it.

8) The code is also configured to not show Related Post widget on Home page. If you want to show this widget in Home page also, then please either comment or remove highlighted code in yellow.

9) Save the template and you are done.

Sharing is Caring »»

Tweet