Friday, 6 September 2013
FLOAT SHARING BUTTON SOSMED
---------------------------------------------------------------------------------------------
1- GO TO BLOG LAYOUT
2-ADD HTML /JAVA WIDGET
3- PASTE BELOW CODE IN THIS WIDGET
4-CHANGE PAGE LINKS
-----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN HTML JAVA WIDGET
-------------------------------------------------------------------------------------------------------
<style>
.FaceBook{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrOzCN9oBS2szm972ULgpVhpuSLNZQkpcQXyJ3AYwFMqFMTOu7mmEYLygzxMCPHOczqBONihe_S4VF8yI3K5XuGaxBYttNi91NbbqpuLAtIfjYgiyq_UaYVI3eeww2TDkOxm-uqOlM4fb/s1600/FaceBook.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:160px;
z-index:1000;
}
.FaceBook:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6aPBSfE7b7Kbni1uXIparVVScH_yd8oUounuo90tFEOSOlFiZeKcI-N3YjHZKZOcnrSBULiTRGVEhJPdC9OWKOpdrdZKvKicv28fForC3DZmbqyy1613Lh5axaMMWIAJfTK-l_08shRZ/s1600/FaceBookOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:160px;
z-index:1100;
}
.Twitter{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2FJ46wQJN8czAYKS_YVusGgyMuxhT0pgR38_1sWd1mkwvVJ1NE2XPuTLwYDLKmvOuqvxEmxOGophv2NY1Ywbsq4MmkTs-i4tUcIZHZvJ5iRuB1u1G-mJpBVuMx-0IUHcLf2_GxmLtdqp6/s1600/Twitter.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:205px;
z-index:1000;
}
.Twitter:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz49qJKHSB8LnNW5mlOnvM8FYAqJTzlJUIJd0PNYDIw6UEMXmKC6-7Av7CxS6IdWgqnLtBkdnut45ZJ_NBImFiggtmvjTIKp0r5NS1y36mvBoKCcHFz820PEV9AarWMQKdk_fjcBoz1PUl/s1600/TwitterOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:205px;
z-index:1100;
}
.Google{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWt6BxMUwbkpMPd6HuPHdasATw_pJzXQd_YpGDlvPtEMrDi2-1lrs4g-S2VvJuiG8Aj5iUJvlaTc3qUyaPMslVBIdyyjMl6llzeFKTcNdRf6HOqUAaNDoe4fftPHnKgGuuOpRRZ6t8FURK/s1600/Google.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:250px;
z-index:1000;
}
.Google:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0fflacpnZp7aXkioKA4V9wlxlOjFxBpcLlaC8VrefHySAwIViAaZPdu1lmZQsJbTfBtaRORRBlFb1eJIMhbCNA1N-WQw2d7tOoWP5qCmdMnkLUMYCOCfOPJ3fADIyHfzt8yUhCamVCFJf/s1600/GoogleOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:250px;
z-index:1100;
}
.FeedBurner{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCOkTFXgTy8sr5zweySvLTe3Ny_Bj4v0XAV0ozYbQpQFT06f6TY8d7-Gmt5nwnv0RTZggFk5fFuy4MQUZ9G1RmRfAv5eQ25qlZGqPJD-E8u3KLJZHSWbgoOlg0rq5WNG5EIBEkVN29O6R/s1600/Rss.jpg');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:295px;
z-index:1000;
}
.FeedBurner:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVb6HTWgMA9kQson3Eq4gGH6uagJSLs9wADpqpdpYmNNs3thvZfJVct-BFYOkE3uQqd_ptN1K6lfkS1VKO_F8LUaFSMq2M9Sa5IRKS9CzPdGtjNXAGFCUTmkbfXCubY4D_j_PLMUqkxbyo/s1600/RssOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:295px;
z-index:1100;
}
</style>
<div class='FaceBook'>
<a href='https://www.facebook.com/style4urban' target='_blank'>
<div class='FaceBook'></div>
</a>
</div>
<div class='Twitter'>
<a href='https://twitter.com/Style4Urban' target='_blank'>
<div class='Twitter'></div>
</a>
</div>
<div class='Google'>
<a href='https://plus.google.com/u/0/115131756957365821290/posts' target='_blank'>
<div class='Google'></div>
</a>
</div>
<div class='FeedBurner'>
<a href='http://feeds.feedburner.com/FBGadgets' target='_blank'>
<div class='FeedBurner'></div>
</a>
</div>
----------------------------------------------------------------------------------------------------------
ADD TRANSITION EFFECT CHANGE UPPER STYLE CODE
------------------------------------------------------------------------------------------------------------
<style>
.FaceBook{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLrOzCN9oBS2szm972ULgpVhpuSLNZQkpcQXyJ3AYwFMqFMTOu7mmEYLygzxMCPHOczqBONihe_S4VF8yI3K5XuGaxBYttNi91NbbqpuLAtIfjYgiyq_UaYVI3eeww2TDkOxm-uqOlM4fb/s1600/FaceBook.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:160px;
z-index:1000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.FaceBook:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6aPBSfE7b7Kbni1uXIparVVScH_yd8oUounuo90tFEOSOlFiZeKcI-N3YjHZKZOcnrSBULiTRGVEhJPdC9OWKOpdrdZKvKicv28fForC3DZmbqyy1613Lh5axaMMWIAJfTK-l_08shRZ/s1600/FaceBookOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:160px;
z-index:1100;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}
.Twitter{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2FJ46wQJN8czAYKS_YVusGgyMuxhT0pgR38_1sWd1mkwvVJ1NE2XPuTLwYDLKmvOuqvxEmxOGophv2NY1Ywbsq4MmkTs-i4tUcIZHZvJ5iRuB1u1G-mJpBVuMx-0IUHcLf2_GxmLtdqp6/s1600/Twitter.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:205px;
z-index:1000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Twitter:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz49qJKHSB8LnNW5mlOnvM8FYAqJTzlJUIJd0PNYDIw6UEMXmKC6-7Av7CxS6IdWgqnLtBkdnut45ZJ_NBImFiggtmvjTIKp0r5NS1y36mvBoKCcHFz820PEV9AarWMQKdk_fjcBoz1PUl/s1600/TwitterOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:205px;
z-index:1100;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}
.Google{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWt6BxMUwbkpMPd6HuPHdasATw_pJzXQd_YpGDlvPtEMrDi2-1lrs4g-S2VvJuiG8Aj5iUJvlaTc3qUyaPMslVBIdyyjMl6llzeFKTcNdRf6HOqUAaNDoe4fftPHnKgGuuOpRRZ6t8FURK/s1600/Google.png');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:250px;
z-index:1000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.Google:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0fflacpnZp7aXkioKA4V9wlxlOjFxBpcLlaC8VrefHySAwIViAaZPdu1lmZQsJbTfBtaRORRBlFb1eJIMhbCNA1N-WQw2d7tOoWP5qCmdMnkLUMYCOCfOPJ3fADIyHfzt8yUhCamVCFJf/s1600/GoogleOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:250px;
z-index:1100;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}
.FeedBurner{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzCOkTFXgTy8sr5zweySvLTe3Ny_Bj4v0XAV0ozYbQpQFT06f6TY8d7-Gmt5nwnv0RTZggFk5fFuy4MQUZ9G1RmRfAv5eQ25qlZGqPJD-E8u3KLJZHSWbgoOlg0rq5WNG5EIBEkVN29O6R/s1600/Rss.jpg');
background-repeat:no-repeat;
width:43px;
height:43px;
position:fixed;
right:0px;
top:295px;
z-index:1000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.FeedBurner:hover{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVb6HTWgMA9kQson3Eq4gGH6uagJSLs9wADpqpdpYmNNs3thvZfJVct-BFYOkE3uQqd_ptN1K6lfkS1VKO_F8LUaFSMq2M9Sa5IRKS9CzPdGtjNXAGFCUTmkbfXCubY4D_j_PLMUqkxbyo/s1600/RssOpen.png');
background-repeat:no-repeat;
width:150px;
height:43px;
position:fixed;
right:0px;
top:295px;
z-index:1100;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}
</style>
----------------------------------------------------------------------------------------------------------
FLOATING SOCIAL BOOKMARK IN BLOGGER
HOW BUTTON MOVE WITH SCROLLBAR IN SHOPIFY
or remove theme.liquid css part or use javascript scroll part
@include media-query($medium-up) {
// Prevent mobile menu inline styles from overriding desktop styles
// sass-lint:disable no-important
@include transform(translate3d(0, 0, 0));
}
OR USE JAVASCRIPT
<script type="text/javascript">//<![CDATA[
$(window).scroll(function() {
var winScrollTop = $(window).scrollTop();
var winHeight = $(window).height();
var floaterHeight = $('.next-prev-product').outerHeight(true);
var fromBottom = 420;
var top = winScrollTop + winHeight - floaterHeight - fromBottom;
$('.next-prev-product').css({'top': top + 'px'});
});
//]]></script>
------------------------------------------------------------------------------------------------------------
<title>Pakdhe Johny Free Simple Blogger Template Responsive</title>
<style>
.social-buttons{position:fixed;top:150px;width:45px;z-index:9999}
.button-left{left:0}
.button-right{right:0}
.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn
.social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url("https://cdn.shopify.com/s/files/1/0042/9811/3117/t/203/assets/mas-icons.png?v=1631999695")}
.button-left #facebook-btn span{background-position:right 10px}
.button-left #twitter-btn span{background-position:right -35px}
.button-left #google-btn span{background-position:right -127px}
.button-left #rss-btn span{background-position:right -80px}
.button-right #facebook-btn span{background-position:12px 10px}
.button-right #twitter-btn span{background-position:11px -35px}
.button-right #google-btn span{background-position:10px -127px}
.button-right #rss-btn span{background-position:11px -80px}
.social-buttons #facebook-btn:hover .social-icon{background-color:#3B5998}
.social-buttons #twitter-btn:hover .social-icon{background-color:#62BDB2}
.social-buttons #google-btn:hover .social-icon{background-color:#DB4A39}
.social-buttons #rss-btn:hover .social-icon{background-color:#FF8B0F}
.social-buttons #pinterest-btn:hover .social-icon{background-color:#D43638}
.social-buttons #youtube-btn:hover .social-icon{background-color:#C4302B}
.social-buttons a:hover .social-text{display:block}
.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}
.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:11px 40px 11px 0}
.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}
.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:11px 0 11px 40px}
.social-buttons .social-text{color:#FFF}
.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}
.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(window).load(function(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
<div class="social-buttons button-right hidden-phone hidden-tablet">
<a class="itemsocial" href="https://www.facebook.com/your%20FB" id="facebook-btn" target="_blank"><span class="social-icon" style="overflow: hidden; width: 43px;"><span class="social-text">Follow via Facebook</span></span></a>
<a class="itemsocial" href="https://twitter.com/your%20twitter" id="twitter-btn" target="_blank"><span class="social-icon" style="overflow: hidden; width: 43px;"><span class="social-text">Follow via Twitter</span></span></a>
<a class="itemsocial" href="https://plus.google.com/your%20G+" id="google-btn" target="_blank"><span class="social-icon" style="overflow: hidden; width: 43px;"><span class="social-text">Follow via Google</span></span></a>
<a class="itemsocial" href="http://pinterest.com/your%20ID" id="pinterest-btn" target="_blank"><span class="social-icon" style="width: 43px; overflow: hidden;">
<span class="social-text">Follow via Pinterest</span></span></a>
<a class="itemsocial" href="https://www.youtube.com/user/your%20ID" id="youtube-btn" target="_blank"><span class="social-icon" style="overflow: hidden; width: 43px;"><span class="social-text">Follow via Youtube</span></span></a>
<a class="itemsocial" href="http://feeds.feedburner.com/your%20feed" id="rss-btn" target="_blank"><span class="social-icon" style="width: 43px;"><span class="social-text">Follow via RSS</span></span></a>
</div>
------------------------------------------------------------------------------------------------------------
Related movie you might like to see :
BODY JS FILE LINK IN MAGENTO
INTENSO MAGENTO QUICK VIEW BUTTON
CSS SYNTAX HIGHLIGHT CHANGE IN NOT...
QUICK FIND TOOL GOOGLE CHROME FOR ...
WEB DEVELOPER 0.5
TEXT COMPARE OR DUPLI TEXT FINDER
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
Related Post for FLOAT SHARING BUTTON SOSMED
FLICKITY JS CSS SLIDER
QUICK FIND TOOL GOOGLE CHROME FOR WEB PAGE
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON
WHACK A RAT CSS GAME
BOOTSNIPP LOGIN SIGNUP FORM
Magento Hello World Module (Extension)
FIREBUG LITE USE OFFLINE
JS IMAGE SCROLLER
RELATED POST WIDGET LIST WITHOUT THUMBNAIL
FEATURED AUTOMATED POST SLIDER FOR SIDEBAR
BODY JS FILE LINK IN MAGENTO
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
FLASH 8 DOWNLOAD
TEXT COMPARE OR DUPLI TEXT FINDER
WEB DEVELOPER 0.5
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.