Membuat Widget Followers Valid Html5

Membuat Widget Followers Valid Html5 tentunya sangat di anjuarkan untuk menjaga validasi blog kita, selain itu dengan menambahkan widget followers GFC (Google Friend Connect) ini kita sama-sama menguntungkan antara yang punya blog dan yang jadi pelanggan atau pengikut blog. Keuntungannya adalah setiap kita membuat postingan baru maka akan secara otomatis muncul di setiap halaman dashboard blog mereka dan bagi mereka yang mengikuti blog kita juga mendapatkan keuntungan yaitu bisa mendapatkan ilmu baru dan teruptodate tentunya karena biasanya mereka berlomba-lomba merebutkan posisi pertama dalam berkomentar, hahaa...

Namun perlu di garis bawahi, tidak hanya mengikuti langkah-langkah disini widget followers sobat sudah valid html5, tentunya belum dong. Karena sobat harus menghapus kode <b:include name='quickedit'/>, mencarinya di dalam edit html template sobat, biar cepet gunakan Ctrl+F atau F3. Namun ada juga blog yang tidak tersedia widget followers blognya, jadi harus bagaimana ? Baca artikel saya yang berjudul "Widget Pengikut Atau Followers Blog Tidak Ada ? Ini Solusinya !".

Baiklah langsung saja ke cara pembuatan atau modifikasi widget followers Valid Html5;

Langkah 1. Tambahkan widget pengikut GFC tersebut caranya klik Tata Letak >>> Add Gadget >>> Gadget Lainnya >>> Pengikut.

Langkah 2. Buka blog sobat klik kanan terus klik Lihat Sumber Laman atau View Page Source

Langkah 3. Gunakan F3 lalu pastekan tulisan ini "renderMembersGadget", lihat gambar.

Langkah 4. Sobat buat widget followers baru secara manual melalui Html/javascript. Caranya copy kode berikut di Html/javascript tersebut.

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-4724892674912649425" style="width:160px;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-4724892674912649425',
site: '08076711013844680272'},
skin);
</script>

Ganti kode berwarna merah dengan kode id sobat yang di cari tadi, sedangkan yang biru ganti dengan kode site blog sobat.

Langkah 5. Untuk memaksimalkan valdasinya hapus widget bawaan bloogernya (Langkah 1) dan juga hapus kode <b:include name='quickedit'/>, itu bertujuan untuk menghilangkan gambar obeng di blog biar benar-benar valid html5.

Seelamat widget tersebut sukses di validasikan di blog sobat. Untuk memodifikasi warnanya lihat keterangan berikut.

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. Jika widget di tarus di sidebar berukuran 160 maka tinggal ganti saja angka 300 dengan 160.

Demikianlah Cara Membuat Widget Followers Valid Html5 source blog kang ismet. Jika ada pertanyaan silahkan berkomentar.