Saturday, 6 April 2013

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

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 




tombol follow on Twitter Jona Rendra

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.

KATEGORI:
arrow_back
arrow_forward

27 komentar

SIPP,,,lumayan buat meringkas .widget jd kelihatan lebih ringkas

iya, itulah kegunaanya
makasih ya udah berkomentar

Mantap gan tutorialnya,. ijin nyimak aja gan dan salam kenal aja dari CODING NGEBLOG jangan lupa kunjungi balik gan.

Nah ini diat mas tutorial yg ane cari dari kemaren :)

Izin menerapkan mas ke blog saya :)

owh begitu ya
makasih atas kunjungannya

This comment has been removed by a blog administrator.
This comment has been removed by a blog administrator.

hasilnya bagus banget sob, mau nanya tapi, kalo foto yang nge-like ga usah ditampilin, gimana tuan besar,, ngilangin fotonya,, makasih :)

iya, hasilnya memang bagus
kalo pingin gak ditampilin, ganti kode true menjadi false di kode data-show-faces="true">

wah mantep banget ne, thanks deh

ok, makasi juga dah komentar

sangar gan... sudah ane apakai http://inbox-me.blogspot.com

haha, :-)
makasih atas kunjungannya

Makasi mas tutorialnya, bermanfaat!

sama sama
makasih ya sudah berkomentar

thanks broo infonya,, visit back my blog

wah keren widgetnya udah terpasang di blogq gan.. makasie yah.. :D

Makasih banyak gan sangat bermamfaat...namun apabila agan berkenan silahkan mampir juga ke blog saya.

http://blog-medianet.blogspot.com/

Makasi bro tutorialnya, bermanfaat!

wah keren widgetnya udah terpasang di blogq gan.. makasie yah.. :D

Thanks gan, untuk pencerahan :D

Berkomentarlah dengan baik dan benar, dilarang SPAM!
Tata Tertib Berkomentar
EmoticonEmoticon