Tuturoial/Cara Memasang Tombol Like/Share Di Blog Dan website

Tuturoial/cara memasang tombol like/share di Blog dan website

Pada keseempatan kali ini saya akan kupas cara memasang tombol like Facebook,google plus,Twetter,dan lain lain pada postingan blog ataupun website.Sebenarnya pada tempalate bawaan blogger pun sudah ada namun hanya untuk share doang.Tombol like atau share tentunya sangat berguna sekali untuk menjaring banyak pengunjung pada blog kita .Dan meningkatkan traffic blog kita.

Saya sudah uji coba berbagai macam kode HTML untuk tombol like in dari berbagai Tutorial blog blog yang saya kunjungi di networks ini.Dan memang banyak sekali blog yang mengupas tentang hal ini .Serta banyak pula website yang menyediakan kode kode HTML tombol like ini.Setelah saya uji coba berbagai macam tombol like dari berbagai tutorial yang ada di networks ini ada yang berfungsi ada pula yang tidak berfungsi.Tergantung dari bagaimana kita memasangnya dan Template yang kita pasang pada blog kita.

Dengan sedikit mendapatkan pengalaman ini saya akan beritahu anda cara memasang kode HTML tombol like ini secara benar dan tepat.Baiklah saya tidak akan panjang lebar lagiBercerita.Perhatikan baik baik kupasan saya ini Yah !

Hal pertama anda harus mendapatkan kode HTML nya,anda dapat mendapatkan di website "sharethis.com"
Dan langkah langkah nya adalah:

1.Anda browsing website "sharethis.com"
2.Langkah kedua anda harus daftar di "sharethis.com"
3.Setelah anda mendaftar,anda login ke "sharethis.com"
  dengan password yan di kirimkan ke email anda
4.Setelah anda berhasil login anda klik halaman "Get Sharing"
5.Pilih 'ikon Website' dengan mengkliknya lalu klik "Next"

6.Setelah itu anda Pilih tipe "tombol atau button" yang anda sukai
  Pilih di bagian sisi kiri ada tiga pilihan,pilih salah satu lalu klik "Next"
Catatan : di halaman ini di sisi kanan anda bisa juga memilih tampilan tombol Bars melayang di  sisi kiri atau kanan ,di bawah atau pun diatas blog atau web anda .

7.Setelah itu anda tinggal memilih tombol apa yang mau di pasang,disana  sudah tersedia tombol default dengan cara menggesernya dari kolom tengah [Sharing buttons] ke kolom kiri [Selected service] untuk membuang tombol yang tidak perlu anda cukup klik tanda X di selected service,anda bisa melihat secara langsung tampilannya

8.Setelah anda mantap dengan pilihan anda lalu anda klik "GETS THE CODE"

9.Setelah itu tunggu hingga keluar jendela baru yang berisi Kode
  Lalu anda kopi semua kode yang ada di jendela baru itu

 Kalu anda ingin mencobanya silahkan kopi kode Button dan Bars di bawah ini tanpa harus masuk ke web share this :

• Kode Button

 Kode Button pada kolom pertama :

<span class='st_plusone_hcount' displayText='Google +1'></span>
<span class='st_fblike_hcount' displayText='Facebook Like'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_sharethis_hcount' displayText='ShareThis'></span>

 Kode Button pada kolom kedua :

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "f35a1ac8-7687-422e-91c5-d0717c763613", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

• Kode Bars

 Kode Bars pada kolom pertama :

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Kode Bars pada kolom kedua :

 

<script type="text/javascript">stLight.options({publisher: "f35a1ac8-7687-422e-91c5-d0717c763613", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "f35a1ac8-7687-422e-91c5-d0717c763613", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

10.Dengan mengkopi semua kode dan menyimpannya dengan baik anda sudah selesai dapatkan kode .Tinggal anda paste kan ke HTML template anda.

Hal kedua anda harus mempaste kode itu di HTML tempalate Blog atau website.
Dan ini langkah langkahnya :
1.Langkah pertama anda harus masuk ke dasboard blog anda
  lalu pilih "template" [1] dan klik "edit template"[2]

2.Langkah kedua anda cari kode </head> lalu anda pastekan kode kedua yang anda tadi kopi sebelum atau di atas kode </head> untuk memudahkan tekan CTRL + F

 Catatan :

• Bila anda membuat kode Button yang di letakan diatas kode </head> adalah kode yang ada di kolom kedua 

• Bila anda membuat kode Bars yang diletakan di atas kode </head> adalah kode yang ada di kolom pertama .

3.langkah ketiga anda cari kode <data:post.body/>,Lalu pastekan   kode tombol pertama pada kolom pertama yang anda kopi sebelum atau di atas kode <data:post.body/>
  Catatan :

•   Bila tombol ingin di letakan di atas postingan anda letakan kode itu di atas   kode  <data:post.body/>,

• Bila ingin meletakanya di bawah postingan anda tinggal pasteka di bawah

  kode <data:post.body/>

• Bila banyak terdapat kode <data:post.body/> di template blog anda pastekan kode di <data:post.body/> yang terakhir atau bila ada dua kode itu tempatkan   <data:post.body/> yang kedua

•   Biasanya kode <data:post.body/> terletak sesudah kode

  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> 

  Catatan:

•   Anda juga bisa meletakannya atau mempastenya tepat pada kode <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->. Hingga kode ini tidak ada dan terganti dengan kode pertama yang kita kopi di share this.Posisi tombol akan muncul di atas postingan Blog anda . Untuk memudahkan pencarian kode tekan  Ctrl lalu tekan F.Bila anda memakai linux arahkan kursor ke ruangan kosong edit HTML dan klik baru tekan Ctrl lalu tekan F 
• Untuk menempatkan kode Bars ,anda cari kode </body> ,letakan kode bars yang anda kopi sebelum atau di atas kode </body> ,kode yang di letakan adalah kode yang ada pada kolom kedua.

4.Langkah ke empat anda klik "save template" tunggu hingga kode tersimpan dengan benar baru lihat tampilannya di blog anda seperti gambar di bawah ini

5.Selesai selamat beraksi dan semoga bermanfaat, bila ada yang kurang mengerti silahkan tulis komentar anda !terima kasih.

Share this

eris risno