You are here » Home » Blogger Widgets » Stylish Related Posts Widget with Thumbnails for Blogger

Stylish Related Posts Widget with Thumbnails for Blogger

by

In my older posts, i already posted many related posts widget with thumbnails of different styles which is designed by me or others. but today i found an awesome stylish related posts widget for blogger which originally designed by my friend Imran Uddin (founder of alltechbuzz.net) actually he was designed it for himself but today i find it interesting to he also shared widget on their blog that can other blogger users can use it for their blog. Imran introducing about this widget and says that most of bloggers might be using third party related post widgets like nRelate ,Linkwithin, Outbrain.. etc but we should know that the widget’s advantage and disadvantages before the processing. you know that? what is disadvantages of third party widgets? as imran says, it’s effect to our blogs loading time, that is one of disadvantage is enough for us and also I’m agreed with imran. so, here’s related posts widget with thumbnails  for blogger Which works independently.

Also Read:- Stylish Recent Posts Widget With Thumbnail From a Particular Label

Features :

  • Anyone can customize it easily.
  • Related Posts with Thumbnail and Title.
  • The script will automatically take related posts from the labels and shows up any four of the related posts.So the posts shown will be very much relevant to the content.
  • Doesn’t effect the loading time of the blog. (This is the main advantage of this widget.)

Preview :

related-posts-widget-with-thumbnails

How to install this widget to blogger?

  • As usual go to Blogger –> Template –> Edit HTML
  • Then search for </head> tag
  • Copy and paste below code just above/before </head>
<!--Related Posts with thumbnails Scripts and Styles from www.alltechbuzz.net 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'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;You Might Also Like:&quot;;
</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.alltechbuzz.net 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.alltechbuzz.net 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>
<a href="http://www.makingdifferent.com/stylish-related-posts-widget-with-thumbnails-for-blogger"><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.alltechbuzz.net End-->
  • That’s it !

Now save your template and check your blog, you will see related posts each and under every post of your blog.

Customization :

You can see that, highlighted numbers and name in above code, that can you understand and customize it easily. You can change the width of the widget by editing into above css highlighted 590px with your blogs width. also you can easily change the title “You Might Also Like” with anything like : Related posts, you should also see, recommended posts etc. next, choose that how many posts you want to display in the widget, default is ’4′ but you can increase it as well.

if you have any trouble while processing then you can feel free ask by comment below.  :)