Add Dsquare Floating Share Bars With Social Media Buttons on Blogger

Social Networking sites are ruling the whole internet. While them there will not be better communication because all news to rumors are spread all over the world through these sites only! In this case, using them in Blogger blogs is an extra advantage for all blogger and websites owners. So the social networking sites itself has developed many sharing tools for webpages. Likewise there are also other third party social sharing tool developers like Addthis, Shareaholic, Flare Sharing Widget and the list goes on. The thing which all the plugin/widget do is just sharing the article in social media websites. That makes the readers to share!

Now in this article I’m going to share another awesome Social Sharing Floating widget for Blogger Blogs. Before getting into the topic, I need to thank Mehul Mohan for sharing this awesome widget for blogger. Okay, coming back to the point, this widget is fully based on java script API and with CSS3. For this tool no image is needed or used. The awesome feature of this widget will be its loading speed. Loading speed of this tool is fast! And retina effect is used in this sharing tool.

Click here for Live Preview

Let’s see how to add Dsquare Social Floating Bars with various share button on blogger blogs?

How to Add Dsquare Floating Share Bars in Blogger?

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: Then paste the following code just above/before ]]></b:skin> tag,

div#socialbar_mpt {
position: fixed;
box-shadow: 0 0 3px 0px rgb(197, 197, 197);
right: 0;
background: white;
z-index: 999;
}
#socialbar_mpt .icon {
padding: 7px 18px;
display: block;
text-align: center;
cursor: pointer;
font-size: 26px;
-webkit-font-smoothing: subpixel-antialiased;
}
#facebook {
color:#3b5998;
}
#twitter {
color:#4099ff;
}
#googleplus {
color:#cd4030;
}
#linkedin {
color:#0074b3;
}
#comments {
color:#6bb315;
}
#comments:hover {
color: white;
background:#6bb315;
}
#googleplus:hover {
color: white;
background:#cd4030;
}
#twitter:hover {
color: white;
background:#4099ff;
}
#linkedin:hover {
color: white;
background:#0074b3;
}
#facebook:hover {
color: white;
background:#3b5998;
}
#socialbar_mpt #sharetop {
background: rgb(87, 87, 87);
color: white;
cursor:default;
}
.credit {
font-size: 1px;
opacity: 0.1;
display: block;
text-align: center;
}

Step 3: Now again Paste the following code just after/below <body> tag,

<b:if cond=’data:blog.pageType == “item”‘>
<div id=”socialbar_mpt”>
<div class=’icon fa fa-bar-chart-o’ id=”sharetop”></div>
<div class=”icon fa fa-facebook” id=”facebook”></div>
<div class=”icon fa fa-twitter” id=”twitter”></div>
<div class=”icon fa fa-google-plus” id=”googleplus”></div>
<div class=”icon fa fa-linkedin” id=”linkedin”></div>
<div class=”icon fa fa-comments” id=”comments”></div>
</div>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<link rel=”stylesheet” href=”http://fontawesome.io/assets/font-awesome/css/font-awesome.css” />

<script>

