Flip Sosial Media Widget Share

Flip Sosial Media Widget Share - Salah satu bentuk yang bisa kita tampilkan untuk membuat sebuah widget share sosial media yang bisa kita tempatkan pada sebuah weblog adalah dengan gaya flipper.

Sebuah bentuk tampilan sosial media widget share dengan gaya hover yang menarik, dengan gaya seperti berputar atau bertukar bentuk gambar.

Dalam hal ini kita membuat sosial media widget share ini menggunakan CSS karena dirasa penggunakan CSS lebih ringan dalam hal loading pada sebuah halaman weblog.

• Demo

CSS yang depergunakan seperti dibawah ini:

CSS

.flipshare a {
    display:block;
    height:50px;
    width:50px;
    padding:0 4px;
    float:left;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgOSybrq7axr98X5NKrh1iFu_qs5ZCQWOnzAk8VmnHQ4eV8Sm1FZBCXAP923tmnSf10WTzf7oVY6isJgS7d9kbnVeK7i5DXQzA-q5zc5mmwSZWdT8JKjjH4gMMuh5ImDLBR1mdiAjO0aIZ/s1600/Share+Social.png) no-repeat;
    -webkit-transition: ease-in 0.2s all;  
    -moz-transition: ease-in 0.2s all;  
    -o-transition: ease-in 0.2s all;  
    -ms-transition: ease-in 0.2s all;  
    transition: ease-in 0.2s all;
    cursor:pointer;
}

.flipshare a.googleplus {
    background-position: 0px -58px;
}
.flipshare a.googleplus:hover {
    background-position: 0px 0px;
}

.flipshare a.twitter {
    background-position: 0px -290px;
}

.flipshare a.twitter:hover {
    background-position: 0px -232px;
}

.flipshare a.facebook {
    background-position: 0px -406px;
}
    
.flipshare a.facebook:hover {
    background-position: 0px -348px;
}

.flipshare a.rss {
    background-position: 0px -174px;
}

.flipshare a.rss:hover {
    background-position: 0px -116px;
}

Dan HTML yang dipergunakan adalah sebagai berikut:

HTML

<div class='flipshare'>

    <!--RSS-->
    <a class='rss' href="Link RSS" target='_blank'></a>

    <!--Google Plus-->
    <a class='googleplus' href="Link Goggle Plus" target='_blank'></a>

    <!--Facebook-->
    <a class='facebook' href="Link Facebook" target='_blank'></a>

    <!-- Twitter -->
    <a class='twitter' href="Link Twitter" target='_blank' ></a>

</div>

Semoga bermanfaat.