How To Add Related Posts Widget To Blogger

How To Add Related Posts Widget To Blogger: In This Article you learn How To Add Related Posts Widget To Blogger. By Adding Related posts widget in your blog you can increase your page views Quickly. This widget is very helpful to get more Audience Engagement and also you can get 70% more page views by adding this widget in your blog. This Blogger widget is showing Related Posts at the bottom of the blog posts and above the comments. This Widget is helping the visitors to view the related content to new visitors so this plugin is increase your page views. This is a Stylish related posts Widget Designed by TwoTricks.com as you seen in below image this Related post widget is looks like the below image.

How to Add Related Post Widget for Blogger

• Go to the Dashboard > Template > Edit Theme.
• Press CTRL + F and Search Bar is Appeared. Find This </head> in your template.

</head>

• Just Copy and Paste Below code above the </head> tag.

<!-- twotricks.com 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;}  /* Width */
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;} /* Related Posts */
#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 title color */
#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-->

Note: If you want to change the  width height of the image then change red values.
          If you want to change the Related post title color and size then Edit blue color.

• Press CTRL + F and Search Bar is Appeared. Find This <div class='post-footer'> in your template.

<div class='post-footer'>

• Paste Below Code Above the <div class='post-footer'>.

<!-- Twotricks.com 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'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOEN149UV5cJvkSHsSNRf_Kr-g4qsLALpCnQHPRDC5jmaYWZtlG-HDh004ZpjGTkkzy4qPrYyX3MGPMJ8bqaPP6XJx9TW1xbfBTK4NmNBNV_w8Tr4HETRPbc5PI6OR7M6iU4pLvnDJJVfn/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Edit value 5 in maxresults=5 with the number of post you want to display on your blog post.

• Now just need to save your theme you and Enjoy Related post Widget.

Hope so you like the post how to Add Related Posts Widget To Blogger so share this post with your friends and don't forget to leave your feedback in comments.