Jumat, 01 Januari 2016

Membuat Widget Social Media Share Tanpa Edit HTML

<style>
    .touchme a {
    display:block;
    height:50px;
    width:50px;
    padding:0 4px;
    float:left;


    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjap8oee8NI6SPB8WRqM1jKLZUvsXiXJam7_pkXPQzF0gsO9TQhb6Sim6GtkJOIHRwr1S6JEK3Fqg5tVVQZpsw2fv68zWkwk0ccOX3XaoHJLDaaEf4jBTSnzIJeneo0KSNc89cQLCMD_P4/s1600/Sharing+Touch+Me.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;

    }

    .touchme a.googleplus {
    background-position: 0px -58px;

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


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

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

    }
    .touchme a.facebook {
    background-position: 0px -406px;

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

    }


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

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

    }


    </style>


    <div class='touchme'>

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

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

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

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


    </div>

Label: