Thanks for reading my previous posts. Now here is a wonderful piece of code that will help to display related posts beneath each of your blog posts, along with thumbnails/pictures. with this code you can change the color, the size and the amount of thumbnails to appear.
You can also twist the code to show on homepage, which ever way you want it, at the end of the day the desired result will be achieved. The related articles are chosen from other posts in that same category/label/tag. With this you will make many of your visitors to click through other interesting topics and stay more on your site, thereby having more page views.
It is as simple as ABC, Lets get started.
Steps adding the Related Posts Widget to Blogger/Blogspot
Step 1. Go To Blogger Dashboard > Template > Edit HTML
Step 2. Click anywhere inside the template's code and press the CTRL + F keys
Step 3. Search for this piece of code by typing it inside the search box (hit Enter to find it):
You have to be careful with the codes
</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 == "item"'><style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->
Note:
- to change the width and height of thumbnails, modify the 100px value in red
- to change the color and size of related posts titles, change the value in blue
- remove the line in violet if you want the related posts to be displayed in homepage too
Step 5. Now find the following code (you might find it twice, stop at the second one):
<div class='post-footer'>
Step 6. And just above it, copy and paste the below code:
<!-- Related Posts with Thumbnails Code Start-->
<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_thumbs&max-results=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</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/AVvXsEgORhGC9E-m_S9TbBFkAUQNe6tUnHnxZhW4yiEDztXW_a-xF7sJaiHCAj2h_dgqevZMFNibKAVKzu83KxoZAkX9505cw4GQpIWNgUUMmHsMJtdIPtkJbEtRwmTPiINm4HDnZRaTODyi122Z/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->
Note
- change the 5 value from max-results=5 with the number of posts you want to be displayed- if you want the related posts to be displayed on homepage too, then remove the lines in violet
Update! If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the
tag which can be found above this line (CTRL + F to find it):
Click on the screenshot for more info:
Step 7. Save the Template
If you have any questions please join the discussions and all your questions will be answered
Comments