Social icons για το blog/site σας.
Αντιγραφή επικόλληση τον παρακάτω κώδικα:
<style>@import url(http://weloveiconfonts.com/api/?family=entypo|zocial);@import url(http://fonts.googleapis.com/css?family=Sintony);/* foulscode.blogspot.gr */[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}
/* zocial */[class*="zocial-"]:before { font-family: 'zocial', sans-serif;}
html, body { width: 100%; height: 100%; margin: 0; padding: 0;}
body { background: #d6d7dc; color: #fefefe; -webkit-font-smoothing: antialiased;}
i { font-style: normal;}
ul.social-links { list-style: none; width: 21.81818em; margin: 2em auto;}ul.social-links .social-icon { width: 4em; height: 4em; float: left; margin: 1em 1.4em; margin-left: 0; border-radius: 100%; box-shadow: 0 0.3em 0.25em rgba(0, 0, 0, 0.1); -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; transition: opacity 0.3s ease;}ul.social-links .social-icon a { width: 100%; height: 100%; display: block; position: relative; transform: scale(1.15) translateZ(0);}ul.social-links .social-icon a:hover { transform: scale(1.15) translateZ(0);}ul.social-links .social-icon a span { display: block; float: left; width: 1em; height: 4em; overflow: hidden; margin: 0; line-height: 1.1; padding: 0; font-size: 1.4em; position: relative;}ul.social-links .social-icon a span:nth-child(1) { text-align: right; position: absolute;}ul.social-links .social-icon a span:nth-child(1) i { display: block; margin-top: .55em; margin-left: .35em; color: #fff;}ul.social-links .social-icon a span:nth-child(2) { text-align: left; margin-left: 0em; width: 40%; position: relative; margin: 0 0em 0 1em; text-align: left; z-index: 2;}ul.social-links .social-icon a span:nth-child(2) i { margin-top: .55em; margin-left: -.65em; display: block; color: #ccc;}ul.social-links .social-icon.twitter { background-color: #00cdf8; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #00cdf8), color-stop(50%, #00bdda)); background-image: -webkit-linear-gradient(left, #00cdf8 50%, #00bdda 50%); background-image: linear-gradient(to right,#00cdf8 50%, #00bdda 50%);}ul.social-links .social-icon.twitter a { left: .74em; top: .25em;}ul.social-links .social-icon.twitter span:nth-child(2) i { color: #fef1e0;}ul.social-links .social-icon.facebook { background-color: #6e8cca; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #6e8cca), color-stop(50%, #5389c9)); background-image: -webkit-linear-gradient(left, #6e8cca 50%, #5389c9 50%); background-image: linear-gradient(to right,#6e8cca 50%, #5389c9 50%);}ul.social-links .social-icon.facebook a { left: 1.09em; top: .2em;}ul.social-links .social-icon.facebook span:nth-child(1) { margin-left: -.25em;}ul.social-links .social-icon.facebook span:nth-child(2) { margin-left: .74em;}ul.social-links .social-icon.facebook span:nth-child(2) i { color: #c2ecf8;}ul.social-links .social-icon.dribbble { background-color: #e6659d; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #e6659d), color-stop(50%, #be639c)); background-image: -webkit-linear-gradient(left, #e6659d 50%, #be639c 50%); background-image: linear-gradient(to right,#e6659d 50%, #be639c 50%);}ul.social-links .social-icon.dribbble a { left: .80em; top: .25em;}ul.social-links .social-icon.dribbble span:nth-child(1) { margin-left: -.08em;}ul.social-links .social-icon.dribbble span:nth-child(2) { margin-left: .92em;}ul.social-links .social-icon.dribbble span:nth-child(2) i { color: #d9e9f8;}ul.social-links .social-icon.behance { background-color: #07a2e5; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #07a2e5), color-stop(50%, #0395e2)); background-image: -webkit-linear-gradient(left, #07a2e5 50%, #0395e2 50%); background-image: linear-gradient(to right,#07a2e5 50%, #0395e2 50%);}ul.social-links .social-icon.behance a { left: .80em; top: .25em;}ul.social-links .social-icon.behance span:nth-child(1) { margin-left: -.06em;}ul.social-links .social-icon.behance span:nth-child(2) { margin-left: .92em;}ul.social-links .social-icon.behance span:nth-child(2) i { color: #75e3fe;}ul.social-links .social-icon.youtube { background-color: #e23c48; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #e23c48), color-stop(50%, #b83c47)); background-image: -webkit-linear-gradient(left, #e23c48 50%, #b83c47 50%); background-image: linear-gradient(to right,#e23c48 50%, #b83c47 50%);}ul.social-links .social-icon.youtube a { left: .80em; top: .15em;}ul.social-links .social-icon.youtube span:nth-child(1) { margin-left: -.06em;}ul.social-links .social-icon.youtube span:nth-child(2) { margin-left: .92em;}ul.social-links .social-icon.youtube span:nth-child(2) i { color: #d1e5ec;}ul.social-links .social-icon.linkedin { background-color: #4495c0; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #4495c0), color-stop(50%, #447fa7)); background-image: -webkit-linear-gradient(left, #4495c0 50%, #447fa7 50%); background-image: linear-gradient(to right,#4495c0 50%, #447fa7 50%);}ul.social-links .social-icon.linkedin a { left: .80em; top: .11em;}ul.social-links .social-icon.linkedin span:nth-child(1) { margin-left: -.06em;}ul.social-links .social-icon.linkedin span:nth-child(2) { margin-left: .92em;}ul.social-links .social-icon.linkedin span:nth-child(2) i { color: #f4dbe1;}ul.social-links .social-icon.skype { background-color: #00cff7; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #00cff7), color-stop(50%, #01c7f8)); background-image: -webkit-linear-gradient(left, #00cff7 50%, #01c7f8 50%); background-image: linear-gradient(to right,#00cff7 50%, #01c7f8 50%);}ul.social-links .social-icon.skype a { left: .80em; top: .2em;}ul.social-links .social-icon.skype span:nth-child(1) { margin-left: -.06em;}ul.social-links .social-icon.skype span:nth-child(2) { margin-left: .92em;}ul.social-links .social-icon.skype span:nth-child(2) i { color: #94f0ff;}ul.social-links .social-icon.pinterest { background-color: #f34256; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #f34256), color-stop(50%, #ca3f56)); background-image: -webkit-linear-gradient(left, #f34256 50%, #ca3f56 50%); background-image: linear-gradient(to right,#f34256 50%, #ca3f56 50%);}ul.social-links .social-icon.pinterest a { left: .80em; top: .25em;}ul.social-links .social-icon.pinterest span:nth-child(1) { margin-left: -.06em;}ul.social-links .social-icon.pinterest span:nth-child(2) { margin-left: .92em;}ul.social-links .social-icon.pinterest span:nth-child(2) i { color: #d9fbfd;}
h1 { font-weight: 300; text-shadow: -0.05em 0.05em #d6d7dc, -0.08em 0.08em #95a5a6; color: #34495e; width: 100%; height: 2em; float: left; text-align: center; font-family: "Sintony", Helvetica, sans-serif;}
.mention { width: 100%; height: 2em; float: left; text-align: center; font-family: "Sintony", Helvetica, sans-serif;}.mention h3, .mention h1 { width: 60%; display: block; margin: 2em auto; font-weight: 300; text-shadow: -0.1em 0.1em #d6d7dc, -0.11em 0.11em #95a5a6; color: #34495e;}.mention h3 a, .mention h1 a { color: #2980b9;}
.social-links:hover .social-icon:not(:hover) { opacity: 0.6;}/* foulscode.blogspot.gr */</style><ul class="social-links"> <li class="social-icon twitter"> <a href="URL"> <span><i><span class="ico entypo-twitter"></span></i></span> <span><i><span class="ico entypo-twitter"></span></i></span> </a> </li> <li class="social-icon facebook"> <a href="URL"><span><i><span class="ico entypo-facebook"></span></i></span><span><i><span class="ico entypo-facebook"></span></i></span></a> </li> <li class="social-icon dribbble"> <a href="URL"><span><i><span class="ico entypo-dribbble"></span></i></span><span><i><span class="ico entypo-dribbble"></span></i></span></a> </li> <li class="social-icon behance"> <a href="URL"><span><i><span class="ico entypo-behance"></span></i></span><span><i><span class="ico entypo-behance"></span></i></span></a> </li> <li class="social-icon youtube"> <a href="URL"><span><i><span class="ico zocial-youtube"></span></i></span><span><i><span class="ico zocial-youtube"></span></i></span></a> </li> <li class="social-icon linkedin"> <a href="URL"><span><i><span class="ico entypo-linkedin"></span></i></span><span><i><span class="ico entypo-linkedin"></span></i></span></a> </li> <li class="social-icon skype"> <a href="URL"><span><i><span class="ico entypo-skype"></span></i></span><span><i><span class="ico entypo-skype"></span></i></span></a> </li> <li class="social-icon pinterest"> <a href="URL"><span><i><span class="ico entypo-pinterest"></span></i></span><span><i><span class="ico entypo-pinterest"></span></i></span></a> </li></ul>
DEMO LIVE
Αφού πρώτα αντικαταστήσετε τα URL μπορείτε να κάνετε αποθήκευση.
Κατηγορίες:
Σχόλια