Laman

Kamis, 18 April 2013

Tombol Link Like Pada Blog

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 Tutorial 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


Tombol+social+media+1+tempat

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
Kode script dan HTML diatas, saya dapat dari sini
2. Membuat Tombol Follow On Twitter
Pertama, masuk ke link ini
Kedua, pilih tampilan tombol yang anda inginkan lalu klik tombol yang seperti 




tombol+twitter+Jona+Rendra
Ketiga, isi form nya lalu copy kode HTML yang sudah muncul
Follow+@JonaRendr
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



Tombol+social+media+1+tempat
Pertama, di menu Tata Letak, setelah semua widget telah tersimpan, buat dan atur hingga menjadi seperti gambar dibawah
Jona+Rendra+Blog+Tutorial
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 Tutorial 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.


Tidak ada komentar:

Posting Komentar

X-Steel - Wait