• Floating Social share buttons for Blogger.


    Social sharing buttons are very important for any Website. They are also a part in bringing traffic to a site. Long time back Blogger did not support having attractive sharing buttons. But as time progressed with improvement in every field some attractive social sharing buttons were being added to sites. Font awesome is very well known for its variety of icons. Icons from them are being widely used in numerous blogs and sites.

    Floating social share buttons for Blogger techapu
    On many sites floating share buttons with various styles are used. In most cases, these floating buttons are commonly seen in sites built under WordPress. The main advantage of WordPress is it powers 30% of web market, it has very large no of plugins. Users can simply install those plugins. But when it comes to Blogger there are no such Plugins. The user has to do some coding on HTML, CSS and some cases JavaScript and JQuery. But if you do not know coding, you can switch to some third party sites providing social share buttons with different features. But those buttons have to be loaded from a third-party URL. In some cases, if your site is fully loaded with third part URLs like font awesome, jquery, different APIs, and others then surely it affects page speed. So it is fully advisable to do small things like adding buttons on our own. You can go here to know different styles of Social sharing buttons for Blogger.

    A total of 10 styles were shown in that post linked above. Those styles can also be used here. You just need to edit some part and the rest remains the same. It will be an easy task with not much brain power. Every time remember you only need to change CSS part of the code and the rest can be left as it is. You need not bother about HTML and JavaScript.

    Different styles of Floating social share buttons for Blogger techapu

    You are going to see two different versions for floating share buttons. The images will be provided below. Both of them can be used for Desktop and Mobile version. The advantage of using these buttons is you can set one version of buttons for desktop and another version for mobiles. Most part of the code is the same for both the versions.

    Horizontal floating social share buttons for Blogger Mobile version
    Heart Social share buttons for Blogger
    Vertical floating social share buttons for Blogger Desktop version

    In the above images, you can two versions. One is floating vertically and the other is horizontal. Those two are used in my blog too. I have created them on my own suiting my requirements. For Desktop and Mobile version of the blog, they can be used. But I recommend using vertical buttons for Desktop and horizontal buttons for Mobile version. Using vertical buttons for Mobile version causes irritation to a user while reading the post. So it is highly advisable using horizontal buttons for mobile. Code for both is given below one by one.

    Vertical Buttons (Desktop)

    <style>
    .stickyvertical{
        position:-webkit-sticky;
        position:sticky;
        top:0;
        margin-left:-65px;
        margin-top:600px;
        float:left;
        width:10px;
        overflow-x:auto overflow-y: auto z-index: 999999
    }
    .share-title{
        color:#24e93b;
        padding-bottom:10px;
        font-size:13px;
        font-weight:700;
        position:relative;
        top:55px;
        margin-left:12px
    }
    .share-art{
        float:center;
        padding:45px 0 0;
        font-size:25px;
        font-weight:400
    }

    .share-art a{
        color:#fff;
        padding:3px 8px;
        margin-left:4px;
        border-radius:2px;
        margin-right:0
    }
    .share-art a:hover{
        color:#fff
    }
    .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
    }
    </style>

    <b:if cond='data:blog.isMobileRequest != &quot;true&quot;'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='stickyvertical'>
    <div>
    <div class='share-box'>
    <h3 class='share-title'>Share</h3>
     <div class='share-art'>               
    <a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' 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' target='_blank' 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' target='_blank' 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' target='_blank' 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' target='_blank' 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' target='_blank' title='Share On whatsapp'> <i class='fa fa-whatsapp fa-2x'/></a>                       
    </div>
    </div>
    </div>
      </div>
    </b:if></b:if>


    Copy Code

    In the above code between style tags () has to be added in CSS part of your template. On most cases it is above this part " ]]></b:skin> ". Sign into Blogger, go to Theme from options on the left side. In the displayed page under the box, you will see two options customize and Edit HTML. Choose Edit HTML, click on any part of the code and now use Ctrl + F to open find box. In the find box type the above letters in bold (without quotes) and hit enter. An indication (yellow)will be shown in the template code for the searched string or letters. Just above those letters paste CSS part (i.e., between style tags). The remaining part has to be added to the post body. It is not possible to tell the exact position where to add the code because one template is different from another.

    For some templates, you search for " main-wrapper " and place the remaining code (without style tags) above it. For some templates search for " <data:post.body/> " and place remaining code above it. If those two does not work search for " <b:if cond='data:blog.pageType == &quot;item&quot;'> " it appears more than once in blogs. So you need to choose the correct one. I cannot tell the exact position for this. Mostly on the second appearance of that, you can paste the code above it. If you need any help you can comment below.

    If that does not work then you can use this simple code and later add CSS to it for some attraction. You can paste this code above the closing body tag (i.e., </body> ). I also started with this code, later modified it with CSS and made it responsive. The above one is I am using for my blog. I used sticky to make the share buttons responsive. Below is also the code for vertical version and only works for Desktop mode.
    <b:if cond='data:blog.isMobileRequest != &quot;true&quot;'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='atset'>
    <div style='position:fixed;width:50px;height:auto;left:5px;top:150px;z-index:9999;'>

    <a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' title='Share On facebook'><i class='fa fa-facebook-square fa-4x'/> </a>

    <a 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-4x'/> </a>

    <a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url' rel='nofollow'> <i class='fa fa-linkedin-square fa-4x'/> </a>

    <a 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-4x'/> </a>

    <a expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url' rel='nofollow' title='Share On whatsapp'><i class='fa fa-whatsapp fa-4x'/> </a>


    <a expr:href='&quot;https://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-4x'/> </a>
    </div></div></b:if></b:if>

    Copy Code

    You can paste the above code above the closing body tag and do remember you need to include the following meta tag for that to work. As the icons were linked to font awesome. the link is <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>. Place that link anywhere in the head section. If you want to use the above floating share buttons for both desktop and mobile then you can remove the first if condition and the last closing if condition. But it is not recommended.

    Horizontal Buttons (Mobile)

    The code is below and the procedure is same for the first code shown above. If you got first one then you can simply paste this just below that code and remember CSS part has to be above" ]]></b:skin ". You can do modifications for CSS part if required.
    <style>
    .sticky{
        background-color:#fff;
        position:-webkit-sticky;
        position:sticky;
        top:0;
        z-index:999;
        margin-left:-21px;
        margin--right:-150px;
        overflow-x:hidden
    }
    .social-btns{
        padding-top:35px
    }
    .social-btns li{
        margin:8px;
        vertical-align:top
    }
    @media (min-width:768px){
        .social-btns li{
            margin:15px
        }
    }
    .social-btn-heart:hover .social-btn-heart-bg{
        -webkit-animation:beat 2s infinite;
        animation:beat 2s infinite
    }
    .social-btn-heart-icon{
        font-size:16px;
        color:#fff
    }
    .social-btn-heart:hover .social-btn-heart-icon{
        color:#fff
    }
    @-webkit-keyframes beat{
        0%,40%{
            -webkit-transform:scale(1.1);
            transform:scale(1.1)
        }
        20%,60%{
            -webkit-transform:scale(1);
            transform:scale(1)
        }
    }
    @keyframes beat{
        0%,40%{
            -webkit-transform:scale(1.1);
            transform:scale(1.1)
        }
        20%,60%{
            -webkit-transform:scale(1);
            transform:scale(1)
        }
    }
    .social-btn-heart-bg.twitter{
        color:#4cc4f2
    }
    .social-btn-heart-bg.facebook{
        color:#3b5998
    }
    .social-btn-heart-bg.google{
        color:#dd4b39
    }
    .social-btn-heart-bg.pinterest{
        color:#cb2027
    }
    .social-btn-heart-bg.linkedin{
        color:#0077B5
    }
    .social-btn-heart-bg.whatsapp{
        color:#34af23
    }
    </style>
    <b:if cond='data:blog.isMobileRequest != &quot;false&quot;'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='sticky'>
    <div class='social-btns'>
    ul class='social-btns'>
    <li>
    <a class='social-btn-heart fa-stack fa-lg' expr:href='&quot;https://twitter.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class='social-btn-heart-bg fa fa-heart fa-stack-2x twitter'/>
    <i class='social-btn-heart-icon fa fa-twitter fa-stack-1x'/>
    </a>
    </li>
    <li>
    <a class='social-btn-heart fa-stack fa-lg' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class='social-btn-heart-bg fa fa-heart fa-stack-2x facebook'/>
    <i class='social-btn-heart-icon fa fa-facebook fa-stack-1x'/>
    </a>
    </li>
    <li>
     <a class='social-btn-heart fa-stack fa-lg' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class='social-btn-heart-bg fa fa-heart fa-stack-2x google'/>
    i class='social-btn-heart-icon fa fa-google fa-stack-1x'/>
    </a>
    </li>
    <li>
    <a class='social-btn-heart fa-stack fa-lg' 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' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class='social-btn-heart-bg fa fa-heart fa-stack-2x pinterest'/>
    <i class='social-btn-heart-icon fa fa-pinterest-p fa-stack-1x'/>
    </a>
    </li>
    <li>
    <a class='social-btn-heart fa-stack fa-lg' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url' rel='nofollow' target='_blank'>
    <i class='social-btn-heart-bg fa fa-heart fa-stack-2x linkedin'/>
    <i class='social-btn-heart-icon fa fa-linkedin fa-stack-1x'/>

    </a>
    </li>
    <li>
    <a class='social-btn-heart fa-stack fa-lg' expr:href='&quot;whatsapp://send?text=&quot; + data:blog.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
    <i class='social-btn-heart-bg fa fa-heart fa-stack-2x whatsapp'/>
    <i class='social-btn-heart-icon fa fa-whatsapp fa-stack-1x'/>
    </a>
    </li>
    </ul>
    </div>
    </div>
    </b:if></b:if>

    Copy Code

    That's it those are the Floating share buttons for Blogger that can be used differently for both mobile and desktop version of your blog. If you any problem occurs you can comment below for quick responses. If you like this post, share it. Switch on to this link for some Quotes on Environment.
  • No comments:

    Post a Comment