Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover


Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover  - Widget untuk berbagi artikel ke layanan social bookmark sudah banyak kita jumpai diberbagai situs. Termasuk saya pun sudah beberapa kali menuliskan postingan mengenai social bookmark dan yang terakhir adalah tentang cara membuat floating share button (tombol share melayang) di blog. Nah selain widget social bookmark statis yang biasanya ada di sidebar atau pun widget social bookmark melayang yang biasanya ada di halaman posting, masih ada beberapa style lagi yang bisa kita gunakan. Pada tips blogging kali ini saya ingin berbagi bagaimana cara membuat menu navigasi ke layanan social bookmark dengan efek mouseover. Efek mouseover artinya kalau mouse didekatkan pada obyek tertentu maka akan menghasilkan efek tertentu pula, contoh sederhananya seperti pada drop down menu. Hasil dari widget social bookmark dengan tampilan seperti menu navigasi ini dapat anda lihat langsung pada bagian atas header blog saya ini.


Cara membuat navigasi social bookmark melayang (floating social bookmark widget) :
1.       Seperti biasa, login dulu ke dashboard blogger anda.
2.       Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3.       Copy script widget social bookmark dibawah ini, dan paste pada gadget.


4.       Silahkan edit link akun social bookmark yang ada pada script, sesuai dengan akun social bookmark yang sobat miliki.
5.       Simpan / Save gadget

Widget social bookmark melayang dengan efek mouseover ini sebenarnya dapat juga ditempatkan secara permanen pada template anda. Nah buat sobat blogger yang punya hoby ngutak-ngatik template, cobalah bereksprimen melakukannya. Yang pasti sobat harus menempatkan menu navigasi social bookmark tadi diatas menu blog yang ada pada header. Selamat bereksprimen ya..:D


37 komentar untuk "Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover"

  1. oke gan..., ane coba...
    bagus nih gan....

    BalasHapus
  2. @out-this-genk
    Siip lah.. :-*

    BalasHapus
  3. mas.. makasih tutornya... udah Q praktikkan, N ternyata maknyussss.....
    janganlupa kunjungi blogQ juga ya...

    BalasHapus
  4. @bayu aldi
    blog kamu juga mantap ternyata.. :D

    @isom orang awam
    yups., blognya isom sudah saya kunjungi ! Its cool :))

    BalasHapus
  5. terimakasih atas tutor nya sob, sangat membantu :D

    BalasHapus
  6. @Xaon
    Thanks juga Xaon atas kunjungannya.. ;)

    BalasHapus
  7. Gan like blogku dong pliss Http://efandamar.blogspot.com

    BalasHapus
  8. masii newbie nii gan ;;) cara edit link akun social bookmark yang ada pada script gimana gan :-/ :-/
    dimana letak yg harus di edit :)

    BalasHapus
  9. mas. saya minta script widget ini tapi posisi widgetnya ada di sebelah kanan. bukan diatas.

    bisa ngga?

    kalau bisa, tolong email in ke saya yaa.
    theaiff@live.com

    terima kasih :)

    BalasHapus
  10. Terima kasih tutor widget nya ini, sangat bermanfaat buat saya.. :D

    BalasHapus
  11. gan ini mousenya ga mau ikh padahal dah copas lhoh gmana yak???

    BalasHapus
  12. trima ksih bnyak mas atas informasinya sdah saya cba.. dan berhasil.. sekali lgi sya ucpkan.

    mau tnya lgi nih mas, kalo buat buku tamu sembuyi di sbelah "KIRI" gmana cranya mas?? (maaf klo sya bnyak nnya..)
    klo biasanya kan di kanan....

    BalasHapus
  13. thanks banget mas buat tips bloggernya .

    sudah saya coba dah berhasil tapi kok, menu link saya jadi ikutan melayang yah ?

    tolong di bantu mas :)

    terima kasih sekali lagi

    BalasHapus
  14. oke,, bagus gan tutorialnya..
    saya akan mencobanya,,
    jangan lupa kunjungan ke blog saya ya gan..

    BalasHapus
  15. bro kalo google nya diganti youtube gimana?

    BalasHapus
  16. @Ridho
    Bisa aja diganti sama Youtube, caranya seperti ini:
    Ganti kode CSS ul#navigation .googlebookmarks dengan ul#navigation .youtube. Kemudian ganti juga tag HTML yang ada <li class="googlebookmarks"> dengan <li class="youtube"><a href="http://www.youtube.com/nama-user/">Youtube</a></li>. Selamat mencoba :D

    BalasHapus
  17. mas irfan, saya coba widget social melayang berhasil, tapi kenapa menu link saya ikutan melayang ? tolong solusinya mas . saya sudah kotak-katik tapi masih belum berhasil juga :((

    BalasHapus
  18. mantap gan, oya mas background ku hitam gimana jadi transparan

    BalasHapus
  19. mas gimana cara menghilangkan backgroundnya,widget social melayang jalan sich tapi image gak full view coz terhalang backgroundnya ..mas gimana cara menghilangkan backgroundnya,..

    BalasHapus
  20. hilangin backgrounnya gimana masss ???

    BalasHapus
  21. thaks gan info blog anda bermanfaat

    BalasHapus
  22. Terima kasih ga pengetahuannya,,
    semoga bermanfaat buat yang lain,, amiin...

    BalasHapus
  23. wah mantab gan...
    thanks dah share....
    sangat :)]

    BalasHapus
  24. Sepertinya ini yang saya cari, Bagus sekali hasilnya. Terima kasih telah berbagi info.

    BalasHapus
  25. maz,. irfan sebelumnya maaf banget klau ngrepotin,.. heheh maklumlah sy kuliahnya di bidang agama,.. hehe,. klau boleh nanya lagi,. bikin postingan kyk punya panjenengan yg bisa di seled all trus menempatkan untuk menempatkan java scip di dalam kotal kyk di postingan ini gimana maz,.. terima kasih sebelumnya salam blogger

    BalasHapus
  26. Mantap... mo nnya om klo ngubah posisi Cara Membuat Widget Social Bookmark Melayang Dengan Efek Mouseover misalkan kita mau pasang di kiri, kanan, dan tengah itu gmana om???

    BalasHapus
  27. mantap gan ..
    Ilmu ane bertambah ..http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif

    BalasHapus
  28. Krenn gan ..
    sudah ane coba
    dan hasilnya sempurna

    ....

    BalasHapus
  29. Keren banget gan . . .

    BalasHapus
  30. Kepake Banget gan
    visit blog ane ya :D
    http://diddot-leggoss.blogspot.com

    BalasHapus
  31. makasih gan,, iklannya sangat menrik. dan ane sudah coba praktikka, tapi kok widgetnya malah berada di atas.. hehe,, gimana cara naruh di samping? hehe... makasih balasannya

    BalasHapus
  32. Mas kok Punyaku kalo facebook linknya saya masukan dengan fb saya nanti linknya jdi

    Bayu-deathbat.blogspot.com/Facebook.com/(nama Profilsaya)

    yg twiter jg sama cara fix nya gimana ya

    BalasHapus