How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<!--Related Posts with thumbnails 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;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type=text/javascript>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0vxfF_MHiz0EAzpTG1YQixKwB59uz7_mP_MWYoDhk20SZOa0i2aA11Gu7OjaK8Rw-j3J4VRyQCDFFgpahsQgs259cpN-pZ5cScdyYJZZYBRVYCtZOMQuLrltQMQELHd6T9kEowCBiYFb/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src=http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js type=text/javascript/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

    <div class=post-footer>

Step 6. And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails 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>
<script expr:src=&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot; type=text/javascript/></b:loop>
<script type=text/javascript>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style=clear:both/>
<!-- remove --></b:if>
<b:if cond=data:blog.url == data:blog.homepageUrl><b:if cond=data:post.isFirstPost>
<a href=http://helplogger.blogspot.com><img alt=Blogger Tricks src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHMb73o1xO9ntaU5T8CgV3v8rrA8McU_jR0N-Xy8inCvEy9LoLCuZeYeIe9XNBQuFzEDzHUwm2sQ2fwzO54CZQoBngYe9EGWG6BMOEoaaDE_2lUVgXb4fn9x6FNE9q5u06k2Mj6Kw890ai/s1600/best+blogger+tips.png/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

Credit goes to: bloggerpluggins.org . Modified by me

Read More..

A Simple Related Posts Widget For Blogger

In the last tutorial, ive been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So lets begin adding it!

How to add Related Posts Widget to Blogger

Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox

Step 2. Find the below tag

</head>

Step 3. And just above it, paste the following code:

<!--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: #555555;
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: #1399CF;
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://helplogger.googlecode.com/svn/trunk/related_posts.js type=text/javascript/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

Note:
- if you want to change the size and color of Related Posts title, change the bolded values (17 for the font size and black for the color)

-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;

Step 4. Now find (CTRL + F) the below line:

    <div class=post-footer>

Step 5. Just above it, paste the code below:

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

Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.

Step 6. Save Template

Enjoy!!!

Read More..