We previously shared a very Beautiful Social Subscription Widget which had the links of various social networks in which Facebook, Twitter and Google+ were the special subscription links in it. However, We've also shared an important widget named Online Users to let readers know about the Online visitors of the blog at the on going moment.
Thus, In today's post we're going to discuss a very cheap loading widget for blogger which is best for the people who want to add different social networks different widgets on their blogs in order to attract the readers toward visiting the blog back in future.
It is very easy and simple to attend the concentration of visitors on it so that they'll visit you again in the coming moments. It has its own features of getting visitors to look on it. It will be appeared on the front of visitors when they hover mouse cursor over it, otherwise It will be shrinking at the spot where It has to be.
It is made to be on the right side of a blog's body. But It can also be changed after a short customization. Where you'll be able to add it at the right side of your blog or at the left side of your blog, Recommendation (Don't react with it If you don't have HTML knowledge, However Keeping it at the right side of your blog will make some good shows).
The widget we're going to share with you, It may be shared before it but It is just a re-share of it with the people who don't have it. It is built within the help of JavaScript, CSS, HTML and JQuery. It can be an important fact in the increase of your likes for your Facebook Fan Page, If that has more than 1000 fans before. Now let's see how to install it!There are just two easy steps to proceed it, So Follow The Below Steps!
First of All Please Login to your Google Account from Blogger.com
Go to Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Gadget
Add an HTML/JavaScript Widget and paste below code inside that <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/AVvXsEiJxylJTT3FsVw6B4Eo3F7AnZ0ge2DOdaimvNtFveL9Y1M8zKLVBD9v0DG0hzO83Si4v4Nz9Cx6LFYC0FIHEZCTzHHjtbw3g4pkXDUIJgVx8s5IsCLvMTjh_kJq89hr3BMs_rjpeA4kGs8z/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%2Ffacebook.com%2F
SamandarKNichari&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>
Now save the Gadget! and the first step is done.
When you've done all above then Just Go to Template >> Edit HTML>> Find </head> tag(Tip: Press Ctrl+F to Search).
Just Copy the below code and Past it before </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
After Adding the above code Just save the Edit HTML Page and Check the widget shrinking on your blog!
Customization:
Now here we're going to expand some custom settings for this widget in which you'll not need to pay much attention on it, Because It is easy and simple to proceed.
You may find the username SamandarKNichari with color of red in the code section. Just replace SamandarKNichari with your Facebook username. The second thing you can customize in this widget is the Side, You've two options, Which means you've two sides on your blog to add this widget on. All you need to do is to Change the colored word "Right" into "Left" according to your need.
That's All!
