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 :
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
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 for FLOAT SHARING BUTTON SOSMED
HTML SYNTAX HIGHLIGHTER
WHACK A RAT CSS GAME
FIREBUG LITE USE OFFLINE
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON
CONVERT FILE PATH TO A URL LINK
FLASH 8 DOWNLOAD
POST DATE THUMBNAIL IN BLOG
WHITE SPACE REMOVER CODE
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
PADDING BUTTON 
BODY JS FILE LINK IN MAGENTO
FEATURE POST WIDGET IN BLOG
POST DATE HEADER IN BLOG
FLICKITY JS CSS SLIDER
INTENSO MAGENTO QUICK VIEW BUTTON
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.