How To Add Stylish Related Posts With Thumbnail In Blogger

Posted by | 1 comments
Related Posts With ThumbnailThis tutorial has been already flooded on internet but after a request from my friend, I decided it to post on my blog. The most effective benefit of this widget is that it keeps your blog engaged with visitors. It shows some related posts with the current post. It works in blogger on the 'label' in which post is categorized. Now without wasting time, I am going to deliver the tutorial. Here's how to add related posts widget in blogger.

Steps

1. Log in to Blogger, then go to Template Section Of Your Blog.

2. First make a backup of your template. Then click on Edit HTML.

3. Now, find </head>, you can use Ctrl + F to find it and paste the following code above it.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#related-posts img {
height:120px !important;
width:150px !important;
border-bottom:1px solid #ccc;
}
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 10px;
}
#related-posts h2 {
font-size: 18px !important;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
text-shadow: none !important;
color: #5D5D5D !important;
font-family: Arial,sans-serif !important;
margin-bottom: 0.5em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a {
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
<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='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

Must Read: Add Responsive Sitemap To Blogger Blog

4. Now, you have to paste below code where you want the widget to appear. If you have add any subscription widget or social sharing widget below the post, then you can add it above or below as your wish. If you have not added any of them then find this <div class=”post-footer”> and paste the code below it.
<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>
5. Now, save template and done, you have successfully added  the related posts widget in blogger. If you will hard to do it then comment below. I will help you.

Must Read: How To Add Custom Domain To Blogger-With Screenshot

1 comment:

  1. Artikel yang sangat bermanfaat, terima kasih admin :))
    Kunjungi balik ya
    Bandar Bola
    http://clayton88.blogspot.com | http://goo.gl/Ie7IEb | http://goo.gl/eQV9d3 | http://bit.ly/1sUU8dl | http://pour.pw/957597 | http://goo.gl/CI4bLf | http://goo.gl/lNMX3D | http://goo.gl/cAQcMp
    Kumpulan Berita Menarik
    Agen Poker
    Agen Bola
    Agen Casino

    ReplyDelete

About The Author

My photo

Nothing Is Special About Me, But I Can Do Something Special. I Am A Young Blogger Blogging As Part Time And Completing My Education. Well ! I Don't Know Very Much About Myself.

Alexa Rank!

Recent Comments

Contact Form

Name

Email *

Message *