Add Incredible Social Media Sharing buttons Below Every Blog Post

novels

Social sharing widget have a major role drive traffic to your blog.In this world without social media is impossible also in a blog without social sharing button is very bad. What could be more exciting than to have all major social networking buttons all together. Internet is turning more and more social and social media networks help a lot in circulating content and in bringing awesome traffic.

I Created a combination of Google+, Facebook, Twitter, Stumble upon, delicious, Pinterest, reddit, LinkedIn and Technorati. I added a shadow effect when the mouse over the particular button. To get this beautiful widget follow the steps bellow.

LIVE DEMO

Social Media Sharing buttons Below Every Blog Post

1-Go To Blogger > Design > Edit HTML

2-Backup your template

3-Check the “Expand Widgets Template” box

4-Search for this,

]]>

Tag and place the following peace of code just above it.

/* All Blogging Tools.com*/ ul.BTbiz-social { 
list-style:none; 
display:inline-block; 
margin:10px auto; 
padding:2px; 
} 
ul. BTbiz -social li { 
display:inline; 
float:left; 
background-repeat:no-repeat; 
} 
ul. BTbiz -social li a { 
display:block; 
width:50px; 
height:50px; 
padding-right:10px; 
position:relative; 
text-decoration:none; 
} 
ul. BTbiz -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. BTbiz -social li.TBI-facebook { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrVpLJhpbBKWrfCrpwSjoCcMT1ppebvTL-pIB1eqPlxCqgKtkL7e5sdTDvAKZUU2phyphenhyphenzos0Nv6F55mU45RNh5aT2VYDRTY0IPUTCNY9MfTz65IMHyqNoVU8tCnegtL8DDBHSSQCC4iLsQ/s50/facebook.png); 
} 
ul. BTbiz -social li.TBI-twitter { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZw_-2zlKDhnJduMM3buX-sqU9vZpZe35kn-cNWnB7rAtAAQeEpP47iG4VYEEp1qqw5WL9ga3FUkfyu8BYjtB9-ADsOshmmHl-apfD7Wdo0eNgHO3CP7EUaGe9F7MQ4BZEBGO7MO6biw/s50/twitter.png); 
} 
ul. BTbiz -social li.TBI-googleplus { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGANHn1QSMvIVoMI0Nqbvwqa40Jpokk0c-RHQZttJXHvKlkMEsOZQ8u5s2b75rYh0ODw_zTI7McVhK03NAOUWY_32oyDGtiqJ3wtD1C-RtnVUP08bY4gKVJZLdgoDHsOSnYa88P_IheI/s50/google%252B.png); 
} 
ul li. BTbiz -pinterest { 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhESCqH3NCK0oXBpOnxP8qjtDizuJaY1deAsOaNzJVy5zDB_1a1lZatCjJz-w2_rBkFUJDRjbuyKgdGQBWlO8N5BrrmbVAjWY-aVizwDSo_FV44WPVlpCptdPV9DWF4oExCpf9Nps8FlA/s50/pinterest.png); 
} 
ul. BTbiz -social li.TBI-stumbleupon { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXgJPmajCq9VC-UMKB5KSiGs14QDVXU-tuWac4F_G1Gg68ZYWQrYUAtGvvpXolT0SAyUhQ1vn4OnlGD8XVKHQz5ESBRltBQ-LyWhZ1RkuWeA4eBPLmNaKi_Id9m8MV5PpmbtkEZ57RqQ/s50/stumbleupon.png); 
} 
ul. BTbiz -social li.TBI-delicious { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoIMvE2hSql2PSB0Q3HVQODR03Sv-wRy_Kdk4kejEitirGyXfpT7NtHecrhbohEVDsclNwfdS-kzsfIp9J8m4x57qF6gkWl3xNl7aI1qWMm3F6yy-IvSsrNyO0pPDVRmxcxRaSd-9xn6E/s50/delicious.png); 
} 
ul. BTbiz -social li.TBI-linkedin { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxRSQvlk3q_f1oVavAyjCA10_okV6L7kqFubN_7z30YZlOKTXIsCNKUWrPrDB9P2U_NbFKiXmjSs5oU3ZX5hrCXTcUqrBHBRoNP9Y8hJZy0P6FlXX_iIBYcUG0Rqj45J75kSy2xvqNXo/s50/linkedin.png); 
} 
ul. BTbiz -social li.TBI-reddit { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XHDGYK9nW52XFKhTbx36VW0j-2RQvKyrg4L-mTdvfKeitLSvzFMccFN5BOtDka6iUFJG0zntAIHZBh62z1nK14-XIPo3SIHwFLtUKv_0RpOuel1taHt3z4a6b6sId_4uS_pN0uxj5qw/s50/reddit.png); 
} 
ul. BTbiz -social li.TBI-technorati { 
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObfpdCRJX70xnIt-Obf4S9PT8wtjRtAc8lFUb444GG1rMHq9He1p-bLG8lA80TUPfZ6MXxGvdOYqiVU-xPShLCVQM3lcKWB7NN7diPANUWbVrSPfWW4g6OydSH7E-MeuhXiNZb7y6zx0/s1600/technorati.png); 
} 
# BTbiz -cssanimation:hover li { 
opacity:0.2; 
} 
# BTbiz -cssanimation li { 
-webkit-transition-property:opacity; 
-webkit-transition-duration:500ms; 
-moz-transition-property:opacity; 
-moz-transition-duration:500ms; 
padding:2px; 
} 
# BTbiz -cssanimation li a strong { 
opacity:0; 
-webkit-transition-property:opacity, top; 
-webkit-transition-duration:300ms; 
-moz-transition-property:opacity, top; 
-moz-transition-duration:300ms; 
} 
# BTbiz -cssanimation li:hover { 
opacity:1; 
} 
# BTbiz -cssanimation li:hover a strong { 
opacity:1; 
top:-10px; 
} /*Allbloggingtools.com */

3. Now find for

</data:post.body>

and place the following peace of code just below it.

<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'>You Like It!? Then kindly share with your Friends.</div>
<ul class='BTBIZ-social' id='BTBIZ-cssanimation'>
<li class='BTBIZ-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'>Facebook</a>
 </li>
<li class='BTBIZ-twitter'>
 <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
 </li>
<li class='BTBIZ-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'>Google+</a>
 </li>
<li class='BTBIZ-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'>Pinterest</a>
 </li>
<li class='BTBIZ-stumbleupon'>
 <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>StumbleUpon</a>
 </li>
<li class='BTBIZ-delicious'>
 <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>Delicious</a>
 </li>
<li class='BTBIZ-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'>LinkedIn</a>
 </li>
<li class='BTBIZ-reddit'>
 <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'>Reddit</a>
 </li>
<li class='BTBIZ-technorati'>
 <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'>Technorati</a>
 </li>
</ul>
 </b:if>

If you find more than 1 appearance of tag, add the above peace of code just below the first appearance of it.

4. Save the Template.

That’s all you done it…go back to your blog and see the change…If any problem with this widget Feel free to ask me….Don’t forget to use the comment box for your thoughts.

At last Have a nice day….

Add Incredible Social Media Sharing buttons Below Every Blog Post

0 comments:

Post a Comment

Sort List by:
Sort List by Category:
Search with Keyword:

Add Incredible Social Media Sharing buttons Below Every Blog Post

Next

Newer Post

Previous

Older Post

0 comments:

Post a Comment