Memasang Sosial Media dengan Teknik Floating

Artikel tentang memasang sosial media dengan teknik floating ini merupakan jawaban atas request dari saudara rossy yang sebelumnya berkomentar di laman about me. Alhamdulillah, dari pertanyaan itu saya bisa juga memproduksi satu buah lagi artikel di bulan yang penuh Berkah ini.

Mudah-mudahan saja, bagi anda yang sedang mencari tutorial mengenai teknik memasang floating dan ingin menerapkannya di blog anda masing-masing bisa terbantu dengan artikel ini. terus di simak ya ?

kode floating sosial media
Contoh pengaplikasian teknik floating untuk sosial media

Beberapa persyaratan yang harus anda penuhi untuk mengikuti tutorial floating ini antara lain

  1. Persiapkan image (gambar) gambar sosial bookmark yang telah terupload di hosting anda, Jangan lupa persiapkan link URL image source nya. silahkan download secara gratis di sini
  2. Persiapkan semua link sosial media anda, baik itu link profil G+, link Facebook profil / Fans page blog, Link twitter, dan lain-lain serta jika anda ingin menambahkan, link feedburner blog anda bisa anda masukkan ke dalam teknik floating.

Jika kedua persyaratan tersebut di atas telah anda penuhi, langkah selanjutnya adalah memasangnya di blog, tapi sebelum itu silahkan simak script di bawah ini.

tips. Copy ke notepad anda agar memudahkan dalam mengedit script

<a href="URL Profil Gplus anda" rel="nofollow" title ="judul" target="_blank" style="display:scroll;position: fixed; bottom:255px;left:5px;">
<img src="URL Gambar anda"/></a>
<a href="URL profil fb anda" title ="judul" rel ="nofollow" target="_blank" style="display:scroll;position: fixed; bottom:205px;left:5px;">
<img src="URL Gambar anda"></a>
<a href="URL twitter anda" title ="judul" rel ="nofollow" target="_blank" style="display:scroll;position: fixed; bottom:155px;left:5px;">
<img src="Url gambar anda"></a>
<a href="Alamat feedburner anda" title ="judul" rel ="nofollow" target="_blank" style="display:scroll;position: fixed; bottom:105px;left:5px;">
<img src="Url gambar anda"></a>

Nb. Silahkan anda ganti dengan URL Image, dan URL sosial media anda pada bagian yang dibutuhkan

Beberapa keterangan yang perlu diperhatikan dari “satu contoh”

<a href=”URL profil sosial media” title =”judul yang akan muncul jika disorot tombolnya” rel =”nofollow” target=”_blank” style=”display:scroll;position: fixed; bottom:205px;left:5px;“><img src=”URL image“></a>

Silahkan anda ganti URL profil sosial media dengan URL yang telah anda persiapkan tadi.

Silahkan adan ganti dengan judul yang anda kehendaki pada gambar yang berwarna hijau di atas

Anda juga bisa mengganti posisi images dengan menganti position: fixed; dengan position: absolute; position: relative; dan position: static; sumber : adabisnis.com

Untuk mengatur posisi floating

  • Lihat kode yang berwarna merah di atas, bisa anda ganti dengan right, left, top, bottom
  • Untuk ukuran silahkan anda tentukan sendiri nilai pixelnya, anda bisa bermain spasi dengan mengatur pada ukuran bottom.

    Silahkan anda simak script yang telah saya berikan di atas, di bagian bottom terdapat perbandingan selisih ukuran pixel sebesar 50 px untuk tiap-tiap tombol social bookmark. Silahkan anda sesuaikan sendiri dengan keingingan anda. J

URL image ganti dengan link image yang telah anda upload sebelumnya

Cara memasang Kode Floating di blog wordpress (self host dan wordpress.com)

  1. Login ke dashboard wordpress anda
  2. Cari dan klik “appearance” >> “widgets
  3. Pilih widget “text” >> pastekan script di atas yang telah anda edit sebelumnya
  4. Jangan lupa klik “save” untuk menyimpan

    Demo : bisa anda lihat di samping artikel ini

Cara memasang Script Floating di blogspot

  1. Login ke akun blogger anda
  2. Pilih “rancangan” >> “tambah gadget
  3. Pilih gadget “html/javascript
  4. Pastekan script di atas yang telah anda edit sebelumnya,
  5. Jangan lupa untuk menyimpan

    Demo

