Cara Membuat Widget Tombol Like, Follow dan G+ Di Blog

By Jhonarendra 06 Apr, 2013 25 comments

Cara Membuat Widget Tombol Like, Follow dan G+ Di Blog. Kembali lagi saya hadir dengan postingan terbaru saya yang berlabel Mengedit Blog setelah postingan saya yang lain seperti Cara Membuat Komentar Bertingkat atau Threaded Comment telah saya publikasikan.

Kembali pada topik pembahasan, maksud dari widget tombol like, follow dan g+ ini adalah tombol tombol social media yang tampilannya menjadi satu. Ini tidak menggunakan kode script yang panjang. Tapi saya menggunakan trik saya sendiri untuk mengaturnya. Kurang lebih, tampilan widget tombol social media di blog anda akan seperti gambar dibawah ini

Cara Membuat Widget Tombol Like, Follow dan G+ Di Blog - Jona Rendra

Tanpa berlama lama lagi, langsung saja saya berikan tutorialnya. Simak saja baca bacaan berikut dibawah.

Cara Membuat Widget Tombol Like, Follow dan G+ Di Blog

Tutorial ini saya bagi menjadi 4 Tahapan. Tahapan tahapan tersebut ialah :

1. Membuat Tombol Like Facebook

2. Membuat Tombol Follow On Twitter

3. Memasang Tombol G+ atau Google Plus

4. Merangkai Widget Menjadi Satu

Saya akan mulai dengan yang pertama

1. Membuat Tombol Like Facebook

Pertama, login ke akun blogger anda

Kedua, pada dashboard, pilih blog anda lalu masuk ke menu Template

Ketiga, klik Edit HTML

Keempat, copy CSS berikut dibawah kode <body>

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/id_ID/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Kelima, klik Simpan Template

Keenam, masuk ke Tata Letak lalu Tambah Gadget

Ketujuh, muncul jendela tambah gadget, cari lalu pilih gadget yang bernama HTML/Javascript

Kedelapan, copy kode script dibawah ini lalu paste di kolom konten

<div class="fb-like" data-href="https://www.facebook.com/JonaRendra" data-send="false" data-width="450" data-show-faces="true"></div>

Keterangan :

Ganti kode yang berwarna merah dengan URL facebook page anda

Terakhir, klik Simpan

2. Membuat Tombol Follow On Twitter

Pertama, masuk ke link ini

Kedua, pilih tampilan tombol yang anda inginkan lalu klik tombol yang seperti

Ketiga, isi form nya lalu copy kode HTML yang sudah muncul

Copy kode HTML yang telah muncul - Jona Rendra

Keempat, pada halaman blogger > Tata Letak, tambah gadget di kolom yang dekat dengan widget tombol like facebook tadi

Kelima, cari lalu pilih HTML/Javascript di jendela Tambah Gadget

Terakhir, pastekan kode HTML tadi ke kolom konten setelah itu klik simpan

3. Memasang Tombol G+ atau Google Plus

Pertama, di blogger anda tepatnya di menu Tata Letak, Klik Tambah Gadget di dekat widget sebelumnya (sidebar)
Kedua, setelah muncul jendela Tambah Gadget, cari lalu pilih gadget yang bernama Tombol +1. Letaknya paling atas
Ketiga, atur sesuai keinginan anda bentuk, gaya dan ukuran tombol
Terakhir, klik Simpan

4. Merangkai Widget Menjadi Satu

Sekarang kita telah masuk tahap akhir, yaitu merangkai widget widget tadi agar terlihat menjadi satu seperti pada tampilan punya saya

WIdget terlihat pada 1 tempat - Jona Rendra

Pertama, di menu Tata Letak, setelah semua widget telah tersimpan, buat dan atur hingga menjadi seperti gambar dibawah

Urutkan Widget Menjadi Seperti Ini Jona Rendra

Keterangan :

Nomer 1. adalah widget tombol like facebook

Nomer 2. adalah widget tombol follow on twitter

Nomer 3. adalah widet tombol G+

Terakhir, klik Simpan Setelan dan lihat blog anda sekarang. Telah muncul widget tombol social media yang ringan.

Itulah keseluruhan artikel saya kali ini yang berlabel Mengedit Blog dan berjudul Cara Membuat Widget Tombol Like, Follow dan G+ Di Blog. Semoga bermanfaat untuk anda yang ingin memasang widget social media yang ringan. Jika ada masalah saat penerapan tutorial diatas, silahkan poskan komentar dengan memberikan pertanyaan mengenai masalah anda.

Putu Jhonarendra

Cara Membuat Widget Tombol Like, Follow dan G+ Di Blog

25 comments for "Cara Membuat Widget Tombol Like, Follow dan G+ Di Blog"

Post a Comment