Here we are again with this terrific widgets. People, over
the years uses the facebook like button and default like box but today I want
to introduce you to an amazing facebook widgets.
Slightly like our all-in-one social media widget, the
Floating Facebook Likebox is a Slider that hides the Likebox inside a container
and reveals it only when visitors hovers the cursor on the floating button.
Also Read: Add Twitter Flying Bird to Blogger and Websites
One Time Pop-Up Or Slide-Out Facebook Like Box With Cute Subscription
Form
Add Advance Slider Widget For Blogger
For this widget to work, you need to have the JQuery Plugin
installed in your website. If you haven't installed this pluging, kindly follow
the steps below.
Adding
JQuery Plugin To A Website
Add the following code anywhere within the header section.
If you are not sure what the header section is simply find <head> in your
html code and add the following JQuery
code just below/after it and save your changes.
<script src=' http://adminwidget.blogspot.in/ajax/libs/jquery/1.6.1/jquery.min.js'
type='text/javascript'/>
Adding
JQuery Plugin To Blogger
Go To your Dashboard > Design > Edit HTML
Search for </head> before/above it paste the above
JQuery code.
Go To your Dashboard
> Design > Edit HTML
Search for </head> before it Paste the following
JQuery code.
Save your changes
Adding JQuery Plugin To Oxwall
Logon to your admin dashboard
Goto settings and click on main settings
Click on Page Settings
Now copy theabove JQuery code to where you have "custom
head code"
Save your settings.
Step 2: Adding Tthe Floating Like Box
Adding the following code anywhere in the
<body></body> section should work just fine but to avoid making
mistakes, it is advisable you use a Custom HTML/JavaScript Widget which is
found in every cms. Just paste the following code into a new Custom
HTML/JavaScript Widget.
<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/AVvXsEiBIaAnFbcgcfQoOq3MAcunREtJQI-YmABL-0Nxh34uyRgfCbHMq68DZm7Ug5fgyz2FQWt90pI5-TvpwKPG362JOOL2ZybK-oegrZnpmZy4aB4RxTwOti_E3zxgz0PCMNZP-MXdBshQIwJM/s1600/facebook1.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:
10px;font: 9px "lucida
grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align:
right;z-index: 99999;}
.w2bslikebox span a{color:
#FF9D00;text-decoration:none;}
If your are using the Blogger platform, you can do the
following:
Go To Blogger > Design > Page Elements
Click on "ADD A GADGET"
Choose HTML/JavaScript Widget
Paste the above Code inside it..
If you have not yet created a Facebook Username to your Fan
Page then Create it, Once you create a username then replace elitestech with
your newly created username.
0 comments:
Post a Comment