Блок-виджет кнопок социальных сетей

by Andrey Dobrovoi

HTML

<div class='flipper'>
    <div class="pleaseshare">
        Пожалуйста, поделитесь! :
    </div>
        <!--Google Plus-->
        <a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Поделиться в Google+ :&gt;'/>
    
        <!--Facebook-->
        <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Поделиться на Facebook :&gt;'/>
    
        <!-- Twitter -->
        <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Отправить в Twitter :&gt;'/>

        <!-- Pinterest -->
        <a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Отправить на Pinterest :&gt;'/>

        <!-- Delicious -->
        <a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Добавить в Delicious :&gt;'/>

        <!--DIGG-->
        <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Рассказать в Digg :&gt;'/>

        <!--Stumble-->

        <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Поделиться на StumbleUpon :&gt;'/>

        <!-- Reddit -->
        <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Добавить в Reddit :&gt;'/>
    
        <!--RSS -->
        <a class='rss'...

CSS

/*--------Блок-виджет кнопок социальных сетей-------*/

.flipper a {
    display:block;
    height:48px;
    width:48px;
    padding:0 4px;
    float:left;
    background:transparent url(http://3.bp.blogspot.com/-HdETjd2AwPw/UxGMxZAnSXI/AAAAAAAAAZk/p2VoHiURPwY/s1600/tricklab.png) no-repeat;
    -webkit-transition: ease-in 0.3s all; 
    -moz-transition: ease-in 0.3s all; 
    -o-transition: ease-in 0.3s all; 
    -ms-transition: ease-in 0.3s all; 
    transition: ease-in 0.3s all;
    cursor:pointer;
}

.flipper a.googleplus {
    background-position: 0px -348px;
}

.flipper a.googleplus:hover {
    background-position: 0px -406px;
}

.flipper a.pinterest {
    background-position: 0px -464px;
}

.flipper a.pinterest:hover {
background-position: 0px -522px;
}

.flipper a.delicious {
    background-position: 0px 0px;
}

.flipper a.delicious:hover {
    background-position: 0px -58px;
}

.flipper a.digg {
    background-position: 0px -116px;
}

.flipper a.digg:hover {
    background-position: 0px -174px;
}

.flipper a.stumbleupon {
    background-position: 0px -812px;
}

.flipper a.stumbleupon:hover {
    background-position: 0px -870px;
}

.flipper a.technorati {
    background-position: 0px -928px;
}

.flipper a.technorati:hover {
    background-position: 0px -406px;
}

.flipper a.twitter {
    background-position: 0px -928px;
}

.flipper a.twitter:hover {
    background-position: 0px -986px;
}

.flipper a.facebook {
    background-position: 0px -232px;
}

.flipper a.facebook:hover {
    background-position: 0px -290px;
}

.flipper a.reddit {
    background-position: 0px -580px;
}

.flipper a.reddit:hover {
    background-position: 0px -638px;
}

.flipper a.rss {
    background-position: 0px -696px;
}

.flipper a.rss:hover {
    background-position: 0px -754px;
}

.pleaseshare{
    margin:10px 0px;
    color:#333333;
    font-weight:bold;
    font-size:20px;
    font-family:sans-serif;
}