var _0x2654=[“x6Fx75x74x65x72x48x65x69x67x68x74″,”x64x69x76x23x73x6Fx63x69x61x6Cx62x61x72x5Fx6Dx70x74″,”x68x65x69x67x68x74″,”x74x6Fx70″,”x63x73x73″,”x6Cx6Fx63x61x74x69x6Fx6E”,”x63x6Fx6Ex74x65x6Ex74″,”x61x74x74x72″,”x6Dx65x74x61x5Bx6Ex61x6Dx65x3Dx27x64x65x73x63x72x69x70x74x69x6Fx6Ex27x5D”,”x20x2D”,”x68x74x74x70x73x3Ax2Fx2Fx77x77x77x2Ex66x61x63x65x62x6Fx6Fx6Bx2Ex63x6Fx6Dx2Fx73x68x61x72x65x72x2Fx73x68x61x72x65x72x2Ex70x68x70x3Fx75x3D”,””,”x77x69x64x74x68x3Dx36x30x30x2Cx68x65x69x67x68x74x3Dx34x30x30″,”x6Fx70x65x6E”,”x63x6Cx69x63x6B”,”x23x66x61x63x65x62x6Fx6Fx6B”,”x68x74x74x70x73x3Ax2Fx2Fx74x77x69x74x74x65x72x2Ex63x6Fx6Dx2Fx69x6Ex74x65x6Ex74x2Fx74x77x65x65x74x3Fx75x72x6Cx3D”,”x26x74x65x78x74x3D”,”x23x74x77x69x74x74x65x72″,”x68x74x74x70x73x3Ax2Fx2Fx70x6Cx75x73x2Ex67x6Fx6Fx67x6Cx65x2Ex63x6Fx6Dx2Fx73x68x61x72x65x3Fx75x72x6Cx3D”,”x23x67x6Fx6Fx67x6Cx65x70x6Cx75x73″,”x68x74x74x70x73x3Ax2Fx2Fx77x77x77x2Ex6Cx69x6Ex6Bx65x64x69x6Ex2Ex63x6Fx6Dx2Fx63x77x73x2Fx73x68x61x72x65x3Fx75x72x6Cx3D”,”x23x6Cx69x6Ex6Bx65x64x69x6E”,”x23x63x6Fx6Dx6Dx65x6Ex74x73″,”x3Ax76x69x73x69x62x6Cx65″,”x69x73″,”x61x2Ex63x72x65x64x69x74″,”x6Cx65x6Ex67x74x68″,”x68x72x65x66″,”x68x74x74x70x3Ax2Fx2Fx77x77x77x2Ex6Dx79x70x72x65x6Dx69x75x6Dx74x72x69x63x6Bx73x2Ex63x6Fx6D”,”x72x65x6C”,”x4Bx69x6Ex64x6Cx79x20x52x65x69x6Ex73x74x61x6Cx6Cx20x54x68x65x20x57x69x64x67x65x74x20x41x67x61x69x6Ex20x46x72x6Fx6Dx20x68x74x74x70x3Ax2Fx2Fx77x77x77x2Ex6Dx79x70x72x65x6Dx69x75x6Dx74x72x69x63x6Bx73x2Ex63x6Fx6Dx2Fx73x6Cx65x65x6Bx2Dx73x6Fx63x69x61x6Cx2Dx73x68x61x72x65x2Dx62x61x72x2Ex6Dx70x74″,”x68x74x74x70x3Ax2Fx2Fx77x77x77x2Ex6Dx79x70x72x65x6Dx69x75x6Dx74x72x69x63x6Bx73x2Ex63x6Fx6Dx2F”];$(function (){var _0xdd72x1=$(_0x2654[1])[_0x2654[0]]()/2;var _0xdd72x2=$(window)[_0x2654[2]]()/2;var _0xdd72x3=_0xdd72x2-_0xdd72x1;$(_0x2654[1])[_0x2654[4]](_0x2654[3],_0xdd72x3);var _0xdd72x4=encodeURIComponent(window[_0x2654[5]]);var _0xdd72x5=$(_0x2654[8])[_0x2654[7]](_0x2654[6])+_0x2654[9];$(_0x2654[15])[_0x2654[14]](function (){window[_0x2654[13]](_0x2654[10]+_0xdd72x4,_0x2654[11],_0x2654[12]);} );$(_0x2654[18])[_0x2654[14]](function (){window[_0x2654[13]](_0x2654[16]+_0xdd72x4+_0x2654[17]+_0xdd72x5,_0x2654[11],_0x2654[12]);} );$(_0x2654[20])[_0x2654[14]](function (){window[_0x2654[13]](_0x2654[19]+_0xdd72x4,_0x2654[11],_0x2654[12]);} );$(_0x2654[22])[_0x2654[14]](function (){window[_0x2654[13]](_0x2654[21]+_0xdd72x4,_0x2654[11],_0x2654[12]);} );$(_0x2654[23])[_0x2654[14]](function (){window[_0x2654[5]]=_0x2654[23];} );setInterval(function (){if(!$(_0x2654[26])[_0x2654[25]](_0x2654[24])||!$(_0x2654[26])[_0x2654[27]] >0||$(_0x2654[26])[_0x2654[7]](_0x2654[28])!=_0x2654[29]||$(_0x2654[26])[_0x2654[7]](_0x2654[30])){alert(_0x2654[31]);window[_0x2654[5]]=_0x2654[32];} ;} ,10000);} );

</script>
</b:if>

Step 4: Now Save your template and enjoy!

Hope you guys will surely like this Dsquare Widget! If it so kindly do some likes & share of this post with your friends and make us to grow! Share your thoughts in comments below:)