Floating Social Share Buttons for Blogger

CODE UPDATED !
Note: Does Not Work On Small Posts.

This tutorial will help you in adding Floating Social share buttons under every post of your blogger blog. I personally use this widget in my blog.

The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The widget contains four social sharing buttons - Facebook, Twitter, Google+, LinkedIn. There is a close button too to close down the floating share buttons.

A live demo can be seen on my blog itself. Just scroll down to the comments section and this floating social share buttons bar will appear. You can also close it by clicking the close button.

Once you have seen the demo to add this widget in your blog just follow the below steps.

Adding the Marker First go to

Blog Title → Template → Edit HTML. Press Ctrl + F

and search for code and paste the below given code just below .

NOTE : There maybe more than one so make sure that you have selected the right code.

Add the code and follow the next step.

Adding the HTML/CSS/JS in HTML Editor

To add this widget you have to go to Blog Title → Template → Edit HTML and add the below given code just above

. The code has been optimized and made lite so it loads faster.

/* Widget By 24-Tips.BlogSpot.Com */
<b:if cond='data:blog.pageType == "item"'>
    <script src='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-floating-share.js' type='text/javascript'/>
    <div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
    <div style='width: 800px; margin: 20px auto;'>
 <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'>
 <div class='facebook share-button'>
 <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'>
 <p>
facebook </p>
</div>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F My Facebook URL &send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div>
<div class='twitter share-button'>
 <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'>
 <p>
twitter </p>
</div>
<a class='twitter-share-button' data-via='AllBloggerTrick' href='https://twitter.com/share'> Tweet </a><script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
  </div>
<div class='google share-button'>
 <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'>
 <p>
google+ </p>
</div>
<div class='g-plusone' data-size='medium'>
 </div>
<script type='text/javascript'>
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
</script>
 </div>
<div class='linkedin share-button'>
 <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'>
 <p>
linkedin </p>
</div>
<script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div>
</div>
<div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'>
 Don't You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div>
</div>
</div>
</b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

After adding the code change change My Facebook URL with your Facebook Page's ID. Finally save the template.

You are done now. Now you and your visitors can see this awesome Floating Social Share Buttons in your blogger blog.

6 Komentar untuk "Floating Social Share Buttons for Blogger "

Balas

pslv seoa10

5 February 2019 at 23:18

Filament
In a single WordPress plugin, Filament contains a group of useful features including Flare, a social share button plugin that makes it easy for others to share your blogpost on Twitter, Facebook, Buffer, and more—even spots like Hacker News and Reddit. Other Filament apps include: MailChimp subscribe form, Google Analytics tracking, all-in-one profiles, code management, and share highlighter.