Sobat blogger tahu kan widget Google Friend Connect? Itu adalah widget bawaan blogger yang memungkinkan pengguna blogger untuk saling terhubung satu dengan yang lain. Istilah yang digunakan untuk blogger yang sudah berteman dengan blog kita adalah followers. Sebelumnya apa kalian sudah menjadi followers blog ini? Kalau mau silahkan klik menu FOLLOW yang ada di navigasi bagian atas yaa. 🙂

Terkadang kalau cuman menampilkan link biasa seperti itu saja memang kurang menarik juga. Gimana pun juga orang-orang kan lebih tertarik liat yang ada gambarnya (visual). Apalagi widget google friend connect ini pun bisa juga sekaligus menampilkan gambar blogger-blogger yang sudah follow blog kita. Bisa jadi ini akan menjadi daya tarik tersendiri bagi beberapa pengunjung.

Yang punya followers banyak pasti makin seneng. Dan bangga bisa munculin widget ini di blog-nya. Yang masih punya followers sedikit? Heheh.. Saya juga masih sedikit. Makanya kalian follow donk blog saya. Okay? ^_^

Iframe Google Friend Connect Memperlambat Loading

Nah, kabar buruknya adalah bahwa widget ini masih menggunakan iframe. Yang seperti kita ketahui kalau iframe sebenarnya agak kurang bagus untuk diterapkan pada sebuah blog. Kecuali kalau kita memang ingin menampilkan video untuk bahan ilustrasi sebuah artikel. Itu sih iyaa gak papa lah. Sesekali.

Tapi kalau iframe widget ini kan biasanya diletakkan di bagian sidebar. Jadinya dia pasti akan selalu muncul di setiap artikel mana pun. Kalau kebanyakan memasang iframe malah bisa-bisa membuat blog kita jadi terasa berat alias lemot saat dibuka pengunjung.

Mungkin saja gak semua iframe ukurannya sama. Pasti berbeda-beda. Ada yang size-nya besar jadinya berat. Bisa jadi ada yang ringan. Cuman iyaa perlu dipertimbangkan lah. Apakah memang ada hasilnya jika bagian itu dipasang? 😀

Memasang Widget Followers Blogger

Bagi kalian yang tertarik untuk memasang widget followers blogger ini, caranya sangat gampang. Mungkin masih ada sahabat blogger yang belum pernah pasang, jadi disini akan saya beritahu.

Kalian tinggal masuk ke menu Tata Letak kemudian klik tambahkan gadget. Setelah muncul jendela baru, pilih gadget lainnya. Diposisi pertama akan terlihat widget pengikut atau followers. Klik untuk menambahkan widget tersebut.

Berikutnya kalian bisa melakukan penyesuaian sedikit untuk tampilannya. Kalau gak mau repot centang saja pilihan gunakan style template default.

memasang-tombol-join-this-site-widget-followers-blogger

Selesai. Sekarang kalian sudah berhasil memasang widget followers blogger. 🙂

Memasang Tombol Join This Site Tanpa Iframe

Khusus bagi yang tidak ingin memasang widget iframe, kalian tetap bisa menampilkan fitur google friend connect dari blogger ini. Hanya saja kita tidak akan menampilkan foto-foto dari para followers yang ada. Kita hanya akan menampilkan tombol Join this site nya saja. Saya rasa inti dari widget ini kan untuk bisa membangun list member blog kita. Bukan untuk menunjukkan seberapa banyak yang sudah jadi member. 😀

Cara untuk memasangnya juga sangat mudah. Hampir sama seperti tadi, cuman lagi pada pilihan tambahkan gadget pilih widget HTML/Javascript. Kemudian copy paste kan kode HTML di bawah ini pada kotak widget tersebut. Kalian bisa juga menyisipkannya di dalam widget HTML yang sudah ada. Atau mau diletakkan di dalam postingan juga bisa. Terserah bebas.

Tombol Join This Site Dengan Gambar

Join this site

Kode HTML :

<a href="http://www.Blogger.com/follow-blog.g?blogID=7982084239055211172" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;" style="text-align:center;font-weight:bold;text-decoration:none;" title="Join This Site">
<img alt="Join this site" src="http://3.bp.blogspot.com/-HvsdXbfdcOU/UL3fgeB57iI/AAAAAAAAA78/rN8jRT9eE1s/s1600/Follower.png" style="vertical-align:center;border:0px;cursor:pointer;"/>
</a>

Tombol Join This Site Asli Bawaan Blogspot


Join this site

Kode HTML & CSS :

