In the last tutorial, ive been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So lets begin adding it!
How to add Related Posts Widget to Blogger
Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox
Step 2. Find the below tag
Step 3. And just above it, paste the following code:
Note:
- if you want to change the size and color of Related Posts title, change the bolded values (17 for the font size and black for the color)
Read More..
How to add Related Posts Widget to Blogger
Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox
Step 2. Find the below tag
</head>
Step 3. And just above it, paste the following code:
<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond=data:blog.pageType == "item">
<style type=text/css>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}
#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type=text/javascript>
var relatedpoststitle="Related Posts";
</script>
<script src=http://helplogger.googlecode.com/svn/trunk/related_posts.js type=text/javascript/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
Note:
- if you want to change the size and color of Related Posts title, change the bolded values (17 for the font size and black for the color)
-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;
Step 4. Now find (CTRL + F) the below line:
Step 5. Just above it, paste the code below:
Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.
Step 6. Save Template
Enjoy!!!
-to change the background color on mouseover, replace the color value in blue;
Step 4. Now find (CTRL + F) the below line:
<div class=post-footer>
Step 5. Just above it, paste the code below:
<!-- Related Posts Code Start-->
<!--Remove-->
<b:if cond=data:blog.pageType == "item">
<div id=related-posts> <b:loop values=data:post.labels var=label> <b:if cond=data:label.isLast != "true"> </b:if> <b:if cond=data:blog.pageType == "item"> <script expr:src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6" type=text/javascript/></b:if></b:loop>
<script type=text/javascript> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->
Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.
Step 6. Save Template
Enjoy!!!
