Modifikasi Widget Follower menjadi Valid HTML5

Modifikasi Widget Follower menjadi Valid HTML5

Modifikasi Widget Follower menjadi Valid  HTML5 - Dalam pemasangan widget follower kita terhubung dengan teman-teman kita yang sudah ikut bergabung tapi jika anda yang menyukai valid HTML5 pemasangan follower ini akan menambah error validasi pada template anda. Jika anda ingin membuat widget follower ini agar valid HTML5 silahkan sedikit modifikasi.

Berikut langkah-langkahnya, pertama masuk ke dashboard blogger anda dan masuk ke tata letak atau layout
1. Tambahkan widget Follower dengan cara Tambah gadget > Gadget lainnya (more gadgets) > pengikut,biasanya berapa pada halaman pertama dan letakknya di paling bawah, abaikan cara ini jika anda sudah memasangnya.
2. Buka halaman blog , klik kanan pada halaman blog anda dan pilih "Inspect Elemen" atau tekan CTRL+U
3. pada sourcecode silahkan cari kata renderMembersGadget,tekan ctrl+f agar memudahkan dalam pencarian.Lihat gamar berikut:

gambar dari blog.rismawan.com

Pada gambar diatas yang di kasih kotak warna kuning dan merah silahkan anda simpan id dan site di notepad. sekarang anda sudah mengetahui id dan site blog anda,pada tahap ini anda bisa menghapus widget follower tersebut dan ganti dengan widget yang baru.
4. Sekarang pergi ke tata letak lagi dan tambahkan gadgets > tambahkan HTML/Javascript > Masukkan kode berikut pada kotak "Content"

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="div-q8v3x4yh588r" style="width:auto;border:1px solid #c0392b;"></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['BORDER_COLOR'] = '#e74c3c';
skin['ENDCAP_BG_COLOR'] = '#c0392b';
skin['ENDCAP_TEXT_COLOR'] = '#fff';
skin['ENDCAP_LINK_COLOR'] = '#c0392b';
skin['CONTENT_BG_COLOR'] = '#95a5a6';
skin['CONTENT_LINK_COLOR'] = '#0027cf';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_HEADLINE_COLOR'] = '#007b03';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-q8v3x4yh588r',
   site: '00647019856377971921'},
  skin);
</script>

Lihat pada kode yang saya kasih garis bawah silahkan ganti id dan site dengan kode yang sudah anda simpan sebelumnya di notepad atau dimana anda meletakkannya.

Pada tampilan diatas anda bisa memodifikasi warna dan dan ukurannya. lihat gambar berikut

Keterangan:
1. ENDCAP_LINK_COLOR
2. ENDCAP_BG_COLOR
3. BORDER_COLOR
4. ENDCAP_TEXT_COLOR
5. CONTENT_HEADLINE_COLOR
6. CONTENT_BG_COLOR
7. FACE_SIZE (ukuran avatar)
8. Garis pada bagian kanan silahkan ganti kode #c0392b
9. CONTENT_LINK_COLOR (warna link)
10.CONTENT_TEXT_COLOR

Pada Kode skin['NUMBER_ROWS'] = '5'; yaitu berapa jumlah baris yang akan ditampilkan angka 5 sesuai keinginan.
Setelah tadi penambahan widget pada template silahkan hapus kode <b:include name='quickedit'/>

Begitulah Cara Modifikasi Widget Follower menjadi Valid  HTML5 . Semoga bermanfaat