Modifikasi Tampilan Widget Followers Blog (GFC)

Modifikasi Tampilan Widget Followers GFC - sebelumnya udah posting, Cara Membuat Tombol Twitter, Google+, dan Facebook Like, Valid HTML5, kali ini saya akan memposting artikel terselubung HTML5 lagi, yaitu Modifikasi Tampilan Widget Followers Blog (GFC), biar sealur gan :). nah bagi sobat yg bosan dengan tampilan widget followers bawaan blogger, dibawah ini ada HTML yg saya dapat dari Kangismet untuk memodifikasi tampilan widget followers blog sobat, bisa disesuaikan sendiri dari warnanya, border, ukuran avatar, dll. menarik bukan ?

blog ini juga sudah saya edit widget followersnya, yg sebelumnya :

menjadi seperti ini :

Modifikasi Tampilan Widget Followers Blog (GFC) :

1. Buka Blogger

2. Pergi ke Tata Letak -> Tambahkan widget Followers (lewati langkah ini kalau sudah ada)

Untuk menambahkannya klik Tata Letak -> Tambahkan Gadget -> Gadget Lainnya -> Pengikut

3. Buka blog sobat.

Klik liat sumber laman / view page source (dgn cara klik kanan)

4. Cari kata kunci renderMembersGadget dan lihat kode dibawahnya.

Perhatikan pada kode id dan site. seperti pada gambar di bawah ini:

5. Pergi ke Tata Letak -> 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-4769418095313647753" 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-4769418095313647753',
   site: '17038536110807365684'},
  skin);
</script>

6. Tugas sobat adalah mengganti 2 kode ID dan 1 site, dengan kode yang didapat dari page source (Langkah 3).

7. Hapus widget Followers bawaan Blogger (lihat langkah 1)

8. Hapus kode <b:include name='quickedit'/> supaya valid HTML5. Abaikan jika sobat males ber-valid2 

Sampai di sini, sobat sudah membuat tampilan yang berbeda dari biasanya dan widget sudah valid HTML 5.

Modifikasi Tampilan Widget Followers

Untuk memodifikasi sesuai keinginan soobat, buka kembali widget yang tadi dibuat (Langkah 5), edit warna dan pengaturannya. Untuk memudahkan editing lihat panduan gambar dan keterangannya :

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