How to add related posts with thumbnails in blogger

In this article I will show you how to add related posts with thumbnails in blogger. It is very important for all bloggers to show their related posts of current post. It has many benefit to do so and the main benefit is it will help you to increase your page views.

How to add related posts with thumbnails in blogger

1- Sign In to your Blogger account. (https://www.blogger.com/).
2- Navigate to your blogger's dashboard and choose your desired blog which you want to customize.
3- Now in the left menu click on "Theme" and also click an "Edit HTML" button under live on Blog section.
4- Your Blog theme will be open in editable mode, now press CTRL+F to enable search box in editor window and search for </head> tag.
5- Copy and paste below code just above the </head> tag.

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

6- Now search the this "<div class='post-footer'>" code again in your HTML window search box using CTRL+F, You got the result of your search two times now here you must stop your search when you get your desired result in second time.

Enjoy Free Tools: Resize Social Media Images Online

7- Now just above it <div class='page-footer'> copy and paste below code.

<!-- Related Posts with Thumbnails Code Start--> <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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; 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'> <img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFM8mvVT99mkOcTuX-L78vBGPXwfb-PCMamxs8MOaGnmN4Yqc9CqJRFpDqkypMuCSy-yWDLp85YZVJtda8COabub4YKnkixB1pZkEqSlFk3ISG_0hVxZSO8iNNcWOCe0gEdUqnhD7G4-RA/s1600/best+blogger+tips.png'/> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->|

8-  Now save your theme and view your post.