Home » Unique » How to add stylish social sharing buttons below every post in blogger

Friday, 28 June 2013

How to add stylish social sharing buttons below every post in blogger

By Muhammad Aseel at June 28, 2013 Labels: Blogger, Buttons, CSS, hover effect, HTML, Sharing buttons, Unique

السلام عليكم و رحمة الله و بركاته

Today's topic is that how to add stylish social sharing buttons below every post in blogger. Social sharing buttons is the basic part of a blogger. This social sharing buttons help you increase your blogger publicity and when your blog visitors likes your content so they have to share your article with their friends so they look for social sharing buttons to share your article and below every post add social sharing buttons is the best thinking so that's the reason I share an article about how to add stylish social sharing buttons below every post in blogger. Click demo button to see the demo of stylish social sharing buttons below every post.

Live Demo!!!

Related Articles:-

Add stylish social sharing buttons below every post in blogger

Go to blogger.com.
Sign in to your account.
Then go to template >> edit HTML >> now find the following below code.

]]></b:skin>

and paste the below code just above ]]></b:skin>.

.Ma5 img{ width: 45px; height:45px; float: left; border: 5px solid #ccc; margin: 2px; -webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; }
.Ma5 img:hover { margin-top: -8px; zoom: 50px; opacity: 0.5; -webkit-transition: transition: opacity .15s ease-in-out}

Now find this code <data:post.body/>.
And paste the below code just above the above tag.

<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.url == data:blog.homepageUrl'><div class='Matext2'><span style='color: red;'><u><i><span style='font-size: 30px; text-decoration: blink; opacity:10.5; border-radius:10px;border:10px solid #EE872A;'><b>Share This with your friends and others</b></span></i></u></span></div>
<br/>
<div class='Ma5'>
<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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz-J2DqyrKTG4_DZ-4d0qTJPVG8YxxL4TKRkVtBCIlloyBgUu-I-boxeLpO4kPujviB5JDcj4gp7Kotp-TG7qArawcUppWqexpKolesy4uAMZ0SyYKhjdQJCRgrCnBpVHK6_tKN3KAob4/s50/facebook.png' title='facebook'/></a>
<a expr:href='"http://www.twitter.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ-4vT6LZaM_zP32dh7oKuGH5DjtVV8eCmQMapz_cWgE9I_zonoK6PscZtnZYq-PTa5UbEkCesRKWiogs8k_5nbFQs_BL-89x6TaMkCNkGSaK3OsUJSmmtgV3s4lT4A1rk9OvRMaGkjrM/s50/twitter.png' title='twitter'/></a>
<a expr:href='"http://www.plus.google.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIV68n-sTXxyuVRHJaPqdHSzYbUdICGZChe5gN21sdT1GftG5gIT_BscZI1G4O_1z3PEyTB-kSwxHip-gqow1CElpQaHO8_aaS09A3p_5RhNNyRzsaX9AFD4h7pTGwXeJ0xTZ2j_kjVK0/s50/google%252B.png' title='google'/></a>
<a expr:href='"http://www.pinterest.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGu80k6IndKdyqoB90wXlyG1HbMyHdEufOfuZtzribQ89vq-d1Hl5od5paNpV2otpQx8MN8_gwpfHNfdWfIGTcbrWws-Oi14tuBzpCpQFNIFEnEOkJFyEDhiLYKVtse2l55Ahz0G9GqkI/s50/pinterest.png' title='pinterest'/></a>
<a expr:href='"http://www.stumbleupon.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO80n2SuST14DmBV4bg6HYNPKfAyGrmIn5_yUYG2kiJNcnWxQiscZTUSqx40bjxmxXxPyI65BIyi4c93HfL5P_bCXMRJJIZ5WkoYUmsrmFU7mFVpanedX-NlzoKNQ38QS_yzjrRALSoo/s50/stumbleupon.png' title='stumbleupon'/></a>
<a expr:href='"http://www.Delicious.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikX10Cdvlj5RcsuUo7Zj5YSVzkDZtzv3fQAKiScMcEg8JCZkjULqKpaGDczV1lG4wyWgK0zT0SeP0pfr0fF-bOCU1PzU1eX5e2T_uSfthnSrJ-UT2MPdZ11AxEk_Ypcg0ENW0JEXMAxZI/s50/delicious.png' title='delicious'/></a>
<a expr:href='"http://www.Linkedin.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdRA__cMRfaCYkI5rLnXlTOwezZnKrN0k4luDlQbmfBGffTOjG1yie7FPdZAMxkhXmTFN0tjks1asXYjpfDe4C1k1AqjlYzkobGm4XJsccLGQYSNuoUInojFuexx_5ARV6VffeojDV55I/s50/linkedin.png' title='linkedin'/></a>
<a expr:href='"http://www.reddit.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sRr4PnF6Qx_4gy4OoVpdCfwT5S_DL6C4nyRjwUk_4x3r1hksSMHrG1t8aipRhbP8CT_4SOwEKkvjAi0UDSaGcyubptDu6dgqvXx68txUUdfCtb2I7x8v3evvp3E4v640o14IVajiQtc/s50/reddit.png' title='reddit'/></a>
<a expr:href='"http://www.technorati.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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCNu1RCj12pzhuYAikGMyw-O3uzStVV63Fh9F4gfR69pscuIfYUB27hy86GDFkr5jxd2nAA2apI41S7pLqYpK4HxM0w33dS9t-vk2ZCQ-8EHnC0Fa3krbHXSlhUODsT0or_fRLsJ6LhAG/s1600/TBI-technorati.png' title='technorati'/></a>

</div></b:if>

Click to save template and stylish social sharing buttons below every post in your blogger has been added.

Is having any trouble in adding stylish social sharing buttons below every post in blogger so please tell your problem in a comment box I will soon solve your problem. Thank you.