Floating Social Bookmark CSS

Home Widget Floating Social Bookmark CSS

Floating Social Bookmark CSS

CSS Widget

Diposting oleh: Dafin defandaky pada: 8 Januari 2013

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(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -68px;
}

.social-buttons a#twitter-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -24px;
}

.social-buttons a#facebook-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -46px;
}

.social-buttons a#rss-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -89px;
}

a.login-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/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(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -68px;
}

.social-buttons a#twitter-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -24px;
}

.social-buttons a#facebook-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -46px;
}

.social-buttons a#rss-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/s1600/socialsprite.png);
  background-position:-2px -89px;
}

a.login-buttons span {
  background-image:url(http://3.bp.blogspot.com/-1cFpImgVPc8/UDU5KDWTlVI/AAAAAAAABVk/SyYxxqwO5wU/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...

1 komentar

Jiwa Unlimited21 Desember 2015 pukul 12.05
terima kasih udah mau share mas. :)
BalasHapus
Balasan

Tambahkan komentar

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT

Konversi Emo Oot

$:\$

$\o/$

Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.