[Blogspot] - Stylish Related Posts Widget with Thumbnails for Blogger

Stylish Related Posts Widget with Thumbnails for Blogger

Hi Friends! Today in this tutorial I will show you how to add related post widget for blogger. Generally there are also many other related post widget/gadget. But this one also contains the thumbnail of post so we can also see the thumbnail if the article has an image included. It is very significant to add the related post gadget because it will boost the visitors to your website or blog without spending too much time on search engine optimization, if you go to the depth and then you will effortlessly discover that related post widget or gadget works at the main source of SEO level.

[Blogspot] - Stylish Related Posts Widget with Thumbnails for Blogger

It is very simple to related post widget to your blogger blog.
Related Posts with Thumbnail and Title with easy customization.
The script will automatically take related posts from the labels and shows up any four of the related posts.
Doesn’t affect the loading time of the blog.
How to install this widget to blogger?

Go to Blogger –> Template –> Edit HTML.
search for </head> tag.
Copy and paste below code just above </head>

<!–Related Posts with thumbnails Scripts and Styles from www.techiterian.com Start–>
<!– remove –><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<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’>
vardefaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXhkjOouXlZeHoT0UsYLRFOJiZHGRHJ-UAHr0xuD8W0TBm8VpgL1US2WNjibnpxRgqc-8FuUWf0q56PQZ9KTRD5whVZA4OxWlI0h5K1sQkZ3Kz1-TV0E2HFSLlM3XcMvsza560CMyfzIDP/s1600/no_image.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;You Might Also Like:&quot;;
</script>
<scriptsrc=’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.techiterian.com End–>

Next search for <div class=’post-footer’> and then copy and paste below code just above it

<!– Related Posts with Thumbnails Code from www.techiterian.com Start–>
<!– remove –><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>
<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=6&quot;’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script><div id=’attb’ align=’bottom-right’><a href=”http://bit.ly/171T6jg”>Get</a></div>
<ahref=”http://www.techiterian.com/2014/02/stylish-related-posts-widget-with.html”><imgsrc=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaskDBcrVLl2xnJ3ljOfP_-OFWl_3QNaMo6S9KG7a18lI2PJS_7Jrmt6il4fee-xO-1ax0fQLPxulrDNG-Xc4mXFu__Fy9GRVTw2qdYdOanEBxeSPENKa1cPrBt_GD-j1sl1a1XEZ6vXc/s1600/relatedposts.png” /></a>
</div><!– remove –></b:if>
<!– Related Posts with Thumbnails Code from www.techiterian.com End–>

And you are done..
Share this post if you like this. If you encounter any problem, please feel free to comment below to get solution instantly.

Source: http://www.techiterian.com/2014/02/stylish-related-posts-widget-with.html