Beranda » CSS » Widget » Floating Social Bookmark CSS

Floating Social Bookmark CSS

Sekarang ini untuk membuat floating social Bookmark sudah sangat mudah, anda bisa mengikuti dua cara di bawah ini.

Demo

Cara 1: Script Floating Social Bookmark diletakkan di widget blog.

Login ke blog Anda.
Pilih Tata letak
Pilih Add Gadget (saran: pilihlah gadget paling bawah)
Pilih HTML/JavaScript.
Copy dan Paste-kan script dibawah ini ke dalamnya dan klik Simpan.
Coba lihat blog Anda, sekarang Floating Social Bookmark sudah muncul di blog Anda.

<style>
.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:#369;
  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);
  font-size:12px;
}

.social-buttons a:hover,
.login-buttons:hover {
  background:none repeat scroll 0 0 #2b2b2b;
  background-position:center;
  border:1px solid #333;
  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:89px;
}

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

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

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

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

a.login-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSOal2r3CCB3EcaoGZAaij0UEJdLNluVyFLGkDtSE9RHeJjWFHOjzw3Yt3j2qyjD4zZxjH79rDxlN6D1x77XeAGIAZd5Z4rXuihRka9dGn6x739fbUjLBDVQBhUuqL9S8lZpnGb5Fb8ng/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}}
</style>
<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">Login</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>twitter</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>facebook</span></a>
   <a href="#" id="buzz-buttons" rel="nofollow" target="_blank"><span>Google+</span></a>
   <a href="#" id="rss-buttons" rel="nofollow" target="_blank"><span>RSS</span></a>
  </div>
 </div>
</div>

Cara 2: Script Floating Bookmark diletakkan di dalam template blog.

1. Login ke blog Anda.
2. Backup dulu template blog Anda.
3. Pilih Template -> Edit HTML

Letakkan css berikut di atas kode </style>

.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:#369;
  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);
  font-size:12px;
}

.social-buttons a:hover,
.login-buttons:hover {
  background:none repeat scroll 0 0 #2b2b2b;
  background-position:center;
  border:1px solid #333;
  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:89px;
}

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

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

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

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

a.login-buttons span {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSOal2r3CCB3EcaoGZAaij0UEJdLNluVyFLGkDtSE9RHeJjWFHOjzw3Yt3j2qyjD4zZxjH79rDxlN6D1x77XeAGIAZd5Z4rXuihRka9dGn6x739fbUjLBDVQBhUuqL9S8lZpnGb5Fb8ng/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}}

Carilah (tekan CTRL+F) kode </body>
Copy dan Paste-kan kode dibawah ini tepat setelahnya.

<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">Login</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>twitter</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>facebook</span></a>
   <a href="#" id="buzz-buttons" rel="nofollow" target="_blank"><span>Google+</span></a>
   <a href="#" id="rss-buttons" rel="nofollow" target="_blank"><span>RSS</span></a>
  </div>
 </div>
</div>

Dan Simpan template Anda.

ubah seluruh link tujuan pada kode "href="#""

sekian saja semoga bermanfaat...