Monday, 2 September 2013
SHARING FACEBOOK WIDGET WITH FLOATING EFFECT
---------------------------------------------------------------------------------------------
1- GO TO BLOG LAYOUT
2-ADD HTML /JAVA WIDGET
3- PASTE BELOW CODE IN THIS WIDGET
4-CHANGE FACE BOOK PAGE LINK IN IFARME CODE
-----------------------------------------------------------------------------------------------------
GET CODE:
<style type='text/css'>
#FBGadgetsBlogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#FBGadgetsBlogFBpop a.FBGadgetsBlogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#FBGadgetsBlogFBpop').animate({top:"50px"}, 1000);
// Widget by http://fbgadgets.blogspot.co.uk
$('a.FBGadgetsBlogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='FBGadgetsBlogFBpop'>
<!-- Widget by http://fbgadgets.blogspot.co.uk/ Start -->
<center>
<b>Don't Forget To Join US Our Community</b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/style4urban&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" >
</iframe></center>
<!-- Widget by http://fbgadgets.blogspot.co.uk/ End -->
<a class='FBGadgetsBlogclose' href='#'>×</a>
<center style='float:right; margin-right:10px;'>
<span style='font-size:xx-small; color:#000; text-decoration:none;'>+Get this at</span>
<a href='http://fbgadgets.blogspot.co.uk/' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>
#FBGadgetsBlogFBpop {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#FBGadgetsBlogFBpop a.FBGadgetsBlogclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top
$('#FBGadgetsBlogFBpop').animate({top:"50px"}, 1000);
// Widget by http://fbgadgets.blogspot.co.uk
$('a.FBGadgetsBlogclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='FBGadgetsBlogFBpop'>
<!-- Widget by http://fbgadgets.blogspot.co.uk/ Start -->
<center>
<b>Don't Forget To Join US Our Community</b></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/style4urban&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" >
</iframe></center>
<!-- Widget by http://fbgadgets.blogspot.co.uk/ End -->
<a class='FBGadgetsBlogclose' href='#'>×</a>
<center style='float:right; margin-right:10px;'>
<span style='font-size:xx-small; color:#000; text-decoration:none;'>+Get this at</span>
<a href='http://fbgadgets.blogspot.co.uk/' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center>
</div>
Related movie you might like to see :
CSS SYNTAX HIGHLIGHT CHANGE IN NOT...
GOOGLE CUSTOM SEARCH BOX
RELATED POST WIDGET LIST WITHOUT TH...
FLASH PLAYER SWF FILE DOWNLOAD ARCH...
WHACK A RAT CSS GAME
CSS SLIDER WITHOUT JS
FLICKITY SLIDER SCROLL WITH RADIO N...
FLICKITY JS CSS SLIDER
RADIO BUTTON SLIDER TO KEY FRAME SL...
BODY JS FILE LINK IN MAGENTO
Related Post for SHARING FACEBOOK WIDGET WITH FLOATING EFFECT
BOOTSNIPP LOGIN SIGNUP FORM
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
WHACK A RAT CSS GAME
Search Engine Optimization Toolkit UN USED CSS IN GOOGLE
FLASH 8 DOWNLOAD
Magento Hello World Module (Extension)
FIREBUG LITE USE OFFLINE
FLICKITY JS CSS SLIDER
RADIO BUTTON SLIDER TO KEY FRAME SLIDER
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
GOOGLE CUSTOM SEARCH BOX 
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON
BODY JS FILE LINK IN MAGENTO
HTML CSS GREEN COMMENTS NOTEPAD++
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.