Cara Membuat Widget Follower (Google Friend Connect) Valid HTML5

Cara Membuat Widget Follower (Google Friend Connect) Valid HTML5; Google Friends Connect atau biasa disebut dengan Widget Follower yang merupakan salah satu fasilitas dari Blogger untuk memanjakan para Blogger karena link blog kita akan muncul di dalam Dasboard Blogger pengikut atau follower blog kita.
Pada dasarnya widget Google Friends Connect ini belum valid HTML5 karena tampilan tersebut akan muncul otomatis saat kita membuatnya dan kita sulit untuk merubah kodenya supaya valid HTML5 di dalam template blog, akan tetapi kita bisa mengakalinya supaya valid HTML5 selain itu kita juga bisa merubah tampilannya seperti: warna, border dan lainnya.
Jika Anda ingin membuatnya berikut langkah yang bisa saya berikan dan bisa Anda ikuti:

1. Tambahkan Widget Follower ini kedalam blog Anda akan tetapi jika sudah ada lewati saja langkah ini.
Karena Widget Follower ini sudah dihilangkan dari menu Tata Letak => Add Gadget, jadi untuk Anda yang blognya belum ada widget follower ini bisa menambahkan widget ini melalui cara yang sudah saya tulis disini.

2. Untuk membuat Widget Follower ini Valid HTML5 sebelumnya Anda harus tahu kode Id dan Site dari widget milik Anda, cara mengetahuinya yaitu

Buka blog Anda dan lihat Page Source

Selanjutnya cari kode seperti dibawah ini

google.friendconnect.container.renderMembersGadget(
 { id: 'div-4qmlh3xoedtu',
   site: '15798607466213540774'}

3. Pada menu Tata Letak pilih Add Gadget dan pilih Html/Javascript selanjutnya copy code di bawah ini dan paste pada kotak Html/Javascript yang baru saja Anda buat

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-4qmlh3xoedtu" style="width:225px;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = '260';
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-4qmlh3xoedtu',
   site: '15798607466213540774'},
  skin);
</script>

Ganti yang saya cetak dengan warna merah dengan id dan site milik Anda sendiri yang diambil pada langkah nomor 2 diatas dan klik simpan jika sudah selesai

4. Langkah selanjutnya hapus widget follower bawaan blogger yang pertama kali Anda buat pada langkah nomor 1.

5. Masuk pada menu Template pilih Edit Template dan code <b:include name='quickedit'/> pada widget follower tadi selanjutnya Hapus code tersebut dan simpan template Anda.

Sampai disini Widget Follower (Google Friend Connect) Sudah Valid HTML5 dan untuk merubah tampilan dari widget tersebut Anda bisa merubah kode yang ada pada langkah nomor 3 di atas dan kode yang bisa anda ubah adalah sebagai berikut:

skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#000000';
skin['ENDCAP_LINK_COLOR'] = '#000000';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#000000';
skin['CONTENT_TEXT_COLOR'] = '#000000';
skin['CONTENT_HEADLINE_COLOR'] = '#000000';

Sesuikan dengan keinginan Anda sendiri

Sekian sharing dari saya dan selamat mencoba

Tweet