Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect
Posted in Blogspot tricks, Blogspot tutorial, Blogspot widgets, facebook tricks, Pop out like box, tricks
2 comments
Wednesday, December 19, 2012 By Anonymous
Hello friends, here's another Facebook jquery pop up for facebook like box widget for bloggers (or) website. Advantages this widget is to free space on the page. Because Facebook can prevent website normal as the box. Static Pop Out Facebook as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See Facebook static plate to the right of the page and move the mouse over the plate with the frame, as is visible by sliding to the left.
How to Add Static Facebook Like Box with Smooth Jquery Hover for your Blog / website
Here There are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)
a. Go to Blogger Dashboard.
b. Go to template tab
c. Click on Edit Html Button
And now click Save Template
Step 2: Adding Widget Code ( Html code )
it's Simple
a.Layout or page elements –>> Add a gadget->> Html/java script.
b.Add a below code in the Html/java scipt box.
Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )
And now click Save
Note:-Don’t forget to change Red colour keywords.
How to Add Static Facebook Like Box with Smooth Jquery Hover for your Blog / website
Here There are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)
a. Go to Blogger Dashboard.
b. Go to template tab
c. Click on Edit Html Button
d. After click on button edit button.
e. press Cltr+f
f. Search </head>
d. Add below line of code Before </head> tag<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
And now click Save Template
Step 2: Adding Widget Code ( Html code )
it's Simple
a.Layout or page elements –>> Add a gadget->> Html/java script.
b.Add a below code in the Html/java scipt box.
Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )
<a href="http://msajawalyounas.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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/AVvXsEg7D_kHmgqbqV69YhYNzp9NIVyqBQTlhHeXeXDS8WdSVGh2E1teT2rFuhGRhlw09EmnnxEqf6bpbfBbZrv2-YDhQso_oOMqk6ltL_Yb4Y0nnDkTWJWdQmTQD-NX2LvCgrHQAHYovax7_9da/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><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Computer-tips-and-tricks/362900000465258&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><span>By <a href="http://msajawalyounas.blogspot.com/">Blogspot tutorial</a> / <a href="http://msajawalyounas.blogspot.com/">+Get This!</a></span></div></div>
</div>
//<!--
$(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/AVvXsEg7D_kHmgqbqV69YhYNzp9NIVyqBQTlhHeXeXDS8WdSVGh2E1teT2rFuhGRhlw09EmnnxEqf6bpbfBbZrv2-YDhQso_oOMqk6ltL_Yb4Y0nnDkTWJWdQmTQD-NX2LvCgrHQAHYovax7_9da/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><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Computer-tips-and-tricks/362900000465258&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><span>By <a href="http://msajawalyounas.blogspot.com/">Blogspot tutorial</a> / <a href="http://msajawalyounas.blogspot.com/">+Get This!</a></span></div></div>
</div>
And now click Save
Note:-Don’t forget to change Red colour keywords.
Related posts
- How To Add Rainbow Colored Flashing Link Style
- Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect
- Free increase Facebook page Likes,subscribers, Google plus circles,twitter followers and More. Checked!
- Just 1 Click Se Apnay All Friends LIst ko Kisi be Fb Group Me Add karo
- How To Create your own Windows 8 Start Screen like Cover Photo For Facebook
- 24 Great Facebook Tricks And Hacks
- Close All Open Windows With a Single Click
- Clownfish For Skype Voice Changer
Share this post
good going bro
ReplyDeleteThanks
Delete