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>
------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment