Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

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.


                                                                 Live Demo

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 < Design tab > Edit Html
b. Search for </head> tag ( using ctrl+f)
c. 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>

Apslogo

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://24work.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/AVvXsEiD3Mm6UHsFJiyzH938FcDV4E1b8pvhiiC7dKvw4Rt2V1Esp-0TLEG9PqLheCZoHQQ1nZ7T1YSgAP-ZZqaKtjtZLlkcME60yrIrq2-tqaD4SvdwBF96gU8R7gZkntOb3_oJdbyot1aNbq62/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=https://www.facebook.com/pages/Blogspotpop/336034309827168&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>By <a href="http://http://blogspotpop.blogspot.com/">blogspotpop</a> / <a href="http://blogspotpop.blogspot.in/">+Get This!</a></span></div></div>

Apslogo

And now click Save
Note:-Don’t forget to change Red colour keywords.
 

Read more

How to Add Twitter Fan Box To Blogger Blogs

I just came across a great twitter unofficial application that allows your visitors to follow you via twitter without leaving your site. It works like and is closely based on Facebook fan/Like box algorithm. The code for this Fan box is created by Mark carey. You can use this twitter fan following box to increase your twitter followers tremendously. Other twitter users can also see which of their friends is already following your blog or website so it gives a more social blend to your blog and helps in bringing more traffic from twitter. Follow the steps below to add this easy to use Fan box to your Blogger Blogs.
How To Add Twitter Followers Box To Blogger?
                                                                                  Live Demo

1.     Go To Blogger > Design
2.     Select HTML/JavaScript widget
3.     Paste the code below inside it,

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("abhigeorge");</script>

Apslogo

    4.   Replace abhigeorge with your twitter username

    5.  Save your widget and you are done!

When someone follows you already then the box looks like this to the visitor,

                                   twitter followers box

If you needed any help then feel free to post your question. Peace! :)

Read more

How to add HTML Scroll Box to Blogger Post?

Am sharing with you today how to add HTML box in your blogger blog post, you have to focus for you to get this simple tricks. I dont know maybe you have tried to add a html code to your post which it eventually exceed your computer screen, if you are a victim of this, then you have to worry no more, because am going to break down the secrete behind this trick to you.
Let's get started :

when you are creating a new post and you about to paste a html code to your post, check beside compose tab at the top of your new post box, click Edit HTML.
Paste the code in the box below in your Edit HTML tab, now go back to compose, you should find the html box in your compose tab, fill in the html code you want paste.

If you want to use a box with border as shown below, use the code in the box below.

<div style="font: 16px/26px durodola, ridwan, olabode; height: 120px; overflow: scroll; width: 500px;border:3px solid black;">
Enter your text here</div>
<div style="font-family: verdana,arial,sans-serif; font-size: 10px;">
<a href="http://www.blogspotpop.blogspot.com/">Apslogo</a></div>

Apslogo


If you want a box without a border as shown below, use the code in the box below.

<div style="font: 16px/26px durodola, ridwan, olabode; height: 120px; overflow: scroll; width: 500px;">
Enter your text here</div>
<div style="font-family: verdana,arial,sans-serif; font-size: 10px;">
<a href="http://www.blogspotpop.blogspot.com/">Apslogo</a></div>

Apslogo

Note : Both the code highlighted in blue can be change to your desired height and width.
If you really love this or having problem with it drop a comment, please share this with friends using the share button below.
In my future future post i will be dropping a lot of tricks which you can use to spice up your html box and look more professional, so for you not to miss any of this offer, subscribe to this blog now, and receive a lot of tricks/tips/tutorials directly into your email.

Read more