List Related Post Widget For Your Blog

on
This tool is one of the best 5 Essential Tips Any Blogger Should Not Avoid to keep their blog alive
The link related post is easy to install, just follow the installation guide bellow.

  1. Log in to your Blog, in the blogger dashboard, click on Template>>Edit HTML>>thick Expand Template.
  2. Press Ctrl + F and search for
Find this line of code </head>

Paste bellow code above </head>
<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
background: #F8F8F4;
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
background: #F8F8F4;
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
background: #F8F8F4;
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:#383838;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
background: #F8F8F4;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:#F8F8F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1-JOWtip1VgKxCASlS8hba3IMyJkyITo0F7X2OZ5QUiSbS1ZzSgTaMv8XCXDFli_IWWJnFSd2O5uHk3AiDiXSXQF2__KRc0DhHoGeUtB3biOrPLZd2urpM62VewnT8bA6DbEsEyNOLsz/s1600/bullet.gif) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://www.brilliantinfo.net/2012/07/list-related-post-widget-for-your-blog.html' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End--> 
Then search for any of the two line of codes:

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

 Past the bellow code just after any of the above line of code
<!-- Related Posts Code Start-->
<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>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->
You can set the maximum number of item to be displayed by editing maxresults=5
You can also change color:#383838 to your desired color if you understand hexadecimal color codes

Recommendations:

Comments

Post a Comment