You Might Also Like Related Posts Gadget Below Blogger Posts

Wednesday, 20 February 2013

You Might Also Like Related Posts Gadget Below Blogger Posts

Related posts gadget is very important for a blog to engage users within the blog. This gadget is also famous with the name "You Might Also Like". This gadget is placed just below the each post so that when a user ends the post, he could find some posts for his interest. This gadget is very helpful to decrease the bounce rate of your blog.

Normally, this gadget shows the all posts that are related to the above post. You can set the number of post links in this gadget accordingly.

The implementation of this gadget is very simple and easy, you can try this.

Do the following instruction to apply this gadget.

Go to your blogger dashboard and select "Templates" from "More Options"
Now Download full template from "Backup/Restore" and click on "Edit HTML"
Make check mark on "Expand Widget Templates" and search the following by pressing "ctrl+F"

</head>

Above this tag paste the following code:

<style>
#related-postz { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 20px; font-weight: bold; font: 18px Arial,sans-serif; margin-bottom: 10px; }
#related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-postz .widget h2, #related-posts h2 {
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em; }

#related-postz a { text-decoration : none; }
#related-postz a:hover { text-decoration : underline; }
#related-postz ul { border : medium none; margin : 10px; padding : 0; }
#related-postz ul li {
display : block;
background : url("http://images.bloggerzhelp.com/Bloggerzhelp/favicon%20bloggerzhelp%20copy.png") no-repeat 0 0;
padding-left : 21px;
padding-bottom : 1px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
} </style>
<script src='http://blogfilez.googlecode.com/files/related.js' type='text/javascript'/>

You can change the font size from 1.2em to accordingly in both locations font-size: 1.2em;.

Now search for this tag:

<div class='post-footer'>

And just above this paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-postz'>
<font face='Verdana' size='4'><b>You Might Also Like:</b></font>
<b:loop values='data:post.labels' var='label'><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=2"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script><div align='right' style='font-size:11px'><a href='http://bloggerzhelp.com'>Widgets for blogger</a></div></div>
</b:if>