Mudah bukan? Setidaknya, kita berusaha meningkatkan jumlah teman di Google+, facebook / fans, twitter, dll dengan memasang tombol sosial bookmark dengan menggunakan teknik floating yang kita gunakan di blog kita masing-masing.

Terima kasih sudah menyimak, ^^ semoga bermanfaat ^^

51 thoughts on “Memasang Sosial Media dengan Teknik Floating

  1. Wah perlu dicoba nih, hmm kayaknya floatnya mengundang selera orang buat klik hehehehe…

    • yup, bisa diterapkan juga untuk banner dsb. klo saya untuk saat ini masih menjaring subcriber, berguna juga untuk menarik minat orang untuk ngefans blog kita hhehehe

    • o ya mas.. ni tambahan tips dari saya supaya tidak mengurangi performa loading blog.
      lebih baik script di copy ke file footer.php sebelum . Saya tadi coba di widget, ternyata loading blog jadi sedikit lama karena harus meload icon dl.. kalau di kasih di footer, blog akan tampil sempurna dl baru icon di load.
      Cuma dari hasil experiment saya looh mas :D

      • trims mas tomi, akan saya terapkan juga nanti , awalnya saja juga ingin menaruhnya di footer, tapi masih belum fix dengan letak serta bentuk iconnya,
        lagi bereksperimen mas, yang mana letak serta bentuk iconnya yang memiliki klik tertinggi,
        sudah beberapa kali ini saya memutar-mutar posisinya ^^, klo tarus di footer saya harus bolak balik non/aktifkan plugin firewal mas hehehe :)
        klo sudah dapat posisi yang bagus, ntar akan saya pertimbangkan untuk menaruhnya di footer, trims atas sarannya ^^

        • izin bookmark dulu mas.
          ntar baru di coba deh :)
          eh iya kalau plugin firewall ga harus di nonaktifkan mas, cukup masukan ip whitelist dari koneksi yang di pakai.
          kalau ip dinamis, ya tinggal masukan ip yang di pakai saat mau edit theme.
          pengalaman pribadi mas :D

  2. akhirnya udah pasang juga mas :D
    tetep saya taruh di samping tapi saya ga pakai widget mas :)
    saya pasang di sidebar.php langsung tapi bawah sendiri setelah widget.
    gambarnya juga saya masukkan langsung ke folder images di theme yang saya pakai :)

    • yup, saya juga sama, memasukkannya ke folder images yang dipakai juga, :)
      tapi dalam waktu dekat ini saya akan mencoba memasangnnya di footer.php seperti saran mas tomi, soalnya berkaitan dengan fast loading, :)

  3. Kalau buat Box berwarna Kuning yang ada dibawah postingan itu gimana mas? share dunk… keren Euy :D

  4. Izin coba y mas, setelah di ikuti keren euy. lg nyari gambar Gif nih mas. Sharing icon yg Gif klo da mas :)

    • klo menggunakan gif bisa berat loadingnya mas,
      klo menggunakan gif, tempatkan kodenya di footer agar lebih kelihatan hasilnya

    • yup bisa saja, tapi apa tidak takut mas, menyalahi aturan TOS GA,
      klo untuk banner langsung bisa diterapkan, tapi untuk javascript, cara floatingnya lain lagi mas, ^^

  5. unik seh cuma kayaknya orang gak suka dengan model seperti itu karena sering error apalagi masih banyak yg menggunakan IE :D

  6. Pingback: Memasang Icon Social Media dengan Teknik Floating | Indahnya Berbagi | Satublog.Us

    • silahkan mas,, klo mau download icon sosial media,, di blog ini sudah saya rangkum yang keren2 :)

  7. Kalo tombol follow, like, g+ dibawah ini pasang scriptnya dimana ya?? boleh tau??
    hehehe :D

    • bisa, di joomla kalau tidak salah ada widgetnya kan, ? kalau mau gampang implant ke themesnya
      dicoba saja dulu gan, utak atik themes, tapi terlebih dulu backup agar nanti kalau error bisa dikembalikan ke posisi semula

  8. nah baru nongol artikel baru na. dari kemarin ane ke sini lom ada artikel terbaru na. sips, artikel kali ini memang keren.
    dari pada floating blog2 lain, ploating blog ne keren banget, salut.

Comments are closed.