Related Post Widget For Blogger

By this time every blogger use related post widget to represent more related sources to their readers. Using related post widget under every blog post is very important for several cases. So in this article, I will show you how to add related post widget for blogger blog. I will also provide a beautiful responsive related post widget with a thumbnail.

RELATED POST WIDGET FOR BLOGGER WITH THUMBNAIL:

We have already known some importance of related posts. So now let’s see the process to add it under every blogger post. By default, blogger doesn’t provide related post widget. That’s why I have designed this widget for you.

Step 1. Sign into the blogger dashboard. Click on the Overview g0 to Template section. Now click on the “Edit HTML” and search and paste the above code just before 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: #f2f2f2;} #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;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #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://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->

Step 5: Now open the search box again and search

Step 6: Just above Paste the following 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://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq05jth6yWMRIRtigg4OReNNxeHcyrbuIzMAr2Z847eonlwojwn9hCBb6BsLCj9Vq_0EBk_qjyRU5sLels8BaziJ8b9N-6R7PuyudBCQMWRqpy1lkjzDdXwtDz_G2b-CDtUGe9toniq-rC/s1600/best+blogger+tips.png'/></a></b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Step 7: Save your Template.

Note:

1. If you want to change CSS style according to your template design you can change it in related posts CSS code.

2. You can change no. of posts to appear in related posts. Just change number in maxposts=4; in red color

I hope you find this article is very helpful to you so don’t forget to share this post in your network.