Floating Social Bookmark dengan CSS

Friday, December 27, 2013

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-7677code-line:1-7778code-line:1-7879code-line:1-7980code-line:1-8081code-line:1-8182code-line:1-8283code-line:1-8384code-line:1-8485code-line:1-8586code-line:1-8687code-line:1-8788code-line:1-8889code-line:1-8990code-line:1-9091code-line:1-91.floating-bar {
  position:fixed;
  right:0;
  top:35%;
  width:25px;
  animation:static-bar .8s;
  -moz-animation:static-bar .8s;
  -webkit-animation:static-bar .8s;
}

.floating-bar:hover {
  z-index:1000;
}

.social-buttons a,
.login-buttons {
  background:none repeat scroll 0 0 rgb(34,34,34);
  background-repeat:no-repeat;
  display:block;
  height:20px;
  margin-bottom:3px;
  padding:4px 0 4px 4px;
  right:0;
  width:140px;
  position:relative;
  -moz-border-radius:3px 0 0 3px;
  -webkit-border-radius:3px 0 0 3px;
  -khtml-border-radius:3px 0 0 3px;
  border-radius:3px 0 0 3px;
  background-position:4px 4px;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
  transition:all 0.3s ease;
  border:1px solid rgb(51,51,51);
}

.social-buttons span,
.login-buttons span {
  background-repeat:no-repeat;
  color:#FFFFFF;
  display:block;
  font-size:10px;
  height:18px;
  letter-spacing:-1px;
  line-height:1.9em;
  padding-left:40px;
  text-shadow:0 1px 1px rgba(0,0,0,0.2);
}

.social-buttons a:hover,
.login-buttons:hover {
  background:none repeat scroll 0 0 #2b2b2b;
  background-position:center;
  border:1px solid #900;
  box-shadow:0 5px 8px -1px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 5px 8px -1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 5px 8px -1px rgba(0,0,0,0.2);
  z-index:9999;
  right:119px;
}

.social-buttons a#buzz-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -68px;
}

.social-buttons a#twitter-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -24px;
}

.social-buttons a#facebook-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -46px;
}

.social-buttons a#rss-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px -89px;
}

a.login-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5pAw2Y_J7gyM7KNwn4jHE5KJ8SylopZYwRhndKCEFhSeA4bfbSVPJnWPLAXkXPHVZnQ7T5M4zZ-Is5nfk8IOdhcEe6N6xt5ZBkVSxoYBXxlCSb2fBATKnzIA8xmCYHkpf9F1GrJCrPs/s1600/socialsprite.png);
  background-position:-2px 0;
}

@keyframes static-bar{0%{right:-25px}100%{right:0}}
@-moz-keyframes static-bar{0%{right:-25px}100%{right:0}}
@-webkit-keyframes static-bar{0%{right:-25px}100%{right:0}}

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-13<div class="floating-bar">
 <div class="login">
  <div id="itp-login-button">
   <a class="login-buttons buttontext" href="#" rel="nofollow" target="_blank"><span class="desc">Menu</span></a>
  </div>
  <div class="social-buttons">
   <a class="lightbox" data-options="{&quot;width&quot;:420, &quot;height&quot;:405, &quot;iframe&quot;: true}" href="#" id="twitter-buttons" rel="nofollow"><span>Menu</span></a>
   <a class="lightbox" data-options="{&quot;width&quot;:300, &quot;height&quot;:430, &quot;iframe&quot;: true}" href="#" id="facebook-buttons" rel="nofollow"><span>Menu</span></a>
   <a href="#" id="buzz-buttons" rel="nofollow" target="_blank"><span>Menu</span></a>
   <a href="#" id="rss-buttons" rel="nofollow" target="_blank"><span>Menu</span></a>
  </div>
 </div>
</div>

Lihat Demonya

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini