Vertical Floating Social Sharing Bar Part-1 adalah sebuah widget berbagi yang akan melayang pada blog/situs Anda.
Widget ini dulu pernah saya pasang di blog Oto Website dan kali ini saya akan membagikannya kepada Anda. Widget ini tidak akan menghabiskan tempat pada blog/situs anda.

Jadi bagi Anda yang kehabisan tempat pada blog/situs Anda, Anda saya sarankan untuk menggunakan Vertical Floating Social Sharing Bar Part-1.
Dan bagi anda yang suka dengan widget melayang bisa menggunakan widget ini. cara memasang widget ini juga mudah alias tidak ribet dan tidak pake lama.

Disini saya melakukan sedikit perubahan pada widget ini agar bisa menjadi lebih menarik, pada gambar di bawah ini bisa anda lihat perubaha yang telah saya lakukan pada widget ini.

Sebelum di rubah (default)

Setelah saya rubah (sekarang)

Saya hanya sedikit merubahnya agar widget ini menjadi lebih menarik saja.



Cara penempatan Vertical Floating Social Sharing Bar Part-1 ini ada dua macam di antaranya di bagian



  • Left (Kiri) blog/situs Anda.
  • Right (Kanan) blog/situs Anda.






Pertama-tama Anda harus menginstal Java Script Vertical Floating Social Sharing Bar Part-1 di template blog/situs Anda.

Caranya:

1. Login ke akun blogger.

2. Pada Dasbor klick Rancangan ➨ Edit HTML.

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template Anda cari kode </head> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu sekarang letakkan kode java script berikut di atas kode tadi.



<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/share_buttons.js"></script>
<script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/share_loader.js"></script>


6. Jangan di Simpan dulu lakukan langkah selanjutnya.






Di ini Anda harus memilih salah satu tempat di mana Anda ingin widget Vertical Floating Social Sharing Bar Part-1 ini muncul.

Caranya:

8. Dalam Edit Template cari kode  </body> dan letakkan salah satu kode berikut di atasnya.







<script>
var options={ "publisher": "d4be5209-8eb5-4854-8391-917faf746b47", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "linkedin", "pinterest", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>







<script>
var options={ "publisher": "d4be5209-8eb5-4854-8391-917faf746b47", "position": "right", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "linkedin", "pinterest", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>


9. Terakhir Simpan template.

Warning:
Dari kode di atas jangan ada yang Anda rubah, karna kode tersebut menggunakan Id atau sudah terbungkus tag kondisional agar widget berfungsi dengan baik, dan bila di rubah scrip tersebut tidak akan berfungsi.

Sekian!

Oke saya rasa cukup untuk postingan atau articles Vertical Floating Social Sharing Bar Part-1. Silahkan anda tunggu lanjutan dari Vertical Floating Social Sharing Bar Part-1 ya itu:
Vertical Floating Social Sharing Bar Part-2 yang lebih menarik lagi!

Bagaimana apakah Anda berhasil menerapkannya pada blog/situs Anda? silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau articles di atas!

Posting Komentar Blogger Disqus

  1. ka rif...gmn kbrnya,,, ka rif saya mau tanya gmn caranya bikin postingan ada lampunya

    BalasHapus
  2. @rama banten Rb Sya mengnkan Java Script + HTML yg trbugkus tag kondisional untuk membuatnya.
    jika anda berminat cepat/lmbat sya akan sgera membhasnya.

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top