Oct 14, 2016

Stylish Related Posts Widget for Blogger with Featured Thumbnail

Stylish Related Posts Widget for Blogger with Thumbnail - So you're here to find a suitable and stylish looking related posts widget with a featured thumbnail for blogger blog. In previous, I've shared many other related posts gadgets but anyone of them not designed by me. So today I'm here to introduce an excellent, stylish related posts widget for BlogSpot Blog users. Look below screenshot of this related posts blogger plugin.

Related Posts Widget, Blogger Related Posts Gadget

I've designed this widget because many of you've asked me to share a unique, stylish, and responsive related post widget for Blogspot blogs. So here I'm today to share this excellent related posts plugin. Many of us are using the third party related posts widgets like; LinkWithIn and Outbrain. But now you don't have any need to use third party widgets and give him a backlink because this advance related posts widget fulfill your all requirements. :)

Click To Read - How To Improve Google Search Ranking and Get Rank Higher?
Another Stylish - Stylish Contact Form For Blogger! Add to Static Page

Features Of Related Posts Gadget

I don't want to praise my work guys but just want to tell you some essential features of this widget and tell you why you should use this widget. Read features;

  1. You can easily customize it using CSS language as per your need.
  2. Related posts below on each blog post with title and featured thumbnail.
  3. The script I'm using, automatically take post links from the current post label, so the posts displayed will be very much related to the content.
  4. Fast to load - Have no special effect on log loading time.
  5. Showing Four Related posts under each post.
  6. Mobile-Responsive layout design.
  7. There is no need to say; it is also stylish in look.
Okay, praising is over. ;) Now let's get straight to work and add related posts to blogger blog. Follow all below steps carefully.

Note: Before making any change inside blogger template code area, Must download a backup copy to save yourself from any issue if persist after adding this widget.

How To Add Related Posts Under Each Post In Blogger?

STEP 1] As usual go to blogger.com >> Click On Template >> Now Click On Edit HTML.

STEP 2] Using CTRL+F OR CMD+F search for </head> tag and just above of it paste below JavaScript code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css'>
Related Posts Code
#related-posts {
margin:0 0 0px 0!important;
padding:0px 0!important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
#related-posts:hover{box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.7) !important;}
#related-posts h2{
margin: 0px !important;
padding: 20px !important;
color: #fff;
font-weight: normal;
background: #650692;
background:linear-gradient(135deg,#2403a9 0,#8f0284 44%,#006d68 100%);
#related-posts a{
font-family: arial!important;
display:inline-block!important; float:left; position:relative; overflow:hidden;
#related-posts a:hover{
color: #111;
.attb{opacity:0; height:1px!important;}
#related-posts img{
border: 1px solid #111 !important;
padding: 1px !important;
height:80px !important;
margin-right: 5px !important;
overflow: hidden;
#related-posts img:hover{
<!--Related Posts with thumbnails Scripts and Styles Start-->
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=4;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Content:&quot;;
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
catch (error){
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== &#39;undefined&#39;) thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;}
if(relatedTitles[relatedTitlesNum].length&gt;60) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+&quot;...&quot;;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i &lt; relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
relatedTitles = tmp2;
relatedUrls = tmp;
function contains_thumbs(a, e) {
for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;
return false;
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== &#39;undefined&#39;) splitbarcolor=splittercolor; else splitbarcolor=&quot;#DDDDDD&quot;;
for(var i = 0; i &lt; relatedUrls.length; i++)
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length&gt;0) document.write(&#39;&lt;h2&gt;&#39;+relatedpoststitle+&#39;&lt;/h2&gt;&#39;);
document.write(&#39;&lt;div style=&quot;clear: both;&quot;/&gt;&#39;);
while (i &lt; relatedTitles.length &amp;&amp; i &lt; 30 &amp;&amp; i&lt;maxresults) {
document.write(&#39;&lt;a style=&quot;text-decoration:none;padding:5px;float:left;&#39;);
if(i!=0) document.write(&#39;border-left:solid 0.5px &#39;+splitbarcolor+&#39;;&quot;&#39;);
else document.write(&#39;&quot;&#39;);
document.write(&#39; href=&quot;&#39; + relatedUrls[r] + &#39;&quot;&gt;&lt;img style=&quot;width:200px;height:150pxpx;border:0px;&quot; src=&quot;&#39;+thumburl[r]+&#39;&quot;/&gt;&lt;br/&gt;&lt;div style=&quot;width:90%;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font:Arial;font-weight: bold; font-size: 16px;&quot;&gt;&#39;+relatedTitles[r]+&#39;&lt;/div&gt;&lt;/a&gt;&#39;);
if (r &lt; relatedTitles.length - 1) {
} else {
r = 0;
    <!--Related Posts with thumbnails Scripts and Styles End-->


1 - Replace 4 to any numeric number to reduce/increase posts to show.
2 - Replace 60 To any Numeric Numeric to reduce/increase the length of titles.
3 - Replace Related Content: with any text to change the main heading.

STEP 3] Now search for <div class='post-footer-line post-footer-line-1'> and just below of it baste below code.

<!-- Related Posts with Thumbnails Code Start-->
                      <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;'>
                              <script class='ripple-effect' 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'/>
                            <script type='text/javascript'>
<a class="attb" href="https://www.mybloggerguides.com/2016/10/stylish-related-posts-widget-for-blogger-with-thumbnail.html" title="stylish related posts widget for blogger"><img src="http://4.bp.blogspot.com/-YqKVaJOAoOI/Uatpgd8LP9I/AAAAAAAALXo/d66SAUZp6f8/s1600/relatedposts.png" /></a>
                        <!-- remove -->
                      <!-- Related Posts with Thumbnails Code End-->

STEP 4] Now click on Save Template button.

That's it. Now open any blog post and see it live on our BlogSpot blog. This widget shows posts from the particular label, so you must have to add one to each post on your blog.

Most Recommended - Add Specific Label Sitemap With Featured Thumbnail To Static Page.


So above guide is about "How To Add Stylish Related Posts Widget with Featured Thumbnail to Blogger Blog?" I've tried my best to make this guide as easy as possible, but in any case, you're facing any trouble in adding this widget or customizing it, then let me know via dropping a comment below. I'll be happy to help you.

Do share with your friends and also subscribe us to get late blogger widgets and more upcoming Tricks related to BlogSpot direct into your mailbox for free.

Thank You!
Stay Blessed and Stay Happy!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.