Cara Modifikasi Widget Followers agar blog Valid HTML5

ScreenShoot Widget Followers Valid HTML5

Modifikasi Tampilan Widget Followers - Perlu diketahui, tidak semua widget bawaan blogger Valid HTML5. Salah satunya seperti widget pengikut/followes. Padahal, Google Friend Connect (GFC) dapat dikatakan cukup penting untuk sebuah blog.

Kenapa? Karena widget follower GFC tersebut akan memberi keuntungan terhadap eksistensi blog dimata pengikut. Seperti diantaranya adalah; widget tersebut membuka kesempatan visitor blog untuk mendapat update konten dari link artikel sebuah blog dimana akan muncul pada dashboard followers. 

Yang menjadi persoalan, yaitu tadi, ternyata tampilan widget ini tidak sesuai dengan apa yang kita inginkan. Dimana menimbulkan potensi tidak valid HTML5.

Akan tetapi, tidak usah terlalu galau he.. he... ada sebuah tips yang saya dapat dari blog Kang Ismet yang saya follow. Dan ternyata cukup mendongkrak SEO Score blog saya.

Yakni dengan cara memodifikasi widget pengikut tersebut;

Dengan melakukan hal ini, bukan saja merubah tampilan widget followers, tapi juga akan membuat blog valid HTML5. Syaratnya, setelah semua langkah selesai, hapus kode <b:include name='quickedit'/>  (kata Kang Ismet)

Berikut langkahnya;

Langkah 1 : Tambahkan widget Followers (lewati langkah ini kalau sudah ada)
Untuk menambahkannya klik Tata Letak -> Tambahkan Gadget -> Gadget Lainnya -> Pengikut

Langkah 2 : Buka blog sobat.
Klik liat sumber laman / view page source

Langkah 3 : Cari kata kunci renderMembersGadget dan lihat kode dibawahnya.
Perhatikan pada kode id dan site. seperti pada gambar di bawah ini:

Langkah 4 : Buat widget baru HTML/JavaScript, simpan kode ini :

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-1eeptyhabj29d" style="width:300px;border:1px solid #ff4800;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '42';
skin['BORDER_COLOR'] = '#000';
skin['ENDCAP_BG_COLOR'] = '#ff0000';
skin['ENDCAP_TEXT_COLOR'] = '#fff';
skin['ENDCAP_LINK_COLOR'] = '#f0ff00';
skin['CONTENT_BG_COLOR'] = '#ddd';
skin['CONTENT_LINK_COLOR'] = '#0027cf';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#007b03';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-1eeptyhabj29d',
   site: '15366676404964691289'},
  skin);
</script>

Ganti 2 kode ID dan 1 site, dengan kode yang didapat dari page source (Langkah 3).

Langkah 5 : Hapus widget Followers bawaan Blogger (lihat Langkah 1)

Langkah 6 : Hapus kode <b:include name='quickedit'/> supaya valid HTML5 .

Modifikasi Tampilan Widget Followers

Setelah selesai membuat widget follower Valid HTML5, maka untuk menyesuaikan tampilan widget tersebut pada blog dapat dilakukan modifikasi sesuai keinginan.

Caranya, buka kembali widget yang tadi dibuat (Langkah 4), lalu edit warna dan pengaturannya. Untuk memudahkan editing lihat panduan gambar (screenshoot tersebut saya ambil dari blog Kang Ismet soalnya milik saya latar belakangnya hitam) dan keterangannya :

Screenshoot widget followers

 Keterangan :

1. ENDCAP_LINK_COLOR
2. ENDCAP_BG_COLOR (Background atas / contoh gambar warna merah)
3. ENDCAP_TEXT_COLOR (tulisan : With Google Friend Connect)
4. BORDER_COLOR (garis dibawah blok merah)
5. CONTENT_HEADLINE_COLOR (Tulisan Member 530)
6. CONTENT_LINK_COLOR (tulisan More dan Sign in)
7. Garis pinggir, ganti kode warna #ff4800
8. FACE_SIZE (ukuran avatar)
9. CONTENT_BG_COLOR (background bawah)
10. CONTENT_TEXT_COLOR (tulisan Already a member?)

Kode skin['NUMBER_ROWS'] = '4'; adalah berapa baris avatar ditampilkan. Ganti angka 4 sesuai keinginan. Sesuaikan juga lebar widget dengan mengganti kode 300px.

Demikian langkah sederhana dalam menyempurnakan blog agar Valid HTML5 dengan cara Modifikasi Widget Followers. Semoga bermanfaat..