How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >>Design >>Edit HTML;

Step 2. Check the "Expand widgets template" box; 

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1bxJ6orSUC4H_K2p28FxdA3bJAGQgeDI5y5ZynFsTpnJlZjbp6wH4l531lHDpl7piZ-PMmWgoDx72XgiPtc61bp95hehaYu-TW59QeONn6cKuODU7WiWZ69rGPoRAsU94g9S1Q2zLd07d/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
-to change the default picture when no images are available, replace the URL in blue with your own.
-for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
-remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

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

If you can't find it, then search for this one:

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

OR:

<data:post.body/>

Step 6. Copy and paste the below code just after any of these lines

<!-- Related Posts with Thumbnails Code Start-->
<!-- 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=6&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='http://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qhnZWJWly4CCagl4OGl5yXYFmddpvQlvjpL6XRzEYysYf4YwMKisBHEwgWjQDL0B4UGAkh_Y9pEz06281xgvFNNurMcz7j6DnDewrfMoyjYxs73W030Bwu1AjXHFoOo7loGS5YZnb52z/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note: - change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

That's it folks!

Read More

How to add advertising banners your blog

How to add your blog to advertising banners? It's very easy.

First you going to Layout >> Page Element >> Add a gadget >> "html/java script" 

Next copy this code "html/java script" and save.

<div align="center"> <table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> <tbody><tr> <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RgpCEjzhHv8HFShqF7fNWJn9qNXRGNVorbiufHlg245eanDp9d4rghsQbW7ELuDBBhEDAllQ1dTxOK_yTog_Hl9jF_e9g9Di3xTszZDwGIVrQKJXXgyyTgLdgs6p1EXA5-Vh8xTYHu0/" height="125"/></a></center></td> <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RgpCEjzhHv8HFShqF7fNWJn9qNXRGNVorbiufHlg245eanDp9d4rghsQbW7ELuDBBhEDAllQ1dTxOK_yTog_Hl9jF_e9g9Di3xTszZDwGIVrQKJXXgyyTgLdgs6p1EXA5-Vh8xTYHu0/" height="125"/></a></center></td> </tr> <tr> <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RgpCEjzhHv8HFShqF7fNWJn9qNXRGNVorbiufHlg245eanDp9d4rghsQbW7ELuDBBhEDAllQ1dTxOK_yTog_Hl9jF_e9g9Di3xTszZDwGIVrQKJXXgyyTgLdgs6p1EXA5-Vh8xTYHu0/" height="125"/></a></center></td> <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RgpCEjzhHv8HFShqF7fNWJn9qNXRGNVorbiufHlg245eanDp9d4rghsQbW7ELuDBBhEDAllQ1dTxOK_yTog_Hl9jF_e9g9Di3xTszZDwGIVrQKJXXgyyTgLdgs6p1EXA5-Vh8xTYHu0/" height="125"/></a></center></td> </tr> </tbody></table> <table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> <tbody> </div>

Red: URL of advertiser

Green: ad description

Blue: image URL (125x125)

Now you adding advertising banners easily.

Read More

How to add facebook send button to blog

Facebook send button is very useful gadget for blog. It can share your post in facebook friends, groups and e mails. So I will teach you how to add this easily.

• First login to your blogger dashboard and navigate to > Layout > Edit HTML and expand width Templates. 
• Next you search this code  <div class="post-header-line-1"> and past the code below  <div class="post-header-line-1"> and save the template. 

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send href="Your site URL" font="arial"></fb:send>

change the Your sit URL 

Now your blog have nice send button.

Read More

How To Add Facebook Comment Box To Blogger Blogs

Facebook comment box is very useful for for bloggers increase conversations. This tool help to increase our blog trafick. So i will teach you how to add this easily.

• First you visit Facebook Developer Page enter your blog name and URL and create your application.
• Next you copy the APP ID and save it on notepad.
• Next you login to blogger dashboard and navigate to >Layout > Edit HTML and expand width Templates. Search this code  <data:post.body/> or <div class='post-header-line-1'/>  and paste the code below <data:post.body/> or <div class='post-header-line-1'/> and save the template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <p align='left'><img alt='' class='icon-action' src='#'/></p>

  <div id='fb-root'/>

  <script>

  window.fbAsyncInit = function() {

  FB.init({appId: &#39;APPID&#39;, status: true, cookie: true,

  xfbml: true});

  };

  (function() {

  var e = document.createElement(&#39;script&#39;); e.async = true;

  e.src = document.location.protocol  +

  &#39;//connect.facebook.net/en_US/all.js&#39;;

  e.async = true;

  document.getElementById(&#39;fb-root&#39;).appendChild(e);

  }());

  </script>

  <fb:comments/>

  </b:if>

• Next you change APPID on the code with your APP ID from facebook and you can add a image for"#" and save the template.
• Next you need to hide default blogger commenting system. So navigate to Settings > Comments and select hide and save settings.

Read More