Search this Blog

Thursday 23 August 2012

Add Related Post To Blogger with Thumbnail

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 >>Design >>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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7S586S_AytpS4pwQXcSwnRaZw8JZT_FGsR6unKWhWPvRMS1_UUWp3zXOLJPXVT_p19ZhKghs3UZlHOtOwIdj6kBQG-i5ENy5L0V1SgWvR7oSVzp3niug7R1Wyh2yfpbyW6XNtM3RfO2EU/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
-to change the default picture when no images are available, 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-line post-footer-line-1'>

If you can't find it, then search for this one:

<p class='post-footer-line post-footer-line-1'>

OR:

<data:post.body/>

Step 6. Copy and paste the below code just after any of these lines

<!-- 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='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRrmjaL9Z1zDqx7cpVLTSWu3mBBr41g5t-5_-bXz0g3wf6juDJGjmVXvs2Jjtvg0xBxkxPiOfHrMVmwe6acPcf12qd7F3bY-994ffrJdFZe8pQm59BZPvRvJuvtsucTkbye-bsVOtNUsQw/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note: - change the 6 value from max-results=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

That's it 

26 comments:

  1. Massagеs аrе the one in Wenshа Еrotiс Massage ТimogWensha Εrotiс Ϻassage
    waiting areaThe Maѕsage The Wensha Antiρolo dining
    aгеa for Tea Tіme.

    Feel fгee to ѕurf to my webpage tantra

    ReplyDelete
    Replies
    1. Add Related Post To Blogger With Thumbnail >>>>> Download Now

      >>>>> Download Full

      Add Related Post To Blogger With Thumbnail >>>>> Download LINK

      >>>>> Download Now

      Add Related Post To Blogger With Thumbnail >>>>> Download Full

      >>>>> Download LINK dZ

      Delete
  2. What i do not realize is actually how you're no longer really much more well-liked than you may be now. You're
    very intelligent. You already know therefore significantly with regards
    to this topic, produced me for my part believe it from numerous numerous
    angles. Its like women and men are not fascinated unless it's something to accomplish with Lady gaga! Your individual stuffs great. Always care for it up!

    Feel free to visit my homepage :: http://www.theonosis.com

    ReplyDelete
  3. Ahaa, its pleasant conversation on the topic
    of this paragraph here at this blog, I have read all that,
    so at this time me also commenting here.

    Also visit my web-site :: http://www.wikitunes.de/index.php?title=Rid_Themselves_Of_Stretch_Marks_Quickly

    ReplyDelete
  4. Its not my first time to visit this site, i am browsing this website dailly and obtain pleasant
    facts from here every day.

    Also visit my page :: www.pregnancyhelper.in

    ReplyDelete
  5. Myself Mathews, working as a software tester in leading software development firm. Having a blog is very useful for me to share my experience and get assistance from co-software testing professionals. You can explore my blog @ Software Training .

    ReplyDelete
  6. Thanks for sharing this informative blog. I did Software Testing Course in Chennai at a reputed Software Testing Training Institutes in Chennai which offers real time testing courses. This is really useful for me to make a bright career.

    ReplyDelete

  7. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for Learners.. CCNA training in chennai | CCNA training chennai | CCNA course in chennai | CCNA course chennai

    ReplyDelete
  8. Java is one of the popular technologies with improved job opportunity for hopeful professionals. Java Training in Chennai helps you to study this technology in details.If you are looking for best Java Training Institutes in Chennai reach Fita academy.

    ReplyDelete
  9. Hi, Your blog is really very informative and useful for me. Thanks for sharing this valuable blog.
    Regards..
    Unix Training in Chennai

    ReplyDelete
  10. There are lots of information about latest technology and how to get trained in them, like Hadoop Training Chennai have spread around the web, but this is a unique one according to me. The strategy you have updated here will make me to get trained in future technologies(Hadoop Training in Chennai). By the way you are running a great blog. Thanks for sharing this. FITA chennai reviews

    ReplyDelete
  11. Thanks for sharing this niche useful informative post to our knowledge, Actually SAP is ERP software that can be used in many companies for their day to day business activities it has great scope in future.
    Regards,
    SAP training in chennai||Best SAP training in chennai|SAP Training in Chennai|sap training institute in Chennai

    ReplyDelete
  12. Thanks for sharing content like this once again. Keep sharing content like this.

    ejb training in chennai

    ReplyDelete
  13. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.

    Java Training Institute Bangalore


    ReplyDelete
  14. I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.

    Best DevOps Training in Chennai

    ReplyDelete
  15. BCA Colleges in Noida

    CIIT Noida provides Sofracle Specialized B Tech colleges in Noida based on current industry standards that helps students to secure placements in their dream jobs at MNCs. CIIT provides Best B.Tech Training in Noida. It is one of the most trusted B.Tech course training institutes in Noida offering hands on practical knowledge and complete job assistance with basic as well as advanced B.Tech classes. CIITN is the best B.Tech college in Noida, greater noida, ghaziabad, delhi, gurgaon regoin .

    At CIIT’s well-equipped Sofracle Specialized M Tech colleges in Noida aspirants learn the skills for designing, analysis, manufacturing, research, sales, management, consulting and many more. At CIIT B.Tech student will do practical on real time projects along with the job placement and training. CIIT Sofracle Specialized M.Tech Classes in Noida has been designed as per latest IT industry trends and keeping in mind the advanced B.Tech course content and syllabus based on the professional requirement of the student; helping them to get placement in Multinational companies (MNCs) and achieve their career goals.

    MCA colleges in Noida we have high tech infrastructure and lab facilities and the options of choosing multiple job oriented courses after 12th at Noida Location. CIIT in Noida prepares thousands of engineers at reasonable B.Tech course fees keeping in mind training and B.Tech course duration and subjects requirement of each attendee.

    Engineering College in Noida"

    ReplyDelete
  16. Add Related Post To Blogger With Thumbnail >>>>> Download Now

    >>>>> Download Full

    Add Related Post To Blogger With Thumbnail >>>>> Download LINK

    >>>>> Download Now

    Add Related Post To Blogger With Thumbnail >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete
  17. Chance wrong issue nation discuss local camera single. Because eight book provide live total. Simple I people two former customer

    ReplyDelete