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

  • Costume halaman error 404
    404 Adalah Kode Halaman Error yang biasa muncul pada setiap halaman web/blog ketika seorang visitor (pengunjung) mengunjungi url yang tidak ada atau telah di hapus dari web/blog. Nah, kali ini saya ingin berbagi tutorial "Bagaimana Cara Membuat Halaman Error 404" untuk di pasang pada blog sobat dengan sedikit custom dan tambahan jquery. Untuk…
  • CSS untuk komentar blogger facebook
    Membuat tampilan komentar blogger seperti facebook dengan css yang di buat CSS ini dipersembahkan oleh dte, memasangnya pun tidak rumit cukup mudah. css ini telah di edit oleh kang ismet dengan menghilangkan border/garis pinggir serta padding left dan right atau jara lebar dalam kanan dan kiri. Demo Cara Membuat Komentar Blogger S…
  • Menu navigasi blogger responsive CSS3
    Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu, buat sobat yang belum memasang ini di blog milik sendiri sekarang saya share caranya dengan tampilan responsive yang bisa menyesuaikan di semua resolusi tampilan. menu ini sederhana, hanya sebagai dasar saja jika ingin lebih menarik…
  • Membuat efek linknudge pada label blog
    Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery. Blogging CSS SE…
  • 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 …
  • Menandai komentar admin dengan css
    Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya. blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang ber…

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...