Cara membuat Widget Follower Blog Valid HTML5

Redi

Seo

Sabtu, 19 Oktober 2013

Belum ada komentar

Cara membuat Widget Follower Blog Valid HTML5 - setelah lama kagak update postingan karena kemaren lagi UTS . sekarang di pagi hari minggu yang cerah ini ane mau update tentang bagaimana memodifikasi widget followers blog supaya valid html5 ..karena bahwa kita ketahui bahwasanya widget asli sangkeng blog itu tidak valid html5 terbukti salah satunya widget follower ini - dimana widget ini ada error nya sekawan ( 4 ) nah bagi yang newbie ( kayak ane ) pasti belum tau nih gimana apa sih itu widget folllower ..? tuk jelasnya liat aja gambar neng ngisor iki .

Nah gimana gan , selain valid nantinya agan bisa memodofikasinya sesuai selera agan . tuk lebih jelasnya simak dulu . Tutorial Cara membuat Widget Follower Blog Valid HTML5 di bawah ini :

1. Buat Widget Follower terlebih dahulu gan ..
( klik Tata Letak -> Tambahkan Gadget -> Gadget Lainnya -> Pengikut )
tapi jika agan sudah membuat widget ini , so lewati aja deh langkah pertama iki .

2. Buka blog sobat ..  Misalkan blog ane ahmadsuyadi.blogspot.com - maka buka ahamdsuyadi.blogspot.com di google . maka akan muncul gambar di bawah ini :

Setelah itu KLik CTRL+U ( secara bersamaan )

3. Setelah itu sobat temukan kode id dan site nya caranya ketika di halaman ctrl+U tadi sobat cari kode enderMembersGadget ( tekan CTRL+F ) untuk mempermudah pencarian .

Kemudian sobat cata kode id ( id: 'div-oxhjg34hhjwc' )  :  dan sitenya ( site: '05308059167164063106' ) di notepad

4. Kemudian sobat hapus widget followers tadi . kemudian buat widget baru (  klik Tata Letak -> Tambahkan Gadget -> HTML/JavaSripct )

kemudian pastekan kode dibawah ini tepat di dalam kolom html/javascrpt tersebut :<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<div id: "div-oxhjg34hhjwc"  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-oxhjg34hhjwc' ,

   site: '05308059167164063106' },

  skin);

</script>

5. Kemudian sobat ganti kode id dan site diatas dengan kode yang telah anda simpan tadi .

Kemudian klik save dan liat hasilnya .

Keterangan untyk memodifikasi widget followers di atas :

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?)

Seseuiakan kode diatas sesuai template panjenengan , dan sesuai selera kamu . Mungkin cukup sekian dari saya Cara membuat Widget Follower Blog Valid HTML5 . mudah-mudahan bermanfaat , maaf kalau bahasane campur aduk .... wkwkwkw..

**SELAMAT MENCOBA**