Learn And Share With Faried

Cara Memasang Widget Floating Social Bookmark (Menggantung)

Dan lagi, dan lagi..memasang tombol sharing bookmark memang banyak macamnya mulai dari jenis icon/gambarnya, posisi/letak, serta efek yang berbeda-beda. Untuk saya pribadi sih hanya tinggal menggunakan saja lalu berbagi kepada sahabat blogger lain yang memang belum tahu dan ingin menggunakan juga. Memasang Widget Floating Social Bookmark (Menggantung), mungkin sahabat blogger sudah pernah melihat blog lain yang menggunakan tombol sharing bookmark seperti ini tapi mencari blog/situs web yang membahas cara memasangnya sedikit sulit lo, saya saja baru nemuin kemarin yang benar-benar sesuai dengan kriteria.

Dan kenapa widget ini saya katakan menggantung ?, alasannya adalah karena letak widget ini berada di atas halaman blog kita dan akan membuka setelah kursor mouse berada di atasnya (efek jQuery mouseover) dengan icon/gambar cantik seperti telur ayam sedang menetas dengan posisi tetap atau akan terus mengikuti scroll mouse (fixed position). Lihat screenshootnya di bawah ini :

menu share bookmark hati terbelah

Oke deh sahabat blogger, langsung saja menuju pojok kampung. Untuk memasang Widget Floating Social Bookmark (Menggantung) ini sangatlah mudah sahabat blogger, kita tidak perlu masuk dan utak-atik template. Dan berikut di bawah adalah langkah-langkah untuk memasangnya

  1. Login pada dasbor blogger, lalu dan ,
  2. pilih Layout/Tata Letak
  3. pilih lagi Add Gadget/Tambah Gadget, maka akan terbuka jendela baru/pop-up window
  4. Scroll ke bawah dan cari lalu klik HTML/Javascript, maka akan terbuka tabel kosong
  5. Setelah terbuka halaman/tabel kosong tersebut, selanjutnya copy kode di bawah ini dan paste pada tabel kosong tersebut.

    <style> ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; border:0; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 90px; height: 25px; background-color:#eeeeee; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.96; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff; } ul#navigation .rss a{ background-image: url(http://hosting-gambarku.googlecode.com/files/rss_64x64.png); } ul#navigation .facebook a { background-image: url(http://hosting-gambarku.googlecode.com/files/facebook_64x64.png); } ul#navigation .twitter a { background-image: url(http://hosting-gambarku.googlecode.com/files/twitter_64x64.png); } ul#navigation .googlebookmarks a { background-image: url(http://hosting-gambarku.googlecode.com/files/google_64x64.png); } </style> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script> <br /> <ul id="navigation"> <li class="rss"><a href="http://tempat-inspirasiku.blogspot.com/atom.xml">RSS Feed</a></li> <li class="facebook"><a href="http://www.facebook.com/pages/faried.blog">Facebook</a></li> <li class="twitter"><a href="http://www.twitter.com/Faried_Creative">Twitter</a></li> <li class="googlebookmarks"><a href="https://plus.google.com/112196265366255145566/">Google+</a></li> </ul>

    Catatan :
    Ganti kode yang berwarna kuning di atas sesuai dengan url milik sahabat

  6. Lalu klik Save/Simpan dan lihat hasilnya.

Sekian untuk postingan kali ini tentang Memasang Widget Floating Social Bookmark (Menggantung)
selamat mencoba dan semoga berhasil
Referensi : http://blognya-reggy.blogspot.com
Salam Hangat dari blogger pemula blog inspirasi ..

5 komentar:

iwan mengatakan... balas

pegen banget masang, tapi takut gagal...T_T

Faried Blogger mengatakan... balas

@iwan: tidak akan gagal kok, dicoba saja dulu.
Kalaupun nantinya tidak cocok dengan selera bisa langsung dihapus melalui layout.,jadi tidak perlu membuka dan mengganggu setting template lagi.

Rudy Hartono mengatakan... balas

makasih sekali sob infonya

Herman mengatakan... balas

makasih gann

Ary Anshorie mengatakan... balas

Okelah kalo begitu.... mesti dicoba semoga ada garansinya, hiks hiks....

Posting Komentar

Attention..!!
Blog ini adalah Blog Dofollow..
Jadi, silahkan berkomentar yang santun dan relevan..

Persyaratan :
1. Follow via Google FriendConnect dulu agar komentar Anda bisa cepat saya balas.
2. Dilarang menyertakan link di dalam komentar, jika ingin menyertakan link sebaiknya pada pilihan Name/URL.

Dan sebagai rasa terima kasih,
saya akan Follow + Berkomentar juga pada blog Anda.