Search this blog:

How to add a nice looking related posts widget to your blog

Web Design Generator
Why should your visitor read only one article when he can get interested in related stuff?
Ever thought about increasing your sales?
You can now do something that will dispay 5 related articles below your blog post, you just need to open your template’s HTML then:

Search for the tag </head> and right above it add:

<!-- Related posts -->

<!--Related Posts widget for blogger Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://avdhootblogger.googlecode.com/files/avdhootblogger.relatedpostwidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts widget for blogger End-->



Now find the following code.

<div class='post-footer'>


And just above it, copy and paste the below code:

<!-- Related Posts widget for blogger 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><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.avdhootblogger.com'><img alt='widgets for blogger' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts widget for blogger End-->



Save it.




Pleeeeeeease comment and share, I’ll be seeing ya.
Thx for reading.
author

About Author:

Matheus is a Web Designer who decided to start a social network where users beyond talking, could also share Free Blogger Templates, the website http://akecheta.com, nevertheless, it wasn't enough for him, so he decided to create the Akecheta Blog, where users can get tips and tricks on how to customize their blog layout and functionality.

0 comments:

Post a Comment

Please leave a very helpful comment related to the article, and your comment will be approved whatever it has a link on it or not, because I know most people comment for spamming, so if you want to advertise your business, it's cool as long as you help me too.