Search

You may also like

Facebook has offered $1billion to take over Snapchat
Blogging General Tech Tutorials

Facebook has offered $1billion to take over Snapchat

Reports reaching us indicates that Facebook has reportedly offered to

OnePlus 3 Price, full Features and specification
Blogging General Tech Tutorials

OnePlus 3 Price, full Features and specification

The OnePlus 3 android smartphone has just been released into the market,

Sony Xperia E4 Price full Features and specification
Blogging General Tech Tutorials

Sony Xperia E4 Price full Features and specification

The Sony Xperia E4 a new amazing product from Sony

How To Add Related Posts Widget To Blogger with Thumbnails

How To Add Related Posts Widget To Blogger with Thumbnails
Today i show you how to add related posts widget to your blog, having this makes readers of your blog will spend more hours on our blog, if they see more related posts. If you really want to increase the page views of your blog, then you must be showing related posts under each post on your blog.

This related posts widget will show a new related posts section below every post on your blog. The related posts widget fetches the related posts from those posts having the same label as the current post.

How To Add Related Posts Widget To Blogger with Thumbnails



To add the related posts widget you will have to follow the steps below:.




==> Log in to your blogger dashboard
==> 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 to Template > Edit HTML 
==> Click inside the HTML and use CTRL+ F to find </head>






Right above </head>, paste the 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://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/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=”https://www.naijainformation.com/2016/05/how-to-add-related-posts-widget-to.html” target=”_blank” ><font size=”1″ color=”black”>[Get Related Posts Widget for Your Blog]</font></a>’);
}
//]]>

</script> 


<!–Related Posts Scripts and Styles End–>


Click on Save template


Now 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′>





Now paste the code below immediately after any of these lines (whichever you could find): 






<!– Related Posts with Thumbnails Code Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<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=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!– Related Posts with Thumbnails Code End–>


Click on Save Template.


Now, go ahead to view one of your blog posts. You should see the Related posts below it.


Note: If you did not add a label (category) to a post, you might not see the related posts below it.


You can alter the CSS rules if you want to customize the look and feel


Feel free to share your recommendations or or questions via the comment form.

Next post Previous post

Your reaction to this post?

  • LOL

    0

  • Cool

    0

  • Fail

    0

  • Angry

    0

  • Love

    0

You may also like

Gionee F5 Price, full Features and specification
Tech

Gionee F5 Price, full Features and specification

Today we have Gionee F5 phone powered by 1.5GHz octa-core

The Tecno Camon C10 Leaks Online, a bold Successor to Tecno Camon C9
Tech

The Tecno Camon C10 Leaks Online, a bold Successor to Tecno Camon C9

Words are fast spreading, as reliable sources have it that

itel Partners with SLOT for Exclusive Sales of its 1st 2GB RAM and 4G LTE device in Nigerian Market.
Tech

itel Partners with SLOT for Exclusive Sales of its 1st 2GB RAM and 4G LTE device in Nigerian Market.

Leading mobile phone giant, itel Mobile has announced an exclusive

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Comment

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person. Required fields marked as *