Floating Social Media Buttons Bar for Blogger alongside Total Shares Count in addition to Show Hide Button

Floating Social Media Buttons bar for Blogger

Last fourth dimension I had shared Social media portion buttons bar to add together below post titles for blogger together with right forthwith I am sharing floating social media portion buttons bar amongst cool sum shares count box, flip animation final result  and a tiny demo enshroud clitoris inwards bottom of it.

Social media platforms play a vital role inwards the success of our content to popular off viral together with generate massive traffic inwards real brusk bridge of fourth dimension than to start getting organic traffic from search engines because they accept fourth dimension together with yous ask to generate but about character backlinks to concur rankings on kickoff page together with outrank your competitors.

So in that place is no argue for non to utilization friendly social media portion buttons on our blogs.

You tin flame run across the hell lot of plugins similar this available for WordPress on Codecanyon.net selling similar crazy which inspired me to brand 1 for blogger together with that is for free. 🙂

It took me almost four days to blueprint my floating social media portion buttons bar amongst a bunch of powerful features together with cool animation effects amongst CSS3.

Important Note: Respect copyrights. You do Not receive got Permission to re-create together with portion my code on your blog. There is no credit backlink included, just what yous need, but yous can Not Remove the Comments added to CSS code, popular off on them intact. You tin flame utilization it on whatever number of your blogs or websites for both, personal & commercial.
Total Share Count Box Credit: donReach.com code issued under GNU General Public License.
Icons credit: FontAwesome 4.0.3

Quick Note:-
*New Version Available: Add Floating Social Media Share Buttons Widget For Blogger With Custom Buttons and Shares Count Option.

Features of Floating Social Media Share Buttons Bar

It is sum of powerful features together with yous ask to know them to empathize how it plant thence I receive got made a petty Infographic, run across below.

Demo of Floating Social Media Buttons bar for Blogger

1) Total Shares Count Box: It counts all the shares of URL on unlike social media platforms together with shows them inwards the sum count box.

2) FontAwesome Icons: I receive got used font Awesome icons on clitoris overlay amongst cool CSS effects.

3) Flip Animation effect: On mouse hover, button’s overlay flips to the right side together with the hovered social media clitoris becomes visible.

4) Show Hide Button: There is petty “hide button” inwards the bottom of social media bar which allows users to enshroud the social media buttons on click together with and then “Show button” becomes visible.

5) Less JavaScript More HTML together with CSS3: I receive got tried yesteryear best together with used HTML together with CSS3 to brand the most of its design. Show enshroud clitoris is purely made amongst HTML together with CSS3.

So did it impress you? Let’s motility on to installation.

Update 1:-
Problem: Total Shares API uses cache together with they are cleared afterwards 24 hrs thence sum shares count box may accept maximum upwards to 24 hrs to update sum shares.

Baca Juga:  Add Floating Social Media Share Buttons Widget For Blogger - Version 2

Solution: You tin flame download the PHP scripts from the Github projection page (links are given higher upwards inwards credits) together with upload them on a Free hosting service like equally OpenShift together with alter cache fourth dimension within configuration.php file inwards seconds to minimum fourth dimension yous desire to asking update of sum shares (correct me if I am wrong).

I don’t know how to popular off far piece of work together with yous tin flame observe the information on the respected website or at Github project.

Update 2:-
I constitute the solution: Now in that place is no employment of non updating the sum shares count alive because I receive got downloaded these scripts together with uploaded them to my OpenShift account. I did non utilization whatever cache file thence your sum count of shares volition fetch alive counts from all major social media platforms.

Although the chore was actually daunting for me to upload these scripts equally OpenShift does non permit to upload anything to our applications straight from their server. Instead, they permit it offline from ii software programs called Git together with Ruby. These both software piece of work from the command prompt and together with then connect to your  OpenShift account.

Ultimately I made it together with forthwith I learned to utilization Git together with Ruby too. 🙂

Add Floating Social Media Share Buttons Bar to Blogger

Adding it to your blogger weblog is super slow together with volition non accept much of your fourth dimension thence follow but about irksome steps together with acquire your fashionable floating social media buttons bar ready.

Step 1) Login to your Blogger accountSelect your blog – popular off to Template section – click on Edit HTML – forthwith click anywhere within your template code box – press Ctrl+a together with salve a backup of your template code first.

You tin flame also download your template code backup inwards .xml format yesteryear going to Template – click on Top Right Side link Backup/Restore together with download it from there.

Step 2) Add Font Awesome icons to your blogger blog – Find this opening tag <head> together with glue the font awesome icons CSS link but below this opening tag.

