Skip to main content

Related post widget for blogger with thumbnails and summaries

     After search for related post widget every where on google to add one for me into my blogger blog , I found one perfect related post plugin that can be easily included in blogger template . This widget is perfect just because it works smoothly without slowing your blog's loading speed . It is true if you use other type of related post widgets you will suffer from slow rendering spreed which takes too much time in loading web page.
     The source for this widget is , which always helps me in designing my blogs. To check how this widget works just see this widget below this post for demo.

Related :  How to Create Categories in blogger

Steps to add related post widget to blogger with animated effects and Summaries and thumbnails .

  1. Log in to your blogger account and go to dashboard of your blog .
  2. Click on Template and click on edit HTML button .
  3. Click on textbox where your code of template exists .
    Press  CTRL + F to open blogger search box to find something in your code.
  4. Copy </head> and paste it on your blogger search box and hit enter to find this tag inside your template.
  • After finding this tag , just paste Below script just above

</head> tag .
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4 ; // number of entries
to be shown
var relatedmaxnum = 75 ; // the number of
characters of summary
var relatednoimage =
s1600/no_image.jpg "; // default picture for
entries with no image
<script src="http://
posts-with-thumbs-and-summaries.js" />

Customization :

Increase or decrease number of post that are displaying by modifying 4 in relatedPostsNum = 4 .
Change relatedmaxnum = 75 ; to increase or decrease number of characters displayed in post summary .
  • Now you got related post widget but to make it look beautiful you need to add below css and your related post widget will become awesome .
  • Now  Paste the following code above
    the same </head> tag:
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area
width: 120px ;
height: 200px;
border-right: 1px solid #E5E5E5;
display: inline-block;
.relatedsumposts:hover {
background-color: #F7F7F7;
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
.relatedsumposts a {
/* link properties */
color: #linkcolor ;
display: inline;
font-size: 10px;
line-height: 1;
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px ;
padding: 5px;
width: 82px ;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0,
0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0,
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor ;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-

Customization :

Use comment lines to customize the appearance of related post widget.
  • Again open search box on Blogger and search the following code
<a expr:href='data:label.url'
cond='data:label.isLast !=
  • Now add below code snippet just below above found code .
<b:if cond='data:blog.pageType ==
<script expr:src='&quot;/feeds/posts/
default/-/&quot; + + &quot;?
results=50&quot;' type='text/javascript'/>
  • The entire code after adding above code will look like below code .
<b:loop values='data:post.labels'
            <a expr:href='data:label.url'
cond='data:label.isLast !=
<b:if cond='data:blog.pageType ==
<script expr:src='&quot;/feeds/posts/
default/-/&quot; + + &quot;?
results=50&quot;' type='text/javascript'/>
  • At last , find below code
<b:includable id='postQuickEdit' var='post'>
  • After finding the above code , just add below code above the  </b:includable> tag,
<b:if cond='data:blog.pageType ==
  <div class='post-footer-line post-footer-
<div class='relatedpoststitle'>RELATED
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated
<div style='clear:both;'/>
  • Click on save template and see that all changes are saved or not . If you find difficulties just comment below and our team will help you in installing related post widget in your blog.

Note: This related post with animated effects using css will only work if you have proper labels and more than 2 posts per labels in your blog. Otherwise you will not see any related post in your articles.


Post a Comment

Comments that are not related to this post will be deleted.
Spammers please stay away.

Popular posts from this blog

22+ Social Bookmarking Sites List Without Registration | Working

     Social bookmarking sites are very helpful in gaining quality backlinks no matter they are no follow or do follow ones, but they are of very good quality and high Page Rank.       These sites gives you boost in traffic and also help you in better search engine rankings(SEO benefit ) without doing any user registration.       However, some people tried to get back links of do follow type and then their balance of dofollow vs nofollow  backlinks becomes unstable. In this case when you have more do follow back links as compared to  no follow ones, a manual review of backlink profile is done by google's anti-spam team.      So its better if you create both dofollow and no follow backlinks to your site. So I am giving you below a list of dofollow social bookmarking site for 2020-2021(Updated).       Register there and start optimizing social sites. Don't start spamming because these sites are trusted ones. In future they can help you in many ways, so its better to run your accou

Top 100 forum sites list in india

     Forums are the best way of generating quality backlinks and to make a online business successful. In India we should have quality backlinks from Indian forums to get Indian business, that's why I decided to create a list of 100+ do-follow forum sites which are based in India and have high Page Rank and domain authority. These sites have 90% of Indian traffic, so it is easy to target Indian traffic for free.       We also have list of forums which are USA and UK based. In this post I created a list in 4 parts, 1st part consist of SEO related forums, 2nd contains forums of webmaster, 3rd is of gaming type forums and 4th is for chatting and discussion forums. I hope you will get appropriate forum for developing your business and niche. Feel free to comment below if these sites helps you. Related: Social Bookmarking Sites List Without Registration Dofollow social bookmarking sites list Dofollow Photo Sharing Sites 100 Top Indian Classified sites 55+ list of SEO rela

Submit your Business Website to 100 Free Search Engines | SEM | add url for free

     Friends, the first step to off page SEO is URL submission. This step is mandatory because search engines do not know about your sites. So whenever you publish a new blog or website please submit your site to top search engines.       Here you will get free search engine submission sites list to add URL to all search engines. You can use URL submitter to submit your site in one click but it will be good if you manually do URL submission. The reason for manually submitting your site is keywords. If you use URL submitter then you will not able to provide exact keywords to all search engines.       So do a free web submission by using top 100 search engines which are listed below. You don't need to register for submitting your Homepage Links in all major search engines. Example: In google you can directly add your site's address for free.      The need for doing search engine submission is to get organic traffic + backlinks to your website from all major search engines.

Top 100+100 free classified sites in india

    Here is a  free list of Indian classified sites which are highly active with lots of users. You can post ads free of cost and get dofollow backlinks also for your sites. Classified sites are easiest way of getting popular v.i.a free ads. You can promote your new brand easily and the good thing is you will not pay anything for your ads.       Suppose, you post ads in below 100 classified sites, then surely you will get 10 visits per day per ad for free. It means you will get 1000 unique visits from these classified sites and it will also boost your Alexa rankings. It also recommend to use classified sites with high Page-rank and descent domain authority because when you post ad you will get a backlink from them which helps you in SEO purposes.      Related posts: 100 Forum posting sites list india Social Bookmarking Sites List Without Registration Dofollow social bookmarking sites list Dofollow Photo Sharing Sites Free business listing sites in India. List Updated on 30 May 2020