How to Add Related Post widget with Thumbnails | Tech Blog in Africa for How TOs

Wednesday

How to Add Related Post widget with Thumbnails


Welcome


Share... ☂

Share on Facebook
Share on Twitter
Google Plus
Related post widget with thumbnails is a really good widget because it helped to increase page view of your blog. It’s also helped your blog to reduce bounce rate of your blog. That’s why you need to use this widget on your blog.

Image



Step 1
First Log In to your Blogger Dashboard.

Step 2
Click Theme Option and Click Edit HTML Option

Step 3
After That Press Ctrl+F and Find </head> tag in your template.

Step 4
Copy the Below Code and Past it before the Closing tag.


<!--Related Posts with thumbnails Scripts www.zealmat.com-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_jM8-wHc3NKY/TPyEXEv34II/AAAAAAAAADE/pgs7crFJ_D4/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";

</script>
<script src='http://olusegun-fapohunda-calculator.googlecode.com/svn/wiki/related-post-with-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts www.zealmat.com-->


Step 5
Now find any of below code in your template

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

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


Step 6
Now immediately after found any of these lines (whichever you could find) place the code snippet below.

<!– Related Posts with Thumbnails Code Start www.zealmat.com–><!– remove –><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><script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;’ type=’text/javascript’/></b:loop><script type=’text/javascript’>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script></div><div style=’clear:both’/><!– remove –></b:if><b:if cond=’data:blog.url == data:blog.homepageUrl’><b:if cond=’data:post.isFirstPost’><a href=’https://www.zealmat.com’ rel=’dofollow’>Related Post Widget</a></b:if></b:if>


Step 7
Now Save your template.


Step 8
You have Successfully Add Related Post Widget with Thumbnails to your blog.







WIDGET ARRANGEMENTS
PROCESS 1. If you want to change total no of posts displayed in your blog posts, Edit the following line of code.
var maxresults=5;

PROCESS 2. To Change the title of your related post widget, change the following line of code.
var relatedpoststitle=’Related Posts’;

[quads id=3]

I hope this tutorial of How to Add Related Post Widget with Thumbnails is useful to all of you, If you like this post please share it with your friends and if you have any question regarding this post then you can ask with me in below comment box.

Post Summary

Post Title:

How to Add Related Post widget with Thumbnails

Post Description:

How to Add Related Post widget with Thumbnails

Show zealmat love by Copying the Below link and Share on Social Media
Share :

zealmatblog

No comments:

Post a Comment

Create your website from just N299/Month with DomainKing.NG.

P.S: Want me to help you personally? If yes, you can buy my helpful eBooks or Hire me now!

Do you need original SEO ready articles for your blog or website? If yes, hire Mathias Amodu on Fiverr. Expect simply the best from me.







Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.