Sunday, 29 September 2013

Social Sharing Widget For Blogger

Social sharing widget is important for SEO, as it enables people to share your post which in turn drive traffic to your. Putting a social sharing widget on your blog invovle 2 simple step.

Just follow the steps below


A. 1. Go To Blogger -> Template -> Edit HTML -> Proceed

2. Search For ]]></b:skin> (Tip:- Use Ctrl + F to search)

3. Just above ]]></b:skin> copy and paste the following code



/* Social Sharing Widget by www.Bloggernaija.com */ ul.BV-social {
list-style:none;
display:inline-block;
margin:15px auto;
} ul.BV-social li {
display:inline;
float:left;
background-repeat:no-repeat;
} ul.BV-social li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative; text-decoration:none;
} ul.BV-social li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff; z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
} ul.BV-social li.BV-facebook {
background-image:url
(http://4.bp.blogspot.com/-8ytEfbySXig/
UXAi29z6H1I/AAAAAAAATsU/35OOe_qjfw8/
s1600/facebook.png
);
} ul.BV-social li.BV-twitter {
background-image:url(http://2.bp.blogspot.com/-
peultw0KzcE/UXAjH5svYsI/AAAAAAAATsc/
kmusD1g4Gd8/s1600/twitter.png
);
} ul.BV-social li.BV-googleplus {
background-image:url(http://2.bp.blogspot.com/-
W1MmicvzVos/UXAjZtjjOtI/AAAAAAAATsk/
HrYy0wheGLY/s1600/google+.png
);
} ul li.BV-pinterest {
background-image: url(http://3.bp.blogspot.com/-
eUmzruvlDhY/UXAjpEEmrSI/AAAAAAAATss/
arCd27zBg7Y/s1600/pinterest.png
);
} ul.BV-social li.BV-stumbleupon {
background-image:url(http://2.bp.blogspot.com/-
mkjdUUjgfpU/UXAkLTKaTJI/AAAAAAAATs0/
nw7gZ7Smcos/s1600/stumbleupon.png
);
} ul.BV-social li.BV-delicious {
background-image:url(http://3.bp.blogspot.com/-
hteC0d0o9ys/UXAkbZnDDsI/AAAAAAAATs8/
RPhFI2IQtr4/s1600/delicious.png
);
} ul.BV-social li.BV-linkedin {
background-image:url(http://2.bp.blogspot.com/–
meaqxVda18/UXAkxjneLsI/
AAAAAAAATtE/83R6N6edo84/s1600/
linkedin.png
);
} ul.BV-social li.BV-reddit {
background-image:url(http://2.bp.blogspot.com/-_
TAhkkXEhi0/UXAlcTROdEI/
AAAAAAAATtM/6LDy6YYBFWI/s1600/reddit.png
);
} ul.BV-social li.BV-technorati {
background-image:url(http://2.bp.blogspot.com/-
Q4ZkKogYAdM/UXAmA_m6wjI/AAAAAAAATtU/
PY2lL1EB7uE/s1600/technorati.png
);
} #BV-cssanimation:hover li {
opacity:0.2;
} #BV-cssanimation li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
} #BV-cssanimation li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms; } #BV-cssanimation li:hover {
opacity:1;
} #BV-cssanimation li:hover a strong {
opacity:1;
top:-10px;
}
/* Social Sharing Widget by www.Bloggernaija.com */



B. Search for <data:post.body/> just below it copy and paste the following code and save the template.


<b:if cond='data:blog.pageType ==
"item"'>
<div style='font-size: 22px;'><b>Like the Post?
Do share with your Friends.</b></div>
<ul class='BV-social' id='BV-cssanimation'>
<li class='BV-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,&apos;sharer&apos;,&apos;toolbar=0, status=0,width=626,height=436&apos;); return
false;' rel='nofollow'><strong>Facebook</
strong></a>
</li>
<li class='BV-twitter'>
<a expr:href='"http://twitter.com/home? status=" + data:post.title + " — " +
data:post.url ' rel='nofollow' target='_
blank'><strong>Twitter</strong></a>
</li>
<li class='BV-googleplus'>
<a expr:href='"https:// plusone.google.com/_/+1/confirm?
hl=en&url=
" + data:post.url'
onclick='window.open
(this.href,&apos;sharer&apos;,&apos;toolbar=0,
status=0,width=626,height=436&apos;); return
false;' rel='nofollow' target='_ blank'><strong>Google+</strong></a>
</li>
<li class='BV-pinterest'>
<a href='javascript:void((function()%7Bvar%
20e=document.createElement(&apos;script&apos;)
;e.setAttribute(&apos;type&apos;,&apos;text/ javascript&apos;);e.setAttribute
(&apos;charset&apos;,&apos;UTF-8&apos;)
;e.setAttribute(&apos;src&apos;,&apos;http://
assets.pinterest.com/js/pinmarklet.js?r=&apos;
+Math.random()*99999999)
;document.body.appendChild(e)%7D)());' rel='nofollow' target='_
blank'><strong>Pinterest</strong></a>
</li>
<li class='BV-stumbleupon'>
<a expr:href='"http://
www.stumbleupon.com/submit?url=" + data:post.url + "&title=" +
data:post.title ' rel='nofollow' target='_
blank'><strong>StumbleUpon</strong></a>
</li>
<li class='BV-delicious'>
<a expr:href='"http://delicious.com/post? url=" + data:post.url +
"&title=" + data:post.title '
rel='nofollow' target='_
blank'><strong>Delicious</strong></a>
</li>
<li class='BV-linkedin'> <a expr:href='"http://www.linkedin.com/
shareArticle?mini=true&url=
" +
data:post.url + "&title=" +
data:post.title +
"&summary=&source="'
rel='nofollow' target='_ blank'><strong>LinkedIn</strong></a>
</li>
<li class='BV-reddit'>
<a expr:href='"http://reddit.com/submit?
url=" + data:post.url +
"&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
</li>
<li class='BV-technorati'>
<a expr:href='"http://technorati.com/
faves?add=
" + data:post.url '
rel='nofollow' target='_ blank'><strong>Technorati</strong></a>
</li>
</ul>
</b:if>


Simple and done
READ MORE "Social Sharing Widget For Blogger"