New block as Social WIdget.

[Jacopo Dal Pozzo]

I developed a block to share the contents. It have a style in CSS 3
and it's also integrated with AddThis. You can see how it work in my
site at http://jacopodalpozzo.vacau.com... It's good for you?

here is the code:

<?php
if (!defined('DIRECT_ACCESS')) {
header('Location: ../../');
exit();
}
//*****************************************************************//
// Pixie: The Small, Simple, Site Maker. //
//
---------------------------------------------------------------- //
// Licence: GNU General Public License v3 //
// Title: Social Share Block. //
// Author: Jacopo Dal Pozzo //
// Website: http://jacopodalpozzo.vacau.com //
//*****************************************************************//
?>

<style type="text/css">

ul.social_share {
list-style: none;
margin: 15px auto;
display: inline-block;
}

ul.social_share li {
display: inline;
float: left;
background-repeat: no-repeat;
}

ul.social_share li a {
display: block;
width: 20px;
height: 20px;
padding-right: 10px;
position: relative;
text-decoration: none;
}

ul.social_share li a strong {
font-weight: normal;
position: absolute;
left: 20px;
top: -1px;
color: #fff;
padding: 3px;
z-index: 9999;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
background-color: rgba(0, 0, 0, 0.7);
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

#animation:hover li {
opacity: 0.2;
}

#animation li {
transition-property: opacity;
transition-duration: 500ms;
}

#animation li a strong {
opacity: 0;
transition-property: opacity, top;
transition-duration: 300ms;
}

#animation li:hover {
opacity: 1;
}

#animation li:hover a strong {
opacity: 1;
top: -10px;
}

</style>

<div id="block_social_share" class="block">
<div class="block_header">
<h4>Social Share</h4>
</div>
<div class="block_body">
<p>
<ul class='social_share' id='animation'>
<li>
<a href='mailto:?subject=%TITLE%&amp;body=%PERMALINK%'
title='Send this with an eMail'>
<img src="/files/images/social_icons/email_16.png" alt='eMail' /
>
<strong>eMail</strong>
</a>
</li>
<li>
<a href='http://www.facebook.com/sharer.php?u=%PERMALINK%&amp;t=
%TITLE%' rel='nofollow' title='Share this on Facebook'>
<img src="/files/images/social_icons/facebook_16.png"
alt='Facebook' />
<strong>Facebook</strong>
</a>
</li>
<li>
<a href='http://twitter.com/home?status=%PERMALINK%'
rel='nofollow' title='Share this on Twitter'>
<img src="/files/images/social_icons/twitter_16.png"
alt='Twitter' />
<strong>Twitter</strong>
</a>
</li>
<li>
<a href='http://www.linkedin.com/shareArticle?mini=true&amp;url=
%PERMALINK%&amp;title=%TITLE%&amp;source=BLOGNAME&amp;summary=%EXCERPT
%' rel='nofollow' title='Share this on LinkedIn'>
<img src="/files/images/social_icons/linkedin_16.png"
alt='LinkedIn' />
<strong>LinkedIn</strong>
</a>
</li>
<li>
<a href='http://www.stumbleupon.com/submit?url=%PERMALINK
%&amp;title=%TITLE%' rel='nofollow' title='Share this on StumbleUpon'>
<img src="/files/images/social_icons/stumbleupon_16.png"
alt='StumbleUpon' />
<strong>StumbleUpon</strong>
</a>
</li>
<li>
<a href='http://del.icio.us/post?url=%PERMALINK%&amp;title=%TITLE
%' rel='nofollow' title='Share this on del.icio.us'>
<img src="/files/images/social_icons/delicious_16.png"
alt='de.li.cius' />
<strong>de.li.cious</strong>
</a>
</li>
<li>
<a href='http://technorati.com/faves?add=%PERMALINK%'
rel='nofollow' title='Share this on Technorati'>
<img src="/files/images/social_icons/technorati_16.png"
alt='Technorati' />
<strong>Technorati</strong>
</a>
</li>
<li class="addthis_toolbox addthis_default_style">
<a class="addthis_button_compact" rel='nofollow' title='More
services provided AddThis'>
<img src="/files/images/social_icons/addthis_16.png"
alt='AddThis' />
<strong>AddThis</strong>
<script type="text/javascript" src="http://s7.addthis.com/js/250/
addthis_widget.js#pubid=xa-4dd98ad961eb64e8"></script>
</a>
</li>
</ul>
</p>
</div>
<div class="block_footer"></div>
</div>