Floating Social Bookmark CSS

Floating Social Bookmark CSS

CSS Widget

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



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

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

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-9192code-line:1-9293code-line:1-9394code-line:1-9495code-line:1-9596code-line:1-9697code-line:1-9798code-line:1-9899code-line:1-99100code-line:1-100101code-line:1-101102code-line:1-102103code-line:1-103104code-line:1-104105code-line:1-105106code-line:1-106<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/AVvXsEiaA9DB2NpASA0r8q_obMQeuE-Trdx91Wr2oGWnUCPY54q0Z3YSt4PT0wxA5nK4eETeSyejCbiBPV5GrttbMGzeSbH0hmVSviQ2Aty5G8ChMlBE7Qwt4dTpVSa74eS6o0J7FYTVhRCbHgE/s1600/socialsprite.png);
  background-position:-2px -68px;
}

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

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

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

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

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-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-4647code-line:2-4748code-line:2-4849code-line:2-4950code-line:2-5051code-line:2-5152code-line:2-5253code-line:2-5354code-line:2-5455code-line:2-5556code-line:2-5657code-line:2-5758code-line:2-5859code-line:2-5960code-line:2-6061code-line:2-6162code-line:2-6263code-line:2-6364code-line:2-6465code-line:2-6566code-line:2-6667code-line:2-6768code-line:2-6869code-line:2-6970code-line:2-7071code-line:2-7172code-line:2-7273code-line:2-7374code-line:2-7475code-line:2-7576code-line:2-7677code-line:2-7778code-line:2-7879code-line:2-7980code-line:2-8081code-line:2-8182code-line:2-8283code-line:2-8384code-line:2-8485code-line:2-8586code-line:2-8687code-line:2-8788code-line:2-8889code-line:2-8990code-line:2-9091code-line:2-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:#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/AVvXsEiaA9DB2NpASA0r8q_obMQeuE-Trdx91Wr2oGWnUCPY54q0Z3YSt4PT0wxA5nK4eETeSyejCbiBPV5GrttbMGzeSbH0hmVSviQ2Aty5G8ChMlBE7Qwt4dTpVSa74eS6o0J7FYTVhRCbHgE/s1600/socialsprite.png);
  background-position:-2px -68px;
}

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

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

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

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

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-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">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...

Artikel Terkait

  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Menu Tab dengan jQuery
    Untuk menghemat tempat, tab view menu sangat efisien untuk solusinya karena Ukuran yang relatif kecil tapi bisa memuat space yang lumayan. kali ini saya akan membagikan cara membuat tab menu, silahkan simak jika anda sedang mencari cara membuatnya. Jika setelah jadi nanti lebar atau tinggi menu tab ini tidak sesuai, silahkan anda sesuaikan se…
  • Modifikasi widget link list dengan css di blogger
    Selamat pagi sobat blogger semua, kembali muncul share tentang css ni buat widget link list blogger agar tampil lebih menarik sekalian juga bernomor seperti widget popular post. widget link list di gunakan untuk menempatkan beberapa link yang di anggap penting atau untuk mengarahkan pengunjung blog pada sebuah halaman. bisa juga untuk memajang…
  • Pencarian dengan tombol bersihkan
    Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda. Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link i…
  • Sidebar Menu Accordion jQuery
    Apa fungsi menu accordion? Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat se…
  • widget amoung tanpa javascript
    Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript. untuk itu kali ini s…

1 komentar

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
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.

Back to Top
Loading...