How To put Scrolling/Floating Facebook Like Button Widget For A Blog/Blogspot In A Easy Way

7/10/13

Floating Facebook Like Button Widget 

Hi guys today i"ll show you how to put floating widget for your blog.
It is great widget for getting more  viewer attraction toward your blog and get your fans up to dates on facebook .It is a step by step easy guide.
So follow all step carefully.

Step 1:

Go to Your Blogger ->Layout ->Gadget ->Html/javaScript

Step 2:

Now Copy The Below Script and Paste it into a Gadget

-------------------------------------------------------------------------------------------------------------------

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F20four7updates&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://20four7updates.blogspot.com/2013/07/how-to-put-scrollingfloating-facebook.html" target="_blank">Get This!</a></span></div></div>

---------------------------------------------------------------------------------------------------------------------

Step 3:

Now change the username in a code to show your facebook page

Scroll down the code in html/javascript and find 20four7updates and replace it with your facebook username.If you don't know how to change username or find username so see step 5.

step 4:

Now go to template Backup/Restore your template(if you want in case of any error)
then click on edit HTML and find </head> (for that click ctrl+f to find it).And copy the below code and past before/above </head>

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

Note:If you have already this code then leave Step

Step 5:(optional)

If you dont know how to find username of your facebook page,then go to facebook open your      facebook page and in url copy your username as shown in a below picture.



Please give us your feedback.

Now its your turn!

4 comments:

  1. Do you need free Twitter Followers?
    Did you know you can get them ON AUTO-PILOT & ABSOLUTELY FOR FREE by getting an account on Like 4 Like?

    ReplyDelete
  2. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.

    Semrush Certification Exam
    Google Adwords Exam Answers
    Hubspot Exam Answers

    ReplyDelete
  3. This is very informative article. HubSpot Inbound Certification Exam Answers 2020. we cover all possibles questions with 100% correct answers.

    ReplyDelete
  4. Thank You very much for this great post. I am regular reader of your blog. I want to share with you my adwords experience.How to become Google Certified and get more job opportunity.

    google ads certification

    ReplyDelete