Search Box by All Blogger Tricks

Sunday, 8 September 2013

Pure CSS3 Social Share Icons under Every Post

Freelance Jobs
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='' rel='stylesheet' type='text/css'/>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='&quot;;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick=',&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 class='abt-twitter'>
<a expr:href='&quot;; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
<li class='abt-googlebuzz'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
<li class='abt-stumbleupon'>
<a expr:href='&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 class='abt-digg'>
<a expr:href='&quot;;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
<li class='abt-delicious'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on'><strong>Delicious</strong></a>
<li class='abt-linkedin'>
<a expr:href='&quot;;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 class='abt-reddit'>
<a expr:href='&quot;; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
<li class='abt-technorati'>
<a expr:href='&quot;; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>

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.
We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved