The Best Floating Social Share V2 For Blogger to Increase Traffic

So this is one of the best Floating Social share for blogger with a great design and it works well

This will help you out to gain more traffic because this is one of the quickest way to let your Audience share your topic , This is the Latest Floating Social Share Version 2, So To install this you must follow the guide carefully to avoid Problems

FIRST STEP

First as usual Go to Blogger.com and go to your Blog Dashboard ,

Go to templates and Click Edit HTML so we can proceed to the next step

SECOND STEP

Second we need to install the FontsAwesome 4.2

Search <head>

And paste the code below

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

THIRD STEP

Add an Google JavaScript Binary if not yet added to your template

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

FOURTH STEP

Now Press CTRL+F to search code in your template

and search for </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.Rhonznet.blogspot.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.twistBlogger_SocialBar {
position: fixed;
bottom: 30%;
padding: 0;
left:0;
background: none;
text-align: center;
margin: 0 auto;
z-index: 99999999;
}
.twistBlogger_SocialBar label:hover {
cursor: pointer;
opacity:1;
}
.twistBlogger_SocialBar label {
text-align: center;
opacity: 0.4;
width: 50px;
background: #3A3939;
color: #FFF;
border: 0;
font-family: FontAwesome;
display: block;
font-size: 12px;
padding: 0px 0px;
border-radius: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: absolute;
line-height: 1.5em;
margin-top: 346px;
}
input.ShowHide_Button:checked + label {
transform-origin: 50% 0%!important;
-webkit-transform-origin: 50% 0%!important;
-moz-transform-origin: 50% 0%!important;
-ms-transform-origin: 50% 0%!important;
-o-transform-origin: 50% 0%!important;
opacity: 1;
-webkit-transform: translateX(0px) rotateY(-180deg);
-moz-transform: translateX(0px) rotateY(-180deg);
-ms-transform: translateX(0px) rotateY(-180deg);
-o-transform: translateX(0px) rotateY(-180deg);
transform: translateX(0px) rotateY(-180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
border: 1px solid #3A3939;
border-radius: 50px 0px 0px 50px;
width: 30px;
max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
-webkit-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);
-ms-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);
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
margin-left: -75px !important;
}
input.ShowHide_Button {
display: none;
}
.twistBlogger_SocialBar .social_menu {
display: inline-block;
float: left;
list-style:none;
max-width:50px;
margin: 0;
padding: 0;
}
.twistBlogger_SocialBar .social_menu .button_facebook {
background: #3a579a;
}
.twistBlogger_SocialBar .social_menu .button_facebook:hover {
background: #314a83;
}
.twistBlogger_SocialBar .social_menu .button_twitter {
background: #00abf0;
}
.twistBlogger_SocialBar .social_menu .button_twitter:hover {
background: #0092cc;
}
.twistBlogger_SocialBar .social_menu .button_googleplus {
background: #df4a32;
}
.twistBlogger_SocialBar .social_menu .button_googleplus:hover {
background: #be3f2b;
}
.twistBlogger_SocialBar .social_menu .button_pinterest {
background: #cd1c1f;
}
.twistBlogger_SocialBar .social_menu .button_pinterest:hover {
background: #ae181a;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon {
background: #ea4b24;
}
.twistBlogger_SocialBar .social_menu .button_stumbleupon:hover {
background: #c7401f;
}
.twistBlogger_SocialBar .social_menu .button_linkedin {
background: #2554BF;
}
.twistBlogger_SocialBar .social_menu .button_linkedin:hover {
background: #224EB4;
}
.twistBlogger_SocialBar .social_menu .button_facebook .count,
.twistBlogger_SocialBar .social_menu .button_twitter .count,
.twistBlogger_SocialBar .social_menu .button_googleplus .count,
.twistBlogger_SocialBar .social_menu .button_pinterest .count,
.twistBlogger_SocialBar .social_menu .button_stumbleupon .count,
.twistBlogger_SocialBar .social_menu .button_linkedin .count {
color: #fff!important;
padding-top: 4px;
font-size: 13px !important;
line-height: 1.2em;
font-family: sans-serif;
font-weight: bold;
}
.twistBlogger_SocialBar .social_menu > ul {
margin: 0;
padding: 0;
list-style: none;
}
.twistBlogger_SocialBar .social_menu .share {
background: #FFF;
color: #807F7F;
font-size: 11px;
height: 45px !important;
}
.twistBlogger_SocialBar .social_menu .share .count.h4 {
font-size: 18px;
font-family: sans-serif;
color: #424242;
height: 25px !important;
line-height: 1.5em;
font-weight: bold;
margin: 0px !important;
}
.twistBlogger_SocialBar .social_menu .share .h6 {
padding-bottom: 3px;
font-family: sans-serif;
margin: 0px !important;
line-height: 1.5em;
font-size: 11px;
}
.twistBlogger_SocialBar .social_menu > ul > li {
margin: 0px 0px 0px 0px;
position: relative;
text-align: center;
list-style: none;
list-style-type: none;
padding: 0px;
border: 0px;
border-left: 0 solid rgba( 0,0,0,.4);
height: 50px;
width: 50px;
overflow: hidden;
display: block;
box-sizing: border-box;
background: none;
box-sizing: content-box;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover {
border-left: 5px solid rgba( 0,0,0,.3);
width: 40px;
}
.twistBlogger_SocialBar .social_menu > ul > li i {
color: #fff !important;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.twistBlogger_SocialBar .social_menu > ul > li:hover i {
opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.twistBlogger_SocialBar {
bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.twistBlogger_SocialBar {
bottom: 15% !important;
}
}
@media only screen and (max-width:479px) {
.twistBlogger_SocialBar {
bottom: 10% !important;
display: none !important; /*---delete this code line to make it appear on mobile--*/
}
}
</style>
</b:if>

Note : Remove display: none !important; if you want to show social share in Mobile

FINAL STEP

Now you need to Add HTML and JavaScript API

So Search this Code in your template

If this code show up twist choose the second code appearance

Now paste this Code below of

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='twistBlogger_SocialBar'>
<input class='ShowHide_Button' id='twiSter' type='checkbox'/>
<label for='twiSter'><i class='fa fa-arrow-left'/></label>
<div class='ShowHideMe'>
<div class='social_menu'>
<div class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='h6'>SHARES</div>
</div></div>
<ul>
<li class='button_facebook'>
<a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @Rhonznet - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.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>
</b:if>
</b:if>

Change The Twitter Username @RhonzNET

Now save your template and visit your Blog post

FINAL WORDS :

Thank you, by the way this Cool Widget is From Twistblogger so big credit

Satbir Partial, So if you like this post care to share

Labels

The Best Floating Social Share V2 For Blogger to Increase Traffic

The Best Floating Social Share V2 For Blogger to Increase Traffic

0 Response to "The Best Floating Social Share V2 For Blogger to Increase Traffic"

Post a Comment