Cara Membuat Widget Followers | Valid W3C

Kali ini saya akan sharing bagaimana Cara Membuat Widget Followers agar Valid W3C validator,saya akan menerangkan sedikit kenapa Widget Followers Error di W3C?itu karena penempatan bahasa type dari Java/Script.

Sebenarnya cara ini saya dapatkan dari banyak sumber dan berbagai blog yang telah saya temui saat blogwalking di om google,hanya saja mungkin di karenakan perbedaan pada template bawaan dari pihak ke3 maka cara yang umum di gunakan masih membuat saya bingung.

Akhirnya saya otak atik cara yang telah ada agar sesuai dengan template saya,dan semoga dapat membantu sobat blogger yang mempunyai kesulitan yang sama saat mencoba memasang widget followers valid w3 ini.cekidot:

1. Masuk dulu ke Google Friend Connect.
2. Lihat gambar

• Pilih blog sobat yang akan dipasang widget follownya (klo blog sobat belum tercantum,klik Tambahkan situs baru.

• Klik "Tambahkan gadget anggota".

• Silahkan diatur ukuran, warna dll nya.

• Klik "Buat kode"

• Silahkan Copy kodenya, dan ikuti langkah selanjutnya
  

     3.  Paste code followers yang udah sobat copy tadi ke dalam "notepad" (cara ini agar sobat,apalagi yg newbie kayak saya ga bingung...xixixi,ikuti aja ya)

     4.  Lihat code yang telah sobat copy ke dalam notepad tadi,kira2 seperti di bawah ini:

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id=" div id yang anda miliki " style="width:276px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-div id yang anda miliki',
   site: 'ID dari blog anda' },
  skin);
</script>

•  Hapus code yang berwarna merah 

     5.  Setelah kode berwarna merah di hapus,lalu tambahkan kode yang berwarna Biru pada bagian atas dan bawah hingga keseluruhan terlihat seperti code di bawah ini:

<div class="widget-content">
<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript">
</script>
<div id=" div id yang anda miliki " style="width:276px;border:1px solid #cccccc;"></div>

<script type="text/javascript">

var skin = {};

skin['BORDER_COLOR'] = '#cccccc';

skin['ENDCAP_BG_COLOR'] = '#e0ecff';

skin['ENDCAP_TEXT_COLOR'] = '#333333';

skin['ENDCAP_LINK_COLOR'] = '#0000cc';

skin['ALTERNATE_BG_COLOR'] = '#ffffff';

skin['CONTENT_BG_COLOR'] = '#ffffff';

skin['CONTENT_LINK_COLOR'] = '#0000cc';

skin['CONTENT_TEXT_COLOR'] = '#333333';

skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';

skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';

skin['CONTENT_HEADLINE_COLOR'] = '#333333';

skin['NUMBER_ROWS'] = '4';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderMembersGadget(

 { id: 'div-div id yang anda miliki',

   site: 'ID dari blog anda' },

  skin);
</script>

</div>

     6. Nah,selanjutnya tinggal masuk ke blog>>Rancangan>>Elemen laman>>Tambah Gadget>>Pilih HTML/JavaScript, lalu copy paste code yang udah sobat oprek di notepad tadi ke dalamnya.

     7. Lalu,Simpan.

Selanjutnya dan terakhir agar widgetnya valid di W3C,pilih Rancangan>>Edit HTML>>centang Expand Template Widget lalu cari code di bawah :

<b:include name='quickedit'/> [biar gampang tekan Ctrl+F]

Lalu hapus,kemudian Simpan Template. 

Selesai.

Semoga bermanfaat_