[Blogspot] - Add related posts widget to blogger with thumbnails - GOOGLE-VINA

How to Add related posts widget to blogger with thumbnails ?
This post is about adding a stylish related posts widget with thumbnails to your blogger blog. When a visitor visits your website this widget will display list of related posts below the current post. It encourages your blog visitors to click on the these related posts and read them . Thus it helps in increasing page views of your blog and it also create interest in your blog.
The custom CSS code we offered enabled users to change font colors of the text title, edit thumbnail sizes, borders and change background with an image.It attracts visitors more and provide some neat and clean suggestions.The presence of thumbnails of the related posts in this widget is another advantage . These thumbnails decorate the overall look and feel of this widget and attracts more visitor clicks. The steps are really easy.

[Blogspot] - Add related posts widget to blogger with thumbnails

It is very simple to add this widget into your blog. Just follow the steps published below:
First backup your Blogger blog’s template.
Then click on the Edit HTML to edit your blog’s template in the text editor.
Find the below given code (Using Ctrl + F)

]]></b:skin>
Copy and Paste the below given codes just above the code shown above.

<!–Related Posts with thumbnails Scripts and Styles Start–><b:if cond=’data:blog.pageType == "item"’><style type=’text/css’>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}#related-posts-text {font-size: 0.9em !important;font-weight: 700 !important;line-height: 1.45em !important;font-family: Helvetica,Arial,sans-serif !important;width: 100px;padding-left: 3px;height: 105px;border: 0pt none;margin: 3px 0pt 0pt;} #related-posts h2{font-family:verdana !important;font-size:18px !important;font-weight:bold;margin:9px 0px !important;color:#666 !important;border-bottom:0px !important;border-top:0px !important;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D; }#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><!– www.techiterian.com –><script type=’text/javascript’>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pifL0m1coVID1nwR94jbMwpXCOuoDa7y1xLVMrcZm7yl_GdeuBQUXoQpdpRxfeEe02E22F_9IqG5C-QgcrXhuatgjcExxK3_7WECTt1sG7XUbPqNn9H3NEKCgPiDcW7gRMwUSn6K5pI/s1600/no_image.jpg";var maxresults=5;var splittercolor="#DDDDDD";var relatedpoststitle="You Might Also Like:";</script><script src=’https://googledrive.com/host/0B-dv4rsl5_uZXzg0Z1FOVWhLSFk’ type=’text/javascript’/></b:if><!–Related Posts with thumbnails Scripts and Styles End–>

After that find this code:

<data:post.body/>

Place the code given below just below it to show related posts after your blog post.

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

Save your template by clicking on the Save button.

Source: http://www.techiterian.com/2014/02/add-related-posts-widget-to-blogger.html