How to add Sliding Floating Facebook widget Fan Page on Blogger
How to add Sliding Floating Facebook widget Fan Page on Blogger left side right side Add Sliding Floating Facebook Like Button in Blogger website faster seo.
floating Facebook Fan Page on Blogger smooth sliding widget for blogger add social widget in your blog to increase like of your social page.
Why you should add Facebook Fan page to Website:
Facebook works as a social proof, and more number of fans you have, you are more likely to be trusted more. Also, Facebook has a huge subscriber base, when a user like your Facebook page, he will be able to see all your updates on his wall.You can also buy likes on Facebook and also but Fans, but such Likes and Fans won’t be the real fan and will not add much value. Your target should be converted Regular & loyal readers into your Fb page fans. There are many ways to increase your fan on your blog and we have shared some of them earlier, but one of the most effective way is by adding Facebook fan widget on your blog. This will help your readers to quickly like your fan page on Facebook without leaving your blog.
How to Add floating Facebook Fan Page on Blogger
Guide to Add floating Facebook Fan Page on Blogger
- Go To Blogger Dashboard >> Then Layout
- Click on Add a Gadget
- Now Copy the below code and Paste them in gadget box
- Now click on Save button to save it.
<!--Floating Facebook Widget by www.pcsoftwareclub.com START-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abt").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abt{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3SkmkW3F0HI5WzYpHKH9gyuzKFvUem1JDWv4vvXZiBSCrqq2yUheJGqlzoD2bgKunAzDRbde1bMbSacGPruTo5p2y6MKYAfB9S6r54sKGFObinpWzrgo7hbVNHrMScHEveV9qUKw-Y304/s1600/ABT_facebook_widget.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%;} .abt div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abt span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abt span a{color: gray;text-decoration:none;} .abt span a:hover{text-decoration:underline;} } </style><div class="abt" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpcsoftwareclub&width=245&colorscheme=light&show_
faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://www.pcsoftwareclub.com/2015/08/steps-to-add-floating-facebook-like-box.html ">FB Floating Like Box </a></center>
</span></div>
</div>
<!--Floating Facebook Widget by www.pcsoftwareclub.com END-->
- After Pasting above code Replace pcsoftwareclub with your Facebook username
- Then click on the save button and Refresh Your Blog
Follow Below Part If Your Blog Do not Having JQuery Plugin or if already Installed then leave this part
2nd Part of this Widget
- Go to Blogger >> Template
- Click on The Edit HTML
- Now search for </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
- Then Paste Below Script just above the </head> section.
- After Pasting save your Template.
- Now Refresh Your Blog and I hope Your Facebook box will be works.
So if you liked this post then please be kind and share it with your friends on Facebook and other social sites because 'Sharing is Caring' :)
Keep visiting for more such tutorials and tricks.
Post a Comment