Bogger Tips & Tricks

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 helplogger.blogspot.com , which always helps me in designing my blogs. To check how this widget works just see this widget below this post for demo.

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’>
//<![CDATA[
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 =
“http://3.bp.blogspot.com/-PpjfsStySz0/
UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/
s1600/no_image.jpg “; // default picture for
entries with no image
//]]>
</script>
<script src=”http://
helplogger.googlecode.com/svn/trunk/related-
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:

<style>
.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,
.4);
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-
transform;
-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-
serif;
}
</style>

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’
rel=’tag’><data:label.name/></a><b:if
cond=’data:label.isLast !=
&quot;true&quot;’>,</b:if>

  • Now add below code snippet just below above found code .

<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=readpostlabels&amp;max-
results=50&quot;’ type=’text/javascript’/>
</b:if>

  • The entire code after adding above code will look like below code .

<b:loop values=’data:post.labels’
var=’label’>
<a expr:href=’data:label.url’
rel=’tag’><data:label.name/></a><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=readpostlabels&amp;max-
results=50&quot;’ type=’text/javascript’/>
</b:if>
</b:loop>

  • At last , find below code

</b:includable>
<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 ==
&quot;item&quot;’>
<div class=’post-footer-line post-footer-
line-4′>
<div class=’relatedpoststitle’>RELATED
POSTS</div>
<div id=’relatedpostssum’>
<script type=’text/javascript’>showrelated
();</script>
</div>
<div style=’clear:both;’/>
</div>
</b:if>

  • 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.

 

Blogging

  1. Writing Skills के ज़रिये ऑनलाइन पैसे कैसे कमाए ? पूरी जानकारी
  2. Blog की Traffic कैसे बढ़ाये ? 3 Easy & Basic Way
  3. गूगल के Top 10 अजीब और अनजाने Facts की पूरी जानकारी
  4. Blogspot Vs WordPress कौन सा बेहतर है ? क्या Use करे ?
  5. Top 10 Indian Bloggers और उनकी Earnings Report
  6. Bloggers के लिए 6 उपयोगी Health Tips
  7. Hindi Blog को SEO कैसे करे: Case Study
  8. अपने Blog की Traffic कैसे बढ़ाये पूरी जानकारी

Internet Tips & Tricks

  1. Internet से पैसे कमाने के 25 तरीके

Life Hacks

  1. GST क्या है ? GST के बारे में पूरी जानकारी

Web Hosting & Domain

  1. Domain Name खरीदने से पहले इन 5 बातो का ख्याल रखे
  2. WordPress Blog के लिए Right Web Hosting कैसे Choose करे ?
  3. Web Hosting क्या है ? पूरी जानकारी
  4. Domain Name क्या है ? पूरी जानकारी

WordPress Tutorial

  1. WordPress.Com और WordPress.Org में क्या अंतर है
  2. WordPress क्या है ? A Guide For Beginners

View All

Ravi K Ranjan

Hi, i am Ravi K Ranjan. MD & CEO of Magatron Animation Pvt. Ltd. Company Started From 6 January 2014. My Business Skill is Graphics Designing, Web Designing, Domain and Hosting Services Provider, Online/Offline eBook Making, Online Advertising.

https://ravikranjan.com/about-us/