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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZ3d08XU55EC1UxuA2shS4fD1Gkj7Ol1oyBnYrDyWqT_8bAOYRgb_HqTf5M6s2EMHLUq8jFQVWWzRtdEYyOtoQSTIHi6LNPgQoL5VGcavrO9zjAmwsU1ClUCl76xuc1XZfBAy2F1QCEY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_PPgjueZ4c4DKBm7jdp_hQYzG6r_aCUU7OowKGBWkf3BmHsa1hlOhuFp-byuV0nOCFNyplF6-mwegUreKjiDh_lZwZWlmApiMaxXrgYlQ3dk2x93v8F-o1wiZqF2YCVFZZJJ7Mg-gFk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWCxuECv1REuNEOS34Vl-gaTKK8V5Ot5GNQrAR5qIoHgISfSlryJmwEclYPKx38U6kykkMubNM_T__i_bnqSCQBYvaCuvM_G6H-pJZI9X_0bH2kjPrrrZntcHvU4uTnuhAlD-Va9BI3PM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZklvYHvE49Os-mobMeE31xyDss-I86Gkq3YT9lM7aTq28N6MoRrexeqCmxTpvopnacMLrJgM51WXTa39pvnSbd7n3FIrNIr_4m-RSlElAZNe01OifuZdferTHZ3z4bCoSWX2oy_eFEQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYW_bud4gX8BpJyyk-1aQLnxLWEpPoVhx2ZGdl_wrS8VCRoq0c2OJCcDeR5UTASSHMyJzOI8gHv-USPgLPoMGLVcHyPPMadjB39YmMKOhXdI0DNEJA0PIwytlArPulXI0b0Mot9_VgAaI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuV0EZSH4J1qFum_me-l6CbktJhz13ce7Urak2Vw0ILm_fwRr7H1gVD-x2uWA-Uh8ANcsnWBkG-HN4hob6g0G7v2eI-UMewYbaF1hjAVj_L4R6kT8afHeSbS0-iOK_sZAlH5DAB5xy0A/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjh6EZTRIZX5yOWbFqKa8-8Hh_eIvq2OjTpDV8v_ujmtOil2e7x50UCYc_XgBG5hGS85jRRZ6ZLT4POE6e7ZDTl4CNYYOjHsHc3sb1KuZNXwER8FacG5EDT39k2ImoA81DWwvH2C6ZSc/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxK9V-rKhDxB2rLTjjGwYqu_fkaPtJSHUvknPzjMC8jTaycasnCz7lnItkNOhBs73ZKwwYULFU6sL1ajo7VJM603BKLc_E2_ns-kZxhusbzZedyWIqHPr2APs7NU6YeNk0A6ZUbOwaqXI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrquU2MzMsR7QDJg2oP1KVXMgyrRXEJAvaW3INGG_mtO_hl_yUD-zU6iS1Fia11zfHzPt8wyNoIr0HRTTXJLpy9UF7zwyufvyc2CfdoGSV5-SzVbhK_deylrq55iIbDEblI01N90s69Zk/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3WP1aAQvJjrHlZU_i6WBWwCWchG0sx7q9M6lmWjm6-ncnXGhr4PL34lDCU2mjnVP4LRQnAGxLa47lhiWx1SPhDJCILbSRvGspDG4l8OSUed5G2A5tAPafVk7AORIV-UAjw1pGEtjgoM4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELg61GJk7lQ-yubHzQdslG6osydiNRAw_hyphenhyphenH77VAaV8WepKKY7Cr_2mxAPpiRhqwgJYeScblMQcYjeJUL_VrK_IA9AtB7SRjRjcUu80GnqrcM3puDe0wJdDuSFTdVN3D7MY7IutAjwg8/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqV1NpYK9SKgaJGCGB1w0r3kEgI3zWPow94X4ZBIxfFSNNrN3JSCQpKnVyhju34UyiYS6RHDZBsb67nR6TQFmuJqTfqhZojiPmbfglScckdk5R3sojktVjJhOmAwYXMMhuLUKb5VUyXk/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..
Saya rasa penjelasannya sudah cukup jelas..
selamat mencoba semoga bermanfaat.....( wassalam )
. Efek hover ini kita buat dengan bantuan CSS3 transisi.
