Wednesday, July 31, 2013

Pilihan Widged Sosial Media Dengan Efek Hover


Assalamualaikum pada postingan ini saya akan share mengenai cara membuat efek hover pada icon sosial banyak sekali pariasi yang dapat dibuat pada icon icon button sosial jika kemarin saya telah share icon sosial dengan caricatur rumah namun berbeda halnya dengan ini efek hover akan diterapkan pada icon sosial tersebut,seperti contoh diatas silahkan agan ikuti langkah dibaah ini jika ingin menerapkannya diblog agan..
masuk blog agan
pilih menu tata letak/add gadged
pilih html javascrpt
jika sudah letakan kode dibawah ini pada box yang tersedia



DEMO 1
<div id="iconoshoverfade">
<ul>
<li><a href="http://www.facebook.com/#" target="_blank"> <img height="50" src="http://4.bp.blogspot.com/-PL55Jd1MIgw/ULTdpgxpthI/AAAAAAAAF2Y/zqic5hvj2BU/s1600/bloggertrix-facebook.png" title="Ad me on Facebook" width="50" /></a></li>
<li><a href="https://plus.google.com/u/0/#" target="_blank"><img height="50" src="http://3.bp.blogspot.com/-b3-ImgxoXZE/ULTdqlQ4TYI/AAAAAAAAF2g/pBhTwnttAKY/s1600/bloggertrix-googleplus.png" title="Ad me on Google+" width="50" /></a></li>
<li> <a href="https://www.twitter.com/#" target="_blank"><img height="50" src="http://3.bp.blogspot.com/-NjAWTWrlX5E/ULTdtCeqFeI/AAAAAAAAF2w/sLBX0ttP1rE/s1600/bloggertrix-twitter.png" title="Ad me on Twitter" width="50" /></a></li>
<li><a href="http://feeds.feedburner.com/#" target="_blank"><img height="50" src="http://1.bp.blogspot.com/-Cy7I8qvNDg0/ULTdoi-T18I/AAAAAAAAF2Q/qPyAZfmRqU8/s1600/bloggertrix-Rss.png" title="Subcribe" width="50" /></a></li>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#iconoshoverfade a').hover(function() {
        $('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');
    }, function() {
        $('#iconoshoverfade a img').stop().fadeTo(250, '1.0');
    });
});
</script>

<style>
#iconoshoverfade {float:center;margin: 0 auto;}
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}
#iconoshoverfade 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>
</ul>
</div>

DEMO 2

<div id="iconoshoverfade">
<ul>
<li><a href="http://www.facebook.com/#" target="_blank"> <img height="50" src="https://lh3.googleusercontent.com/-_36zfJkSOQM/UaDTzAQacFI/AAAAAAAAARM/2LEyBSzD9hU/h120/Facebook-Home.png" title="Ad me on Facebook" width="50" /></a></li>
<li><a href="https://plus.google.com/u/0/#" target="_blank"><img height="50" src="https://lh4.googleusercontent.com/-neMd3wG1lKI/UaDTzBPLp1I/AAAAAAAAARI/T2hREOqinMU/h120/Google-Social-store.gif" title="Ad me on Google+" width="50" /></a></li>
<li> <a href="https://www.twitter.com/#" target="_blank"><img height="50" src="https://lh6.googleusercontent.com/-lywaejUyXXc/UaDTzpYjW5I/AAAAAAAAARc/Sd58USmLJ10/h120/Twitter-Home.png" title="Ad me on Twitter" width="50" /></a></li>
<li><a href="http://feeds.feedburner.com/#" target="_blank"><img height="50" src="https://lh3.googleusercontent.com/-9DKYV5K0AXY/UaDTzGwStuI/AAAAAAAAARE/0dfUm4D8pGE/h120/RSS-Home.png" title="Subcribe" width="50" /></a></li>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#iconoshoverfade a').hover(function() {
        $('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');
    }, function() {
        $('#iconoshoverfade a img').stop().fadeTo(250, '1.0');
    });
});
</script>

<style>
#iconoshoverfade {float:center;margin: 0 auto;}
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}
#iconoshoverfade 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>
</ul>
</div>

DEMO 3

<div id="iconoshoverfade">
<ul>
<li><a href="http://www.facebook.com/#" target="_blank"> <img height="50" src="http://3.bp.blogspot.com/-YFvMg3ZTCoU/UWYlsclm9dI/AAAAAAAAEjE/VbECKsRvusc/s1600/Scribble-Facebook.png" title="Ad me on Facebook" width="50" /></a></li>
<li><a href="https://plus.google.com/u/0/#" target="_blank"><img height="50" src="http://3.bp.blogspot.com/-mWT0r0Xe66Q/UWYls9XBgGI/AAAAAAAAEjg/2hXW0-osaOk/s1600/Scribble-google+.png" title="Ad me on Google+" width="50" /></a></li>
<li> <a href="https://www.twitter.com/#" target="_blank"><img height="50" src="http://2.bp.blogspot.com/-RINX-CaD8sE/UWYltOJVN4I/AAAAAAAAEjk/-yQn5FMSx-0/s1600/Scribble-twitter.png" title="Ad me on Twitter" width="50" /></a></li>
<li><a href="http://feeds.feedburner.com/#" target="_blank"><img height="50" src="http://3.bp.blogspot.com/-dR8k3RGwRqI/UWYlsRncmKI/AAAAAAAAEjI/gUk3lsYAAis/s1600/Scribble-RSS.png" title="Subcribe" width="50" /></a></li>
<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#iconoshoverfade a').hover(function() {
        $('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1');
    }, function() {
        $('#iconoshoverfade a img').stop().fadeTo(250, '1.0');
    });
});
</script>

<style>
#iconoshoverfade {float:center;margin: 0 auto;}
#iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:}
#iconoshoverfade 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>
</ul>
</div>

Catatan : untuk kode berwarna merah silahkan diganti dengan URL masing masing
jika sudah silahkan simpan template dan lihat hasilnya...
Saya rasa penjelasannya sudah cukup jelas..
selamat mencoba semoga bermanfaat.....( wassalam )

0 comments:

Post a Comment