Social Heart Widget

Social heart widget se poate instala in orice parte a blog-ului sau a site-ului doriti.
Doar copiati codurile de mai jos si adaugati-le intr-o structura ce accepta formatul HTML:


HTML
<!-- foxycode-social --> <div align='center' class='foxyy'> <table id='foxycode-social'> <tr> <td class='foxy-twitter'><a href='#'>@</a></td> <td class='foxy-facebook'><a href='#'>@</a></td> <td><span class='heartbeat'>Loading...</span></td> <td class='foxy-rss'><a href='#'>@</a></td> <td class='foxy-google'><a href='#'>@</a></td> </tr> </table> </div> <!-- end-foxycode-social -->
- Inlocuiti # cu adresa paginii voastre sociale!
CSS
#foxycode-social { position: relative; padding: 5px; } .foxy-twitter { background: url(https://cdn3.iconfinder.com/data/icons/picons-social/57/43-twitter-32.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0); color: transparent; font-size: 30px; height: 32px; padding: 2px; width: 32px !important; } .foxy-twitter a { color: transparent!important; } .foxy-facebook { background: url(https://cdn3.iconfinder.com/data/icons/picons-social/57/46-facebook-32.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0); color: transparent; font-size: 30px; height: 32px; padding: 2px 5px 2px 2px; width: 32px !important; } .foxy-facebook a { color: transparent!important; } .foxy-rss { background: url(https://cdn3.iconfinder.com/data/icons/picons-social/57/60-rss-32.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0); color: transparent; font-size: 30px; height: 32px; padding: 2px; width: 32px !important; } .foxy-rss a { color: transparent!important; } .foxy-google { background: url(https://cdn3.iconfinder.com/data/icons/picons-social/57/80-google-plus-32.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0); color: transparent; font-size: 30px; height: 32px; padding: 2px; width: 32px !important; } .foxy-google a { color: transparent!important; } @-webkit-keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @-moz-keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @-o-keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } @keyframes heartbeat { 0% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 14% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 28% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } 42% { -moz-transform: rotate(45deg) scale(1.3); -ms-transform: rotate(45deg) scale(1.3); -webkit-transform: rotate(45deg) scale(1.3); transform: rotate(45deg) scale(1.3); } 70% { -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); } } /* Styles for old versions of IE */ .heartbeat { font-family: sans-serif; font-weight: 100; } /* :not(:required) hides this rule from IE9 and below */ .heartbeat:not(:required) { -webkit-animation: heartbeat 1300ms ease 0s infinite normal; -khtml-animation: heartbeat 1300ms ease 0s infinite normal; -moz-animation: heartbeat 1300ms ease 0s infinite normal; -ms-animation: heartbeat 1300ms ease 0s infinite normal; -o-animation: heartbeat 1300ms ease 0s infinite normal; animation: heartbeat 1300ms ease 0s infinite normal; display: inline-block; position: relative; overflow: hidden; text-indent: -9999px; width: 45px; height: 36px; top: -3px; -moz-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); -webkit-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .heartbeat:not(:required):after, .heartbeat:not(:required):before { position: absolute; content:""; background: #ff0000; } .heartbeat:not(:required):before { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-bottomleft: 12px; -webkit-border-bottom-left-radius: 12px; border-bottom-left-radius: 12px; top: 12px; left: 0; width: 36px; height: 24px; } .heartbeat:not(:required):after { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius: 12px; border-top-left-radius: 12px; -moz-border-radius-topright: 12px; -webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; top: 0; left: 12px; width: 24px; height: 12px; }

• Live Preview