Add Cool Related Post Widget with Thumbnails for Blogger

Related post widget is created for taking the juice of page views for blogger blog, now competition is quite difficult and you know ever...

Related post widget is created for taking the juice of page views for blogger blog, now competition is quite difficult and you know every advertiser want a good rank website blog to invest their money and trust. Widgets inventory is awesome today because it makes our work easy and comfortable without any higher knowledge of coding and programming even some widgets force the upcoming visitors to become daily subscribers as I published my previous article in which I explained that how can we add new recent post widget in blogger blog, it helps many webmasters as well as newbie for user friendly service.

You saw many related post widget, but they all are web loading eater because they belong to a third party it has some futile scripts and code which is not good for your blog in SEO speed factor, so always use professional made widgets likewise Iam come with new related post widget which was totally less loaded and SEO friendly check out the preview above in starting image.

High Benefits of This Widget

1. It will increase your page views as well as unique visitors.
2. It is fully optimized with correct CSS style, and it is in black color with thumbnail effects.
3. It doesn’t take your site speed, it is well optimized according to the SEO speed factor.
4. It will easy setup below your post section.

After taking some interesting facts about this widget, it's time to install this useful widget on blogger blog.

Visit Blogger Homepage.

Go to Template>> Click on Back up Restore for safety.

Click on EDIT HTML>> Press CTRL+F and a search box will open on right side.

Search the </head> and paste the below code above </head> tag.

<!--Related Posts with thumbnails Scripts and Styles from www.protechnify.blogspot.com Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
margin: 1px 0px !important;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left
bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
height: 300px;
width:590px!important;
padding: 0px !important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !
important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 0px !important;
padding: 10px !important;
color: rgb(255, 255, 255);
font-weight: normal;
text-transform: capitalize;
background-color: rgb(18, 18, 18);
border-bottom: 1px solid rgb(0, 0, 0);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left
bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
text-decoration:none!important;
}
#related-posts a{
font-weight:bold!important;
color: white;
font-family: arial!important;
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
}
#related-posts a:hover{
border-right:0px!important;
margin: 10px 0px 10px 10px !important;
background:none!important;
text-decoration:underline!important;
}
#related-posts img{
border: 1px solid #666 !important;
padding: 1px !important;
width: 100px !important;
height: 90px !important;
margin-right: 15px !important;
overflow: hidden;
background:#444!important;
}
#related-posts img:hover{
opacity:0.5;
}
#attb{ font-size:5px!important;
padding-top:200px;
padding-bottom:5px;
padding-left:560px;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="You Might Also Like:";
</script>
<script src='https://related-posts-atb-brandnew.googlecode.com/files/related%20posts%20js.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles from www.protechnify.blogspot.com End-->

 Then, Search <div class=’post-footer’> and paste the below code just above it.

<!-- Related Posts with Thumbnails Code from www.protechnify.blogspot.com Start-->
<!-- remove --><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>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs
("<data:post.url/>");
</script><div id='attb'
align='bottom-right'><ahref="http://bit.ly/171T6jg">Get</a></div>
<a href="http://protechnify.blogspot.com/2015/06/add-related-post-widget-thumbnails-blogger.html"><img src="http://4.bp.blogspot.com/-YqKVaJOAoOI/Uatpgd8LP9I/AAAAAAAALXo/d66SAUZp6f8/s1600/relatedposts.png" /></a>
</div><!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code from www.protechnify.blogspot.com End-->

Click on Save Template and check the awesome professional made Related post widget below every post section.

Connected Artice: Add Custom Webkit Scrollbar with Hover Effects in Blogger Blog.

More Over

You can also customize and play from this widget just like you can change “You Might Also Like” with your desire phrase or you can change width, height, background colors and much more with your skills knowledge of CSS and Javascript. The important note: If you want to increase numbers of related posts, so you can change easily by changing ‘4’ because in this widget's default is 4. If you like this widget so don’t forget to share this post with your other friends.