Social Media Icons Dengan Efek Spin - Widget ikon sosial media ini akan memberikan efek spinner atau berputar pada saat di sorot mouse.
Icons Sosial Media Dengan Efek Spin
Demo
Tutorial Membuat Widget Icons Sosial Media Dengan Efek Spin
Buka dasboard blog ▬►Tatak Letak ▬►Add gadget HTML
Seperti pada gambar dibawah
Lalu masukan kode berikut pada add gadget HTML trsebut..
Icons Sosial Media Dengan Efek Spin
<style>
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
</style>
<br />
<center>
<div id="social">
<a href="http://feeds.feedburner.com" target="_blank" title="Grab Our Rss Feed">
<img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQs5FnDfwc8Jk3hHm_u0F8A2zTWjvLBjD3aIi8bQQcWbzfEj_mjGt4zZloxTtidkmcRFTSgo1__IM3nD1VaZ-DMhPZltI_T21m5anxeDjyApJVp0uN63uc-tJj3qpcYpBE2LzjgxhWVyIs/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=feedburnerurl&loc=en_US" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9eGzhJHhGrEDcu7nm_R8PgcrRwr-zU7JogmC_rM3rZyEy-vddeOibGmEMG5gjgGbb8b8k97FBgUcwl3RweybOmH_55SxzyEMfuML6l6sD3F2NJMD8jUgGra6ElGmg0J6Tlyr1Ka9A9u8I/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://facebook.com" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4pGDa6dbX-N4VDqFdyoBGwceVrabXuwqCpcc1Et4nWQ-At3VjZTkoyYCdcbnL9HpZgqTCQS5X5as2ebWCHIdLn4YNsFODgGOq6zsJ7ImyeJRdpwyyyCy29RBprAUKAYatGsVAKEenacW/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://twitter.com" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv_yGr7ZKTpU6r53pAtCZS2_cIlyCYUzu5tWuAGcLVv6OGGK7G2DmT1ZGzDHPpCmuPeihYjSLtw_adAT-AkjcSHeoaflYBjgbP4xQUUE3RKd_22ck2SXDk8XvRmptlarROYFCilkXwYpKF/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a>
<a href="https://plus.google.com" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYFqI_CuLg6CNJdH3YewAadSz1H4aFPBObmsiDumLeACrMOG4I6vA-8zE4omjmCKfRY03cSLB70oxD2jY8rmuSmBm9_OORy_aEGNPwTBH7KiWSkZnW517vwojxf8mQk7UabG2M-8uQ7Uq/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a>
<a href="http://pinterest.com" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVL-6LB8bdnr0vU4o0Ov4zLoUKeEhrXwEkI7CUOk79kkPn6_gLqHcF4b4VACX9bOlPFKHM8s84xZcA2w32WH9pRxcF64in7-zjOKE7P9WZfid9qsUiRW4951HEGBDPn3CeyN1BZ78cCOWq/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
</center>
URL yang diwarnai Merah silahkan diganti dengan URL sosmed sobat sendiri...
Ditulis Oleh : Robby Armansyah
Anda baru saja membaca artikel dengan judul Icons Sosial Media Dengan Efek Spin. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.
URL laman ini.
2 komentar
Show Konversi KodeHide Konversi KodeShow EmoticonHide Emoticon