How to Add Related Posts Widget To Blogger Blog
Many customers of your website may spend other period on my blog after viewing a submit, and if they find more related updates. If you really want to improve the traffic inside your blog,
you must be showing accompanying posts below an post on blog. In this submit, I am sharing with that you, how I developed one widget/plugin to my personal website , that displays set of related posts here each post upon my Blogger website.
Both the related updates widget will show a new accompanying posts component here your submit. Both the related updates widget fetches the related updates from anybody updates having both the same label as current submit.
Lots readers inside your website will waste more time upon our website on reading one post, if they will see more accompanying posts. Once you would like to increase both the page views of your website, then you ought to be giving related updates below each submit on your blog. This post, I'm giving you, just how I developed a widget/plugin to be able to my blog , that displays list of accompanying posts here an post upon my Blogger blog.
Both the related updates widget shows a new accompanying updates section here your post. Both the related updates widget fetches both the related updates from those updates having the equal label as latest post.
To add the related posts widget you have to take the steps below:.
Steps get started
1. Log in to your blogger dashboard
2. From there go to Layout > Edit HTML and tick the expand your widget templates box (option on the right). If you are using new Blogger dashboard, go toTemplate > Edit HTML
3. Click inside the HTML and use CTRL+ F to find </head>
Right above </head>, paste this code below.
<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 350px;
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/AVvXsEh976hIxONDTE564AA6lv2p9qzrzVMOom5aHmnceIniq_JtQnKSfbwsnw8vAd23S_xEj3uxcpHdfKW6pVKxaBFocTZ8YwX_K5NG99n3rx0JZGYW-UpnnQGN_s8gU7NOTTf9pjVvwnWFCBE/s200/greentickbullet.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 dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a href="http://musbite.blogspot.com/2013/09/how-to-group-and-create-labels.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>');
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->
Click Save template
carefully use CTRL+F to find this line of code
<div class='post-footer-line post-footer-line-1'>
OR
<p class='post-footer-line post-footer-line-1'>
copy and paste the code below after any of these lines
<!-- Related Posts with Thumbnails Code Start-->
<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 != "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=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
Now Click Save Template.finished
check now,go ahead to view one of your blog posts. You should see the Related posts below it.
IMPORTANT: If you didnt add a label (category) to a post, you might not see the related posts below it.
learn how to add categories
How To Group And Create Labels Categories for Blogger Blogspots
thanks for taking your time to read, Feel free to share your questions via the comment form.
0 comments:
Post a Comment