Subscribe For Free Updates!

We'll not spam mate! We promise.

How to add Related Post Text Widget to Blogger ?


How to add Related Post Text Widget to Blogger ?
Related Post Text Widget For Blogger
Today i m going to share three stylish and awesome related post widget for blogger. Personally i really like this widget , related post widget is decreasing the bounce rate of your blog. There is also many related post widget for blogger some of them are looking very good and some of them are looking very ugly. And those which have images also increase your blog loading time. This related post widget have no images and will load faster , so i hope you like the styles of this widget.

How to add Related Post Text Widget to Blogger ?

  • Goto blogger account.
  • Goto template and click on EDIT HTML.
  • Now find the below code in your template.
</head>
  • Copy the below and paste it just before/above it.
 <!--Related Posts Starts www.truebloggingtricks.blogspot.com -->
<script language='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 < 6) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<!--Related Posts Stops www.truebloggingtricks.blogspot.com -->

  •  Find again <data:post.body/> by using Ctrl+f function and paste the below code just below/after it.
<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=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
  • Next find again the below code.
 ]]></b:skin>
  • Now choose of the style and insert the CSS code just above it.


How to add Related Post Text Widget to Blogger ?

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment

Site Status

Flag Counter