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'/>
]]></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 == "item"'><b:if cond='data:blog.pageType != "static_page"'>
<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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</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!