Code for Related Post Widget for Bloggers

Code for Related Post Widget for Bloggers

With Implementing this Code in your Template you will able to show your visitor Related Post Articles in every post at the end. This widget show all related post which have same labels so include as many labels as possible in every post below right hand side box in your  editor. But remember these label should really related with post otherwise you will make this widget source of spam. So do not add labels which are not in any way related to that specific post.


Now here is Code and Implementation guide how to add this widget. But before making any changes you have to download your current Template by Click Download Full Template at top in Edit HTML section with this backup you will be able to revert template to its original state if any problem occurred during adding this widget.

Step. 1- Login your blogger account.

Step. 2- Click Dashboard then Layout then Edit HTML, Take backup of your template as said above.

Step. 3- Click Expand Widget Templates box  above at template editor.

Step. 4- Search </head> tag it will be somewhere in middle your template, if you are not able to find it then press ctrl f ( control f) in your keyboard a popup box appear, search this tag by copy pate in this search box.

Step. 5- Copy and Paste given code below just one line above it as shown below.

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtu5vExi7iXmRigkg6YFvrJr5UMfu8Ut-6h1MQrgmuhV5P9SxMrIP7byFui8EufaPYZ7nlMKZttdWQ6XCnKzJRSYecGwZoJdaaIpE_TNZY_gKX5lS2Pom4SPgswiC1V7_MY1BCPhjz2RM/s320/xmag.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px none #cccccc;
}
</style>
<script src='http://sites.google.com/site/scriptsfamily/codes/Related_Post_Widget.js' type='text/javascript'/>

</head>

Step. 6- Final Step for adding Code. Search tag in blue color   in your template, search method is same as given above step-4 ( ctrl+f). It may be different in different template so search one by one until you find correct tag.

<p><data:post.body/></p>

or

<div class='post-body>

or

data:post.body/

or

class='post-body

Step. 7- Now add the following code just below the above code you search in step-6 like shown below, remember i include the example with each code as well for ease do not confuse code in Black and tag in blue.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=10&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Step. 8- Save your template and view your any post. Remember Related post will not shown if you are view through Label url, it will appear only with post url.

If related Post appear but post not shown it means you have not any post labeled with same label more than one or two. Go in post edit section and label more than two post with same label.Remember as i told earlier at starting to not make spam labels, label should be related to posts in anyway.

Few More Tricks:

> In default related post set to 10 but if you want to increase or decrease them change the number 10 with any number you want in code max-results=10 . Advise do not exceed the no.10.

> If you have any problem to show widget at appropriate position the try to add in step-7 just below this tag

<p class='post-footer-line post-footer-line-3'/>

</div>

Code here......

Note: Some templates may not have this tag.

Then try to implement some where below any of these line given below.

<div class='post-header-line-1'/>

or

<div class='post-header-line-2'/>

or

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

or

<div class='post-footer-line post-footer-line-2'>

Note: Remember that code will goes after the closing end tag related to start tag, in case of above codes it is </div> because it is end tag of starting tag <div>

That all

If you any problem ask in comment section.

Share: