How to add facebook widget to blogger

As you know, Facebook has been implemented by most of bloggers, and Facebook has created a great oportunity for us to increase number of loyal readers just by one click. So, have you got a cool Facebook fan page widget? If not, this tutorial would be for you. I will show you how to add facebook widget to blogger in a absolutely cool way with hover effect. You can see the demo here. And you can implement it for your blog also. What you need to do is following exactly the steps below:







Step 1: Add Jquery Javascripts plugin (if your blog is already added this plugin, you can skip this step)

1. Go to Design / Templates  >>  Edit Templates  >>  Tick the expand widget templates box
2. Find the tag </head>  (Press Ctrl + F to find it)
3. Place this code right above the tag </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

4. SAVE the templates

Step 2: Add Facebook widget code to blogger

1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/Javascripts
2. Place the code below into the content box

<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/AVvXsEhCbZhol5YlIBvjhG6iKUCLcALHN6P1F5I8cOv5M2MKbnu3WMMJ2g84VDt9cgda_Ngpld3gmbHIODQQdi77jv313YN9oE4je-FKFDRCocf7Egi-_DgBrakxhmixq8jlaj-V_SOMIcp4CO02/s150/w2b_facebookbadge.pn") 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><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FBlog-On-Blogspot%2F114178088675094&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><span>/ <a href="http://www.blogonblogspot.com/">+Gadget</a></span></div></div>

3. SAVE

read more

Adding animated twitter bird

In this blog tutorial, I will show you how to add animated twitter bird to blogger. This is a very interesting thing that you should implement it for your blog. By implemeting the animated twitter bird, you would likely get more followers and posts being shared as the flying bird can generate more impressions. See demo here . You need to follow the steps below:

1. Go to Design / Template  >>  Edit Templates  >> Tick the Expand Widgets box
2. Find the tag </body>
3. Place this code right above the </body>

<!-- Twitter Bird Widget for Blogger--> <script src='http://bloggerblogwidgets.googlecode.com/files/way2blogging.org-tripleflap.js' type='text/javascript'> </script> <script type='text/javascript'> var twitterAccount = &quot;Blog_onBlogspot&quot;; var tweetThisText = &quot; <data:blog.pageTitle/> : <data:blog.url/> &quot;; tripleflapInit(); </script> <a href='http://blogonblogspot.com' target='_blank' title='Blog On Blogspot'><span style='color:#fff;font-size:11px;position:absolute;'>Gadget</span></a> <!-- Twitter Bird Widget for Blogger-->

4. SAVE the Template

read more

Animation for Recent Post Gadget

In this tutorial, we will learn how to make an animation for the Recent Post gadget. As you can see an example here, it looks quite attractive, isn't it?. When the recent posts keep changing the positions, it can actually draw attention from visitors, thus more posts will be read, and visitors will probably stay longer on your site. You can see the instruction below:

1. Go to Page Elements / Layout  >>  Add a Gadget  >>  HTML/Javascripts
2. Place this code into the content box

<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"> <script style="text/javascript"> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script> </ul><small><a href="http://www.blogonblogspot.com/" target="_blank"><span style="color:#fff;">get this widget here</span></a></small>

3. SAVE

read more

Adding gadgets to Blogger

Blogger has been well known since it was launched by Pyra Labs in August 23, 1999. Blogger has millions of active users which include you and I. Moreover, more and more new users have switched from other services to Blogger. Therefore, I would guess some of you may not know some of the basic tips in Blogger. This thought has encouraged me to walk you through some basic tips. Note: if you're an blogger guru, you shouldn't see this post. The first tip I want to show you is that adding gadgets to Blogger. If you want to know the latest tips in this blog, just simply to the home page of Blog on Blogspot. To add a gadget to a Blogger blog is quite simple, so it wouldn't take you much time. You just need to follow these steps:

If you're using the Old Blogger with its ugly blue skin, you can follow this tutorial.
If you want to use Blogger's new cool design, you can follow the steps below:

1. Log in into your Blogger in draft.blogger.com
2. Select your Blog by clicking on the Blog name, you will see something like this

3. Click on Layout (on the left sidebar)
   

4. Click on Add a Gadget (where you want to add your Gadget in you blog); a pop-up window will open 

5. Choose your a Gadget you want to add (if you cannot find the gadget you want to add, just the search box at the top right corner). I've listed some of the best Gadgets in Best Gadgets for Blog, so you can see it as an idea.
6. For example, I will choose Follow by Email Gadget

7. Click Save, then Click SAVE arrangement (on the top right corner)
   

I hope you will enjoy blogging in Blogger. Go to the front page to learn more

read more

Create Random Posts for blog

1. In Dashboard, go to Layout
2. Click on Add a Gadget
3. Find HTML/Javascript
4. Paste this code to the content box

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

5. Click SAVE

read more

Best Gadgets for blog

Gadgets are a handy, easy and simple way to add some flare to your blog; they're also mini tools that offer cool and dynamic content that can be placed on any page on the web. Whether you’d like to display the number of currently online visitors to your site or just place a share button, you can do it with widgets. There are some very cool gadgets out there, and here are some of my top picks in random order.

read more