Related Posts Widget For Blogger

Related posts widget is very important for a blog or website because it increase the number of page views and also help the visitors to view other posts related to the blog.Now here i am telling you a wonderful trick to display links of related posts beneath each post.

This is very simple and easy you can only follow the steps and add the widget to your blog.

Step 1 :- Log in to your blogger account.

Step2 :- Go to the template option from the dashboard of your site.

Step 3 :- Click on TEMPLATE>>>>EDIT HTML>>>>PROCEED

Step 4 :- Now press CTRL+F buttons

A search box will appear...try to find the below code in your template.

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

If you can't find it in the search option in your template so try finding the more codes written below.

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

or this :-

<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

And immediately Below/After it,paste this code :

<script src='http://dl.dropboxusercontent.com/s/c65xwzi0gc8z906/related-posts-min-1-ycode.js' type='text/javascript'/><link href='http://dl.dropboxusercontent.com/s/tu8qgyfxt2cze7k/related-posts-min-1.css' rel='stylesheet' type='text/css'/><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='My Blogger Tricks'><img alt='My Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='All Blogger Tricks'><img alt='All Blogger Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://24work.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><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><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=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Enjoy......... :)

0

Add static Facebook Pop out like box

Hello friends,here is another amazing widget for you.This is Facebook pop out like box for blog or website.Advantages this widget is to free space on the page.So,are you ready??????

Step 1 :- Adding static Facebook Pop out like box to your blog or website's layout

Now let's start adding it

Step 2 :- Log in to your blogger account and then open your blog's layout and click on "Add a Gadget" link.                                                                                                         

Step 3 :- After clicking on add a gadget link.Click on the HTML/JAVA Script option.

Step 4 :- Paste the code below to the java script,but please do not forget to replace the red color words with your Facebook page name.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WDaYdf7gDXZtsM3LCDQWO0txEdf0gX135OgnKrbnf7hI6B5JJ4WuK-ceNNo2IfUMIUZPcFx9pCGdx2y3l759w6gnGIfqO5IlnKLQO3IXdVLpJwLsG_QS2ujC_fA9IGBH1MNifrA3wnqj/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Blogspot-tutorial/220888831260608&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

0

How to add cute custom Facebook like box to your blog/website

Facebook like box is a very useful widget to show the visitors the authority and love of the people for his blog.Facebook offers a simple like box plugin that you can easily integrate into your website.But this like box is simple and not a very much attractive.Now i am sharing a unique information of how to add a cute wonderful,colorful,attractive like box of Facebook.
Now let's start :-
Go to your blogger dashboard and then to the layout and click on add a gadget link
 After clicking on add a gadget link,click on HTML/JAVA script option.

Now copy the code from below

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRRmc_wcjSH7ghg7UavThlLVD18etmjcXGG6I3vYeq5xg2vMzXK1pMzly7ylygRkw6Ho-8qXS1xjpKUcM9y34qHLuLuDOt_MedZlN1-Osw_FVwCUSBzx8ZnJMnrpmDv0NQAmxyq87miOrx/s1600/fan-01-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlogspot-tutorial%2F220888831260608&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>

Now replace the colorful code in red color from your Facebook user name.

Enjoy..... :)

0