How to add Pure CSS3 Social Icons under Every Post

Today I'm going to teach you how you can add Social Share Icons under Every Post using pure CSS3. Social network site play an very important role in publishing your site among readers. There are many social sites but in here I used most popular networks. These socials icons have a cool effect when mouse pointer in hovered over these icons. These icons are made up of CSS without use of any JavaScript which slows down your page speed. Clicking any icon will share your post in that particular site.

To add this social icons follow below steps

1. Log in to your blogger dashboard first.
2. Lick on Template and then on "Edit HTML".
3. Now press Ctrl + F search for <data:post.body/> code and paste the below given code just below<data:post.body/>.

CSS Codes:

<b:if cond='data:blog.pageType == "item"'> <link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-social-anime.css' rel='stylesheet' type='text/css'/> <ul class='abt-social' id='abt-cssanime'> <li class='abt-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' title='Share this on Facebook'><b>Facebook</b></a> </li> <li class='abt-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><b>Twitter</b></a> </li> <li class='abt-googlebuzz'> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><b>Google Buzz</b></a> </li> <li class='abt-stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><b>StumbleUpon</b></a> </li> <li class='abt-digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><b>Digg</b></a> </li> <li class='abt-delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><b>Delicious</b></a> </li> <li class='abt-linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><b>LinkedIn</b></a> </li> <li class='abt-reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><b>Reddit</b></a> </li> <li class='abt-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><b>Technorati</b></a> </li> </ul> </b:if>

NOTE : There maybe more than one so make sure that you have selected the right code.

After adding the code save the template.

You are done now. Now you and your visitors can see and share your awesome posts with these cool social share icons which has great hover effect.