In the previous post, you have seen how to add floating social share buttons for both Desktop and Mobile views. There is some problem with that code if used in some templates. Not every template can use that code. In this post, you will see how to add horizontal buttons fixed at bottom of the screen and unhides when the user scrolls down to some fixed area. You can see the below image for reference. I have taken a screenshot. Those buttons are in fixed position at bottom left-hand corner. Initially, they are hidden and when a user scrolls window downwards to some area then they are unhidden. Copy pasting the is also easy and positions to paste the code is fixed.

blogger horizontal share buttons that unhides when user scrolls techapu

For this code, I have used JavaScript keeping in mind the sites page speed. Placing third part URLs or using too much animation or CSS in the first fold definitely causes page speed backdrop. So to overcome those issues share buttons are hidden during when the webpage displays. When the user scrolls window downwards then social share buttons will be visible and that too on the bottom left-hand corner. It does not cause any disturbances to Back-to-Top widget if it is placed on the right-hand side. You can see the below image for reference. The code is given after the image.

blogger horizontal share buttons that unhides when user scrolls

Fixed horizontal share buttons:

1. CSS

div.sticky{
position: fixed;
bottom: 0px;
z-index:999;
}
#share-art{
float:center;
padding:0px 0 0;
font-size:23px;
font-weight:400;
background:white;
border-radius:50px;
visibility: hidden; 
}
#share-art a{
padding:2px 5px;
margin-left:4px;
border-radius:2px;
}
#share-art .fac-art{
color:#24e93b
}
#share-art .fac-art:hover{
color:#3b5998
}
#share-art .twi-art{
color:#24e93b
}
#share-art .twi-art:hover{
color:#00acee
}
#share-art .goo-art{
color:#24e93b
}
#share-art .goo-art:hover{
color:#db4a39
}
#share-art .pin-art{
color:#24e93b
}
#share-art .pin-art:hover{
color:#CA2127
}
#share-art .lin-art{
color:#24e93b
}
#share-art .lin-art:hover{
color:#0077B5
}
#share-art .wha-art{
color:#24e93b
}
#share-art .wha-art:hover{
color:#34af23
}
@media screen and (max-width: 450px){
#share-art{
font-size:22px;}
}
@media screen and (max-width: 415px){
#share-art{
font-size:21px;}
}
@media screen and (max-width: 400px){
#share-art{
font-size:20px;}
}
@media screen and (max-width: 390px){
#share-art{
font-size:19px;}
}
@media screen and (max-width: 375px){
#share-art{
font-size:18px;}
}
@media screen and (max-width: 360px){
#share-art{
font-size:16px;}
#share-art a{
padding:2px 4px;
}
}
@media screen and (max-width: 320px){
#share-art{
font-size:15px;}
#share-art a{
padding:2px 3px;
}
}

Copy Code

There are a lot of advantages with those share buttons. As for instance, the buttons adapt to the device. Means if you were using back-top-button, social share buttons cause disturbances to it, but this code is designed in such a way that it does not cause any disturbance to that buttons. The size of buttons varies from device to device. Paste the above CSS code just above ]]></b:skin>.

2. HTML & JS

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sticky'>
<div>
<div class='share-box'>
<div id='share-art'>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 256 || document.documentElement.scrollTop > 256) {
document.getElementById("share-art").style.visibility= "visible";
} else {
document.getElementById("share-art").style.visibility = "hidden";
}
}
</script>
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow'  title='Share On facebook'><i class='fa fa-facebook-square fa-2x'/></a>
<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow'  title='Share On Google+'> <i class='fa fa-google-plus-square fa-2x'/></a>
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url' rel='nofollow' title='Share On linkedin'> <i class='fa fa-linkedin-square fa-2x'/> </a>
<a class='twi-art' expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url' rel='nofollow'  title='Share On twitter'> <i class='fa fa-twitter-square fa-2x'/></a>
<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' rel='nofollow' title='Pinit'> <i class='fa fa-pinterest-square fa-2x'/></a>
<a class='wha-art' expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url' rel='nofollow' title='Share On whatsapp'> <i class='fa fa-whatsapp fa-2x'/></a> 
</div>
</div>
</div>
</div>
</b:if>

Copy Code

Now paste the above code just above closing body tag i.e., </body>. Now save the template and open a post to check the changes. That's it you have added Horizontal social share buttons to your blog that unhides when the user scrolls window. If you want those share buttons to adapt your blog template just change color codes in CSS. Color is given to some parts of the code. Green color indicates size, choose the value you want. Red color indicates the color of the icons on normal and hover. Pink color indicates icon code from font awesome. For the icons to display you need to include jquery otherwise it won't work. In this post, I have posted how to include jquery in blogger. If you have any queries comment below.