Wednesday, 1 July 2015

Floating Social Media Widget with Total Count for Blogger with Show and Hide Button

tips4tricx
Sharing widgets are great way to share our knowledge and information today i am sharing a cool widgets to my readers to share their knowledge and information
so now lets start how to add sharing widget to blogger template 

Step 1) Go to Blogger.com> Select your blog> Go to template area and do backup of your template

Step 2) Click on edit html and wait to load template code box

Step 3) Search for <head> and paste the font awesome icons CSS link just 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 too if not already added.

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

Step 3) Now add the CSS code - Find out ]]></b:skin> this code line and paste the whole CSS code just before it as it is.

/*----------------------------------------------------------------------------
Floating Social Media Share Buttons bar With Total Share Count
 and Show Hide Button
Designed by:: http://www.tips4tricx.blogspot.com
Shares Count Code by:: http://donreach.com/social-share-count
 issued under 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 solid #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;
}
.tips4tricx-Floating-SocialBar > ul {
  padding: 0;
  margin:0;
}
.tips4tricx-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;
}
.tips4tricx-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;
}
.tips4tricx-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%;
}
.tips4tricx-Floating-SocialBar .facebook-button-tab .tab-overlay {
  background: #4965B4;
}
.tips4tricx-Floating-SocialBar .googleplus-button-tab .tab-overlay {
  background: #E06352;
}
.tips4tricx-Floating-SocialBar .tweeter-button-tab .tab-overlay {
  background: #00A8E8;
}
.tips4tricx-Floating-SocialBar .linkedin-button-tab .tab-overlay {
  background: #0077B5;
}
.tips4tricx-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;
}
.tips4tricx-Floating-SocialBar .tab-wrap {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tips4tricx-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;
}
.tips4tricx-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%;
}
.tips4tricx-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;
}
.tips4tricx-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;
}
.tips4tricx-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 and just before this tag, paste the whole HTML and 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='tips4tricx-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='tipsandtricx' 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=?", function (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>

Now save your template and all done! 
Previous Post
Next Post

post written by:

0 Google+:

Please Keep in mind that if there is a link in your comment section it will be considered as spam. Comment with link will be removed instantly.
Comment to get answered or to solve a problem not to spam. Thanks