Social: facebook, google+, twitter και rss



Γεια σας μπλόγκερ! Τον τελευταίο καιρό δεν έχω και τόσο χρόνο να αλλα παρόλα αυτά βρήκα αυτό και θα το μοιραστώ μαζί σας.


Αντιγραφή τον παρακάτω κώδικα:



<style>
@charset "utf-8";
/* CSS Document */
/* ---------- FoulsCode.blogspot.gr ---------- */

@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
left: 50%;
margin: -32px 0 0 -128px; /* -(height / 2) & -(width / 2) */
position: absolute;
top: 50%;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
/* ---------- FoulsCode.blogspot.gr ---------- */
</style>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body>
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/foulscode" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/109721759993422268214/posts" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/pages/Fouls-Code/548164921863886" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://foulscode.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>


LIVE DEMO


Αφού πρώτα αντικαταστήσετε τα μαρκαρισμένα link με τα δικά σας είστε έτοιμη να κάνετε αποθήκευση.


Αν θέλετε να μας βοηθήσετε έστω και λίγο μοιραστείτε με τους φίλους σας στο facebook twitter και πάει λέγοντας!



Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Εγγραφείτε για να λαμβάνετε τις σημαντικότερες ειδήσεις της ημέρας