Pure CSS3 Social Share Icons under Every Post

Posted On // 16 comments


Social Icons
Today I will show you how you can add Pure CSS3 Social Share Icons under Every Post. 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.

A live working demo of these buttons can be seen just below.


 



Once you have seen the demo we can move on with the tutorial on how you can add these Social Share icons under every post of your blog.

Editing in HTML Editor


First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for <data:post.body/> code and paste the below given code just below <data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + 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' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='abt-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='abt-googlebuzz'>
<a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
</li>
<li class='abt-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='abt-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='abt-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='abt-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='abt-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='abt-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</b:if>

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.

16 comments

AJIT MULIK Author
13 June 2013 at 11:19

Can i use this icons on my site ww.vitedu.in

Reply
14 June 2013 at 21:40

Spamming Like a Rockstar LOL Ofcourse you can !

Reply
Rohit Asare Author
21 July 2013 at 00:28

hey google buzz is not working :(

Reply
21 July 2013 at 03:13

Because Google Buzz has been closed by google.

Reply
Rohit Asare Author
21 July 2013 at 20:52

so please fix this code :-)
MyRockingTricks

Reply
22 July 2013 at 02:14

Updated :)

Reply
karthik sai Author
15 August 2013 at 03:58

Very useful..Thank Q

Reply
SANTOSH KUMAR Author
26 September 2013 at 20:53

superb website with css tricks i liked it very much than other websites like bloggersentral,allbloggingtips e.t.c i continue support for u
regards with http://gamezzadda.blogspot.com

Reply
8 October 2013 at 02:41

Hi!
How can I add a title to it like "Share This Post" ?

Reply
Daniel Pham Author
21 November 2013 at 08:20

I really love this one. The only code I've tried and worked perfectly. But I'd like to ask for your favor, could you show me how to centerlize this social share bar under every post please?? Thank you.

Reply
Chetan Nagda Author
16 December 2013 at 06:14

very cool and elegant social bar widgets. thanks admin.

Reply
8 April 2014 at 08:38

Pls Help

Reply
4 July 2014 at 10:47

Hi
I love this but how can I put my icons into the code?

Reply
26 September 2014 at 04:10

Looks like the css location is no longer valid?

Reply
Tuan Anh Author
2 November 2014 at 07:30

Sorry, I am not done. I only had texts not icons of share icons. Please help me . As You can see below http://www.giasuhaiduong.net/2014/09/trung-tam-tri-uc-gia-su-tai-hai-duong.html

Reply
4 August 2015 at 23:23

Hey,
This particular code works for blogger. How can I use it for my self developed blogs???

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Pure CSS3 Social Share Icons under Every Post |