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:
friends connect
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
join this site
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

32 Responses to Modifikasi Widget Follower menjadi Valid HTML5

  1. Replies
    1. ini tutoriaal lama, cuma baru di publish dan di edit lagi :D

      Delete
  2. makasih gan tutorialnya :D
    jadi sekarang widget followers ane makin keren (y)

    ReplyDelete
    Replies
    1. selamat mas dafa,hehe =D makasih kembali

      Delete
  3. Wah keren nih mas, ane mau coba jadinya :)

    ReplyDelete
    Replies
    1. silahkan dicoba mas farhat eh Farhan :D

      Delete
  4. Bisa buat menarik visitor nih kalau widgetnya keren :D

    ReplyDelete
    Replies
    1. iya sis hehe apalagi sis dian yang pandai dalam hal pewarnaan :D atau design

      Delete
  5. Huaaa.. Uda mulai tingkat malaikat ini tutornya.. Wkwkwk.. :D

    ReplyDelete
    Replies
    1. hihi :p masih newbie kok beb.. masih belajar buat tutorial :)

      Delete
  6. pakai source untuk melihat kodenya ya mas..

    ReplyDelete
  7. yaah.. post'nya udah di duluin. ntar ane di kira clone. terpaksa nih di remove.

    nice post dehh gan. kalem aja, lanjut terus :)

    ReplyDelete
    Replies
    1. ngapain di hapus :) asal pakai kata-kata sendiri tidak masalah mas, happy posting

      Delete
  8. kren bang.. :D
    knjungan balik yah..

    ReplyDelete
  9. Replies
    1. monggo,, jangan lupa mampir lagi :D

      Delete
  10. jadi tambah keren ya kalau widget follower nya dimodifikasi ;)

    ReplyDelete
    Replies
    1. iya sis eka :) jadi lebih menarik juga :)

      Delete
  11. Wow, great sharing, I just know that we can customize the widget follower!

    ReplyDelete
    Replies
    1. Thanks,, many roads lead to Rome: D may be useful

      Delete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