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 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
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
Related Post for SHARING FACEBOOK WIDGET WITH FLOATING EFFECT
NOTEPAD++ REMOVE UNWANTED LINES
SEO SCORE TOOLS
JS IMAGE SCROLLER
SCREEN TO GIF
FIREBUG LITE USE OFFLINE
ARROW BUTTON
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
BOOTSNIPP LOGIN SIGNUP FORM
GOOGLE CUSTOM SEARCH BOX 
HTML CSS GREEN COMMENTS NOTEPAD++
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
IMAGE UPLOAD WITH JAVA WITH PHP CODE
WHACK A RAT CSS GAME
FLASH 8 DOWNLOAD
Magento Hello World Module (Extension)
Search Engine Optimization Toolkit UN USED CSS IN GOOGLE
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.