JSFiddle - React, Tailwind, and code Playground

by NicosKaralis

HTML

<script src="https://apis.google.com/js/plusone.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-MD5/master/jquery.md5.js"></script>
<div class="spread-single">
    <ul>
        <li class="plusone">
            <g:plusone ></g:plusone>
        </li>
        <li class="fblike">
            <iframe src="http://www.facebook.com/plugins/like.php?
            href=
            &amp;send=false&amp;layout=button_count
            &amp;width=450&amp;show_faces=true
            &amp;action=like&amp;colorscheme=light
            &amp;font=verdana&amp;height=21"
            scrolling="no" frameborder="0" class="iframe-f" allowtransparency="true"></iframe>
        </li>
        <li class="bs-twitter">
            <a href="http://twitter.com/share" class="twitter-share-button iframe-t" data-count="horizontal" data-via="NicosKaralis">Tweet</a>
        </li>
    </ul>
    <img class="avatar avatar-35 photo gravatarImg" alt="" src="" height="35" width="35" data-email="[email protected]">
    <div class="Authordate">
        Por&nbsp;
        <span class="author">
            <a href="/author/NicosKaralis" title="Posts by Nicos Karalis">Nicos Karalis</a>
        </span>&nbsp;<br>
        21/06/2011 às 09h51
    </div>
</div>

CSS

body {
    width:665px;
    margin: 0 auto
}
.spread-single .twitar a, .spread-single .mail a, .spread-single .share a, .spread-single .twitar a, .spread-single .feed a, .spread .twitar a {
    background-image:url('http://tecnoblog.net/wp-content/themes/tecnoblog2/img/sprite.png');
    background-repeat:no-repeat;
    background-color:transparent;
}
/* Reset de CSS */

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

img {border: none;}

.both {clear: both;}

/* Fim de reset de CSS */
/*spread single*/
.spread-single {
    margin: 5px 0;
    padding: 5px;
    //border-top:1px solid #efefef;
    height:35px;    
}

.avatar-35, #content-body .avatar-28 {
    width: 35px;
    height: 35px;
    float: left;
    border:1px solid #e5e5e5;
    margin: 0 5px 0 0;
}

.spread-single ul{
    float: right;
    margin: 5px 0 0 0;
    min-width:290px;
}

.spread-single ul li{
    float: left;
    margin: 0 10px 0 0;
    list-style: none;
}

.spread-single ul li a {
    color: #556677;
    font-size: 12px;
    font-weight:normal;
    text-decoration: none;
    letter-spacing:-1px;
}

.spread-single .share a{
    background-image:url('http://tecnoblog.net/wp-content/themes/tecnoblog2/img/spread_share.png');
    background-repeat:no-repeat;
    padding-bottom: 1px;
    padding-left:16px;
}

.spread-single .share {
    margin-right: 0;
}

.spread-single .mail{
    margin:0;
    text-align: left;
}

.spread-single .mail a{
    background-image:url('http://tecnoblog.net/wp-content/themes/tecnoblog2/img/spread_mail.png');
    background-repeat:no-repeat;
    padding-left: 18px;
}

.spread-single .mail , .spread-single .share {
    padding: 3px;
    background: -moz-linear-gradient(center top , #fff, #e4e7e9) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#fff), to(#e4e7e9));
    border: 1px solid #dfdfdf;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
   ...

JavaScript

jQuery.fn.gravatarImg = function(params) {
    var par = !params ? '?s=35&d=retro&r=g' : params;
    var h = ('https:' == document.location.protocol ? 'https://secure' : 'http://www');

    return $(this).each(function() {
        var email = $(this).attr('data-email');
        var e = (!email ? '' : $.md5(email));
        var gravatar = h + '.gravatar.com/avatar/' + e + par;

        $(this).attr('src', gravatar);
    });
};

$('.gravatarImg').gravatarImg();