Make Money Online Nigeria
Make money Online Nigeria, blogging tips,SEO,Traffic tips and lot more
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,'sharer','toolbar=0, status=0,width=626,height=436'); 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,'sharer','toolbar=0,
status=0,width=626,height=436'); return
false;' rel='nofollow' target='_ blank'><strong>Google+</strong></a>
</li>
<li class='BV-pinterest'>
<a href='javascript:void((function()%7Bvar%
20e=document.createElement('script')
;e.setAttribute('type','text/ javascript');e.setAttribute
('charset','UTF-8')
;e.setAttribute('src','http://
assets.pinterest.com/js/pinmarklet.js?r='
+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"
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,'sharer','toolbar=0, status=0,width=626,height=436'); 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,'sharer','toolbar=0,
status=0,width=626,height=436'); return
false;' rel='nofollow' target='_ blank'><strong>Google+</strong></a>
</li>
<li class='BV-pinterest'>
<a href='javascript:void((function()%7Bvar%
20e=document.createElement('script')
;e.setAttribute('type','text/ javascript');e.setAttribute
('charset','UTF-8')
;e.setAttribute('src','http://
assets.pinterest.com/js/pinmarklet.js?r='
+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
Subscribe to:
Comments (Atom)