Button Share

Sosial Media
Memasang Tombol Share berbentuk love dari sumber
dynamic drive dan juga beberapa code tombol share dari berbagai sumber, dibawah ini adalah kode tersebut.
Penerepannya bisa melalui Gadged maupun Entri halaman baru HTML

Kode Tombol Share Efek Transisi


<style>
#iconoshoverfadems {float:center;margin: 0 auto;}
#iconoshoverfadems ul li {list-style-type: none;float:left;margin-right:5px;:}
#iconoshoverfadems ul li:hover{-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
</style>

<div id="iconoshoverfadems">
<ul class="bubblewrap"></li>
<li><a href="https://www.facebook.com/learn.editing.myscript2010" target="_blank" title="facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7neaFGN1833i9kuJznzmvCUbvY-L4Dwl8Tk-9iJBfEyvRn2xz_HYkfLza6U4JqeIUXiAWz-x7MPEWHbhUdDLSPOCpeo7LzpgNxZaGjIoCqCRtP3CfGwyoliAgoofIqwxcS6JlbTZ10_o/s1600-r/facebook_cinta.png" title="Facebook" /></a>

</li>
<li><a href="https://twitter.com/myscript2010s" target="_blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qVR_EftG_wXiUy3n_EYHrbBEbSAjgCPih_wPo14UVaV5-0qsiKmUyEWSecYoxJ0rJxf7cuScN6RCvscJ6_uvoweytLkQO1HkvDoQIwSqKHf7mYS6Uck8OqmqY87f2Ld4WsfElMxDjh4/s1600-r/twitter-cinta.png" title="Twitter" /></a>
</li>

<li><a href="https://feedburner.google.com/fb/a/myfeeds" target="_blank" title="feedburner"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6wDSFc-zKPo30gzKX59n7OnZ29tVYrYQ86IDQOACSDNYieP-BdbNy1qQbK27WaBWFGq03Bqbuu91-skktXqBgO5icSLw4og5mLW0aEv2-ZwRca1k2i5saiH7Ky6nk2C8SIK37ASFE6c/s1600-r/rsfeed_cinta.png" title="feedburner" /></a>
</li>

<li><a href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank" title="Google +"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PwKMohxVcttWYHnCMnIoELY94zh77xKhpofVaMKInWGoEKoeGq4Db2ELNQZWAYNMqyqHX-kR7tRz84-AE1-M9a1adB-oiAJlnufzYwNAoGKHrNnB5_YKu7_00P9XHgC58cM2Kw8d7F4/s1600-r/google-cinta.png" title="Google +" /></a></li>
</ul>

<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>
$(document).ready(function() {
    $('#iconoshoverfadems a').hover(function() {
        $('#iconoshoverfadems a img').not($('img', this)).stop().fadeTo(250, '0.1');
    }, function() {
        $('#iconoshoverfadems a img').stop().fadeTo(250, '1.0');
    });
});
</script> </div>

Kode Tombol Share Efek Hover Animasi


<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>


 <center>
<ul class="bubblewrap"></li>
<li><a href="https://www.facebook.com/learn.editing.myscript2010" target="_blank" title="facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7neaFGN1833i9kuJznzmvCUbvY-L4Dwl8Tk-9iJBfEyvRn2xz_HYkfLza6U4JqeIUXiAWz-x7MPEWHbhUdDLSPOCpeo7LzpgNxZaGjIoCqCRtP3CfGwyoliAgoofIqwxcS6JlbTZ10_o/s1600-r/facebook_cinta.png" title="Facebook" /></a>

</li>
<li><a href="https://twitter.com/myscript2010s" target="_blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qVR_EftG_wXiUy3n_EYHrbBEbSAjgCPih_wPo14UVaV5-0qsiKmUyEWSecYoxJ0rJxf7cuScN6RCvscJ6_uvoweytLkQO1HkvDoQIwSqKHf7mYS6Uck8OqmqY87f2Ld4WsfElMxDjh4/s1600-r/twitter-cinta.png" title="Twitter" /></a>
</li>

<li><a href="https://feedburner.google.com/fb/a/myfeeds" target="_blank" title="feedburner"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6wDSFc-zKPo30gzKX59n7OnZ29tVYrYQ86IDQOACSDNYieP-BdbNy1qQbK27WaBWFGq03Bqbuu91-skktXqBgO5icSLw4og5mLW0aEv2-ZwRca1k2i5saiH7Ky6nk2C8SIK37ASFE6c/s1600-r/rsfeed_cinta.png" title="feedburner" /></a>
</li>

<li><a href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank" title="Google +"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PwKMohxVcttWYHnCMnIoELY94zh77xKhpofVaMKInWGoEKoeGq4Db2ELNQZWAYNMqyqHX-kR7tRz84-AE1-M9a1adB-oiAJlnufzYwNAoGKHrNnB5_YKu7_00P9XHgC58cM2Kw8d7F4/s1600-r/google-cinta.png" title="Google +" /></a></li>
</ul>

All Sources
Edited by. Myscript2010


Berikutnya

pinterest

linkedin

Facebook

twitter