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

  • Widget Related Post dengan 6 style
    Bukan hal baru lagi memang membahas topik related post blogger, tetapi seiring dengan waktu related post semakin memiki keragaman yang terus di kembangkan oleh para blogger. kali ini saya akan membagi cara termudah untuk mendesain related post menggunakan tool generator yang telah di buat oleh master taufik nurohman. langsung saja ikuti langka…
  • Floating Social Bookmark Berefek Easing
    Pagi sobat blogger, bangun pagi semangat lagi. beberapa hari ini saya terus memposting ulang artikel di blog ini untuk memperbaiki artikel lama yang kurang greget. pagi ini saya akan memposting trik dan cara membuat sosial bookmark melayang untuk blogger, untuk demo dann penampakannya bisa sobat lihat di screnshoot berikut ini: Demo Beri…
  • 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…
  • Membuat Sticky post di blogger dengan gadget
    Demo Membuat sticky post di blogger dengan gadget sangat mudah, mari kita lihat bagaimana kita bisa membuat sticky post menggunakan gadget HTML / Javascript. Saya tidak menemukan "solusi penuh" di mana sticky post dapat bekerja seperti seharusnya, yaitu hanya tampilkan pada halaman depan dari blog, tapi tidak pada halaman lain. . Menamb…
  • Memasang Sticky Widget Keren di Blogspot
      Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu 1. Menambakan kode CSS 2. Menambah kode JavaScript 3. Menambahkan kode HTML Menambah kode CSS 1. Login ke Blogger 2. Klik Template > Edit HTML > Lanjutkan 3. Tambahkan kode CSS, contoh kode seperti ini dan tempatkan di atas ]]></b:skin> :…
  • 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 …

1 komentar


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