Menu


Menu Tab

Pages

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="http://4.bp.blogspot.com/-nutgD_5t8Ek/VnONie_JSYI/AAAAAAAARh8/j_1V7Fy28kE/s1600-r/facebook_cinta.png" title="Facebook" /></a>

</li>
<li><a href="https://twitter.com/myscript2010s" target="_blank" title="Twitter"><img src="http://3.bp.blogspot.com/-O_xfI4KuHlo/VnN8CPO1zQI/AAAAAAAARhI/DOl7oG4o31Q/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="http://4.bp.blogspot.com/-GLlIsl9EZe0/VnONRI2ubrI/AAAAAAAARhY/PYcTI4OqWSI/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="http://3.bp.blogspot.com/-wwAJ6RnbsLY/VnONZ_XeqtI/AAAAAAAARhw/Bbi8aOg-84M/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="http://4.bp.blogspot.com/-nutgD_5t8Ek/VnONie_JSYI/AAAAAAAARh8/j_1V7Fy28kE/s1600-r/facebook_cinta.png" title="Facebook" /></a>

</li>
<li><a href="https://twitter.com/myscript2010s" target="_blank" title="Twitter"><img src="http://3.bp.blogspot.com/-O_xfI4KuHlo/VnN8CPO1zQI/AAAAAAAARhI/DOl7oG4o31Q/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="http://4.bp.blogspot.com/-GLlIsl9EZe0/VnONRI2ubrI/AAAAAAAARhY/PYcTI4OqWSI/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="http://3.bp.blogspot.com/-wwAJ6RnbsLY/VnONZ_XeqtI/AAAAAAAARhw/Bbi8aOg-84M/s1600-r/google-cinta.png" title="Google +" /></a></li>
</ul>


All Sources
Edited by. Myscript2010


Berikutnya








Myscript2010

Home Page
 
 

Copyright@2015

Copyright © Cibeber Cimahi