<link href=’http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/>

Add Google JavaScript Library link besides if non already added.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’ type=’text/javascript’/>

Step 3) Now add together the CSS code – Find out ]]></b:skin> this code business together with glue the whole CSS code but earlier it equally it is.

/*—————————————————————————-
Floating Social Media Share Buttons bar With Total Share Count
 and Show Hide Button
Designed by:: omelto.com
Shares Count Code by:: http://donreach.com/social-share-count
 issued nether GNU GPL Licence
Icons:: FontAwesome 4.0.3
************** Do Not Remove These Credits *************
—————————————————————————–*/
.twistMe {
  position: fixed;
  bottom: 25%;
  padding: 0;
  background: none;
  text-align: center;
  margin: 0 auto;
  z-index: 99999999;
}
.twistMe label:hover {
  cursor: pointer;
}
.twistMe label {
  text-align: center;
  width: 62px;
  background: #3A3939;
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  display: block;
  font-size: 12px;
  padding: 1px 0px;
  border-radius: 0;
  transition: all .4s ease-in-out;
  position: absolute;
  margin-top: 305px;
}
input.ShowHideButton:checked + label {
  transform-origin: 50% 0%!important;
  -webkit-transform-origin: 50% 0%!important;
  -ms-transform-origin: 50% 0%!important;
  -moz-transform-origin: 50% 0%!important;
  -o-transform-origin: 50% 0%!important;
  opacity: 1;
  transform: translateX(0px) rotateY(-180deg);
  -webkit-transform: translateX(0px) rotateY(-180deg);
  -ms-transform: translateX(0px) rotateY(-180deg);
  -moz-transform: translateX(0px) rotateY(-180deg);
  -o-transform: translateX(0px) rotateY(-180deg);
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  border: 1px enterprise #3A3939;
  border-radius: 50px 0px 0px 50px;
  width: 30px;
}
input.ShowHideButton , .ShowHideMe {
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
  -o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHideButton:checked , .ShowHideMe {
  margin-left: -75px;
}
input.ShowHideButton {
display: none;
}
.twistBlogger-Floating-SocialBar {
  display: inline-block;
  margin: 0px;
  float: left;
  background: #DFDFDF;
  padding: 0;
  z-index: 9999!important;
  border-radius: 1px;
}
.twistBlogger-Floating-SocialBar > ul {
  padding: 0;
  margin:0;
}
.twistBlogger-Floating-SocialBar > ul > li {
  margin: 0px 0px 1px -1px;
  position: relative;
  text-align: center;
  list-style: none;
  list-style-type: none;
  padding: 5px 0px 0px 0px;
  height: 70px;
  width: 63px;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
  background: #000000;
}
.twistBlogger-Floating-SocialBar .tab-overlay .fa {
  font-size: 25px;
  text-align: center;
  text-shadow: 0px 0px 20px #FFFFFF;
  color: #FFFFFF;
  padding: 9px 9px;
  line-height: 1.7em;
}
.twistBlogger-Floating-SocialBar .tab-warp {
  perspective: 500px;
  perspective-origin: 0% 50%;
  -webkit-perspective: 500px;
  -webkit-perspective-origin: 0% 50%;
  -moz-perspective: 500px;
  -moz-perspective-origin: 0% 50%;
}
.twistBlogger-Floating-SocialBar .facebook-button-tab .tab-overlay {
  background: #4965B4;
}
.twistBlogger-Floating-SocialBar .googleplus-button-tab .tab-overlay {
  background: #E06352;
}
.twistBlogger-Floating-SocialBar .tweeter-button-tab .tab-overlay {
  background: #00A8E8;
}
.twistBlogger-Floating-SocialBar .linkedin-button-tab .tab-overlay {
  background: #0077B5;
}
.twistBlogger-Floating-SocialBar .tab-overlay {
  margin-top: -5px !important;
  height: 70px;
  width: 63px;
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 99999;
}
.twistBlogger-Floating-SocialBar .tab-wrap {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.twistBlogger-Floating-SocialBar .tab-flip .tab-overlay {
  display: block;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}
.twistBlogger-Floating-SocialBar .tab-flip:hover .tab-overlay {
  display: block!important;
  width: 0px;
  opacity: 0.5;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transform: translateX(-5px) rotateY(-95deg);
  -webkit-transform: translateX(-5px) rotateY(-95deg);
  -moz-transform: translateX(5px) rotateY(-95deg);
  transform-origin: 0% 100%;
}
.twistBlogger-Floating-SocialBar .count {
  padding-top: 4px;
  height: 25px;
  position: absolute;
  background: #3A3939!important;
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  bottom: 100%;
  font-family: sans-serif;
  font-weight: bold;
  left: 0;
  right: 0;
  font-size: 15px;
  z-index: 1!important;
}
.twistBlogger-Floating-SocialBar .count.h4:after {
  content: “\f064”;
  top: 5px;
  border-radius: 50px;
  font-family: fontawesome;
  font-size: 15px;
  left: 4px;
  position: absolute;
  width: 0;
  height: 0;
}
.twistBlogger-Floating-SocialBar .share-btn {
  margin: 0px 0px 1px 0;
  background: #3A3939;
  position: relative;
  text-align: center;
  font-family: cursive;
  font-weight: bold;
  font-size: 13px;
  padding: 0px 0px 1px 0px;
  border: 0;
  color: #FFFFFF;
}

Step 4) Add HTML code – Find out this closing </body> tag together with but earlier this tag, glue the whole HTML together with JavaScript codes given below.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div class=’twistMe’>
  <input class=’ShowHideButton’ id=’twiSter’ type=’checkbox’/>
  <label for=’twiSter’><i class=’fa fa-backward’/></label>
  <div class=’ShowHideMe’>
<div class=’twistBlogger-Floating-SocialBar’>
<div class=’share’>
    <div class=’share-btn’ data-service=’total’>
        <div class=’count h4’/>
        <div class=’h6′>SHARES</div>
    </div>
    </div>
<ul>
<li>
<div class=’facebook-button-tab tab-flip’>
<div class=’tab-wrap’>
<div class=’tab-overlay’>
<i class=’fa fa-facebook’/>
</div>
</div>
<div class=’fb-like’ data-action=’like’ data-layout=’box_count’ data-share=’false’ data-show-faces=’false’/>
</div>
</li>
<li>
<div class=’googleplus-button-tab tab-flip’>
<div class=’tab-wrap’>
<div class=’tab-overlay’>
<i class=’fa fa-google-plus’/>
</div>
</div>
<div class=’g-plusone’ data-size=’tall’/>
</div>
</li>
<li>
<div class=’tweeter-button-tab tab-flip’>
<div class=’tab-wrap’>
<div class=’tab-overlay’>
<i class=’fa fa-twitter’/>
</div>
</div>
<a class=’twitter-share-button’ data-count=’vertical’ data-via=’TwistBlogger‘ href=’https://twitter.com/share’>Tweet</a>
</div>
</li>
<li>
<div class=’linkedin-button-tab tab-flip’>
<div class=’tab-wrap’>
<div class=’tab-overlay’>
<i class=’fa fa-linkedin’/>
</div>
</div>
<script data-counter=’top’ type=’IN/Share’/>
</div>
</li>
</ul>
  </div>
  </div>
</div>
<script type=’text/javascript’>//<![CDATA[
$(document).ready(function () {
  var shareUrl = document.location.href.toLowerCase();
    $.getJSON(‘http://sharecount.twistblogger.com/?url=’ + encodeURIComponent(shareUrl) + “&callback=?”, business office (data) {
        shares = data.shares;
        $(“.count”).each(function (index, el) {
            service = $(el).parents(“.share-btn”).attr(“data-service”);
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + “M”;
                else count = count + “k”;
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<script src=’//platform.linkedin.com/in.js’ type=’text/javascript’> lang: en_US</script>
<script type=’text/javascript’>
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,&quot;script&quot;,&quot;twitter-wjs&quot;));
</script>
<div id=”fb-root”></div>
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/>
</b:if>
</b:if>

Editing: You ask to edit the higher upwards code where yous receive got to supersede the highlighted text TwistBlogger with your Twitter USERNAME. It volition last added to your tweets whenever someone create portion your spider web page URL on tweeter. This agency yous volition acquire the notifications close who shared them.

Baca Juga:  Memperbaiki Thumbnail Popular Post Semoga Seo

Step 5) Remaining measuring is to SAVE your template code together with you’re done. Visit whatever of your weblog postal service together with run across the floating social media portion buttons bar hanging to the left side of your blog.

Was it a smoothen installation? Did it piece of work for you? Please written report if yous constitute whatever põrnikas or yous could non popular off far possible to piece of work for you.

I ask your favor, delight create portion at to the lowest degree on 1 social media platform yous dearest together with spread the discussion close it. 🙂

I’ll create my best to assistance yous equally before long equally yous enquire for whatever help. Stay blessed!

Update:- New Version Available
Add Floating Social Media Share Buttons to Blogger Posts Version 2