Related Post Widget without thumbnail

Related post widget gives the classy look to your blog. Also you know that it gives you proper linking with your post or articles. Below you can see Related Post Widget without thumbnail.

So now I am going to show you how to install this beautiful widget:

1. First of all create backup of your template. To do this Login to your dashboard. Now click on DESIGN > EDIT HTML and save your template.

2. Now click on "expand widget". Press "ctrl+f" and find

</head>

and replace this code with

<!--Related Posts Scripts and Styles 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 .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqJPiPX9P4io8RK6Y3kfKXknZuK0xlcbtkAhozVz1SRADtmgbnMl19555kva-7yViNqUfDBF2JGVw68dVF30cHW0S7okqwKmPRnf2oO02XqnYI4zydkVivRdl7a8ykQY5ijSiCn9cixmM/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>

 

If you want to change the title of related post widget than edit this line in the above code

var relatedpoststitle="Related Posts";

3. Now find this line

<div class='post-footer-line post-footer-line-1'

if you can't find this line than try these

<p class='post-footer-line post-footer-line-1'>

Just after these code, paste the code shown below 

<!-- Related Posts Code 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://trickndtips.blogspot.com'></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

4.Now save your template and  you are done. Preview it

If you like our post, Than make a small donation to Tips N Tricks.

Make a donation to Tips N Tricks

It will Help us to maintain this blog.

Subscribe via Email

Enter your email address to get Latest Information

Delivered by FeedBurner

Follow @leadingdynasty