<div class="fc-button">
<a href='http://www.blogger.com/follow-blog.g?blogID=7982084239055211172' onclick='window.open(this.href, &apos;dmfollow&apos;, &apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);return false;'>
<table class="gfc-button-base-v2 gfc-button" cellpadding="0" cellspacing="0"><tbody class=""><tr class=""><td class="gfc-button-base-v2 gfc-button-1"></td><td class="gfc-button-base-v2 gfc-button-2">Join this site</td><td class="gfc-button-base-v2 gfc-button-3"></td></tr></tbody></table></a><div class="gfc-footer-msg">with Google Friend Connect</div></div>
<style type='text/css'>
.fc-button {font-size: 15px;text-align:center;} .fc-button a {text-align:center;font-weight:bold;text-decoration:none;} .fc-button table.gfc-button {border: none;cursor: pointer;width: auto;margin: 0 auto;padding: 0;height: 21px;line-height: 21px;} .fc-button .gfc-button-base-v2 {height: 21px;line-height: 21px;margin: 0;padding: 0;color: #fff;white-space: no-wrap;border-spacing: 0;font: normal 13px Arial,sans-serif;} .fc-button table.gfc-button td, .fc-button table.gfc-button tr, .fc-button table.gfc-button tbody {text-align: left;vertical-align: top;border: none;margin: 0;border-spacing: 0;height: 21px;white-space: nowrap;line-height: 21px;} .fc-button td.gfc-button-1 {width: 22px;padding: 0;background: transparent url('https://www.google.com/friendconnect/scs/images/gfc_button_v2.gif') no-repeat 0 0;} .fc-button td.gfc-button-2 {background: transparent url('https://www.google.com/friendconnect/scs/images/gfc_button_v2.gif') repeat-x 0 -22px;padding: 0 7px;font-weight: bold;text-shadow: rgba(0,0,0,0.3) 0 1px 1px;} .fc-button td.gfc-button-3 {width: 2px;padding: 0;background: transparent url('https://www.google.com/friendconnect/scs/images/gfc_button_v2.gif') no-repeat 0 -44px;} .fc-button .gfc-footer-msg {padding-left: 2px;margin-top: 1px;line-height: 11px;font-size: 11px;font-style: normal;font-weight: normal;font-family: sans-serif;margin-bottom: 10px;}
</style>

Tombol Join This Site Modifikasi Chaidir.Web.ID

with Google Friend Connect

Kode HTML & CSS :

<div class="blog-follow">
<a href="http://www.blogger.com/follow-blog.g?blogID=7982084239055211172" onclick="window.open(this.href, 'dmfollow', 'toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521');return false;">
<span class="badan-follow"><span class='icon-follow'></span>
<span class='tombol-follow'>Join this site</span></span></a>
<div class="kaki-follow">with Google Friend Connect</div></div>
<style type='text/css'>
.blog-follow {font-size: 15px;text-align:center;}
.blog-follow a {text-align:center;font-weight:bold;text-decoration:none;}
.blog-follow .badan-follow {width: 118px;height: 21px;background: #008BC8;color: #fff;font-size: 13px;font-weight: bold;font-family: Arial, sans-serif;display:block;cursor: pointer;border-radius: 2px;margin: 0 auto;padding: 0;text-align: center;vertical-align: top;white-space: nowrap;}
.blog-follow .badan-follow:hover {background: #888;}
.blog-follow .icon-follow {width: 21px;height: 21px;padding: 0;float: left;background: url(http://4.bp.blogspot.com/-hnS-NegrZoM/VCFDR-byPPI/AAAAAAAAFpE/twdpbM7IpMI/s1600/join_this_site.gif) no-repeat 1px 1px;}
.blog-follow .tombol-follow {width: 97px;height: 21px;line-height: 21px;float: right;text-shadow: rgba(0,0,0,0.3) 0 1px 1px;}
.blog-follow .kaki-follow {padding-left: 2px;margin-top: 1px;line-height: 11px;font-size: 11px;font-style: normal;font-weight: normal;font-family: sans-serif;margin-bottom: 10px;}
</style>
*****

Catatan:
Sebelum menyimpan kode HTML di atas, pastikan kalian merubah bagian ini terlebih dahulu :
http://www.blogger.com/follow-blog.g?blogID=7982084239055211172
Gunakan Blog ID kalian masing-masing. Cara mengetahuinya ketika nanti kalian login di dashboard blogger, lihat alamat link yang ada di addresbar. Disitu pasti ada nomor ID kalian berapa. Cukup ganti nomornya saja.

Keunggulan Tombol Join This Site Chaidir.Web.ID

Apa perbedaan antara ketiga macam kode HTML di atas? Walaupun hasilnya terlihat sama. Tapi stuktur coding HTML dan pengaturan CSS-nya jelas berbeda.

Untuk yang pertama tombol tersebut berasal dari gambar utuh dengan ukuran 118×21 piksel. Bisa dibilang ukurannya masih besar. Sedang tujuan kita disini kan pengen punya tombol followers yang ringan. Kekurangannya lagi, kita tidak bisa merubah teks Join this site pada tombol tersebut. Apalagi backgroundnya. Jadinya iyaa statis saja.

Untuk yang versi asli bawaan blogger, menggunakan teknik table tiga kolom yang masing-masing kolom diberikan background gambar. Gambarnya cuman satu sebenarnya. Modalnya adalah gambar ini :

join-this-site-blogger

Untuk yang versi saya, menggunakan teknik elemen span. Untuk menciptakan sebuah tombol dengan logo Google saya menggunakan dua buah span yang formatnya saya ubah jadi inline-block. Disini modal gambar yang saya pakai lebih kecil dibanding dua cara sebelumnya.

join-this-site

Saya hanya butuh logo Google seperti gambar diatas itu. Selebihnya hanya menggunakan teknik background CSS sederhana. Nah, jadi disinilah letak kelebihan tombol versi punya saya. Nantinya sahabat blogger bisa menukar warna background-nya sesuka hati. Bisa disesuaikan dengan warna template blog masing-masing. Tidak harus biru seperti aslinya.

Untuk cara kedua dan ketiga, sahabat juga bisa merubah teks dari tombol ini. Kalau cara pertama iyaa gak bisa, kan udah langsung gambar semua.

*****

Sekian tutorial sederhana hari ini. Semoga bisa bermanfaat buat sahabat blogger semuanya. Jika kalian punya masukan atau ada masalah saat memasang tombol Join This Site ini silahkan hubungi saya. Atau tinggalkan saja pesan di kotak komentar.