25 January 2011

Widget Followers Valid di W3

Membuat Widget Followers agar Valid XHTML 1.0 atau W3 Untuk membuatnya langkahnya adalah sebagai berikut:

Langkah pertama:
Apabila anda sudah mempunyai Widget Followers silahkan lanjutkan ke langkah ke dua.
Anda harus Login ke Blogger klik Rancangan pilih Element Laman.
Kemudian klik Tambah Gadget, pilih Widget Pengikut lalu klik SIMPAN.

Langkah ke dua:
Sekarang anda buka Notepad untuk meng-copy kode Folowers yang ada di HTML caranya mudah anda lihat tampilan blog anda yang sudah ada Widget Followers nya kemudian tekan Ctrl + U untuk melihat kode Followers tersebut, kode Followers yang harus di copy ke Notepad adalah seperti ini:

<div id=" div id yang anda miliki " style="width: 100%; "></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Pengikut";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#000000";
skin['ENDCAP_LINK_COLOR'] = "#000000";
skin['ALTERNATE_BG_COLOR'] = "transparent";

skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#000000";
skin['CONTENT_TEXT_COLOR'] = "#000000";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "Arial";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-1oivj41cpmxb7",
height: 260,



site: " ID dari blog anda ",

locale: 'in' },
skin);
</script>

Kalau sudah ketemu kodenya seperti di atas silahkan copy kode tersebut ke dalam Notepad, untuk yang berwarna biru itu adalah id yang anda miliki.

Langkah ke tiga:
Sekarang anda sudah memiliki kode Widget Followers tersebut yang sudah di simpan di Notepad, di sini saya akan menerangkan sedikit kenapa Widget Followers Eror di W3C? karena penempatan bahasa type dari Java/Script.
Sekarang kita akan mengambil Java/Script dari friend connect.

Langkahnya adalah:
Klik Rancangan pilih Element Laman.
Kemudian klik Tambah Gadget pilih HTML/JavaScript.
Kemudian masukan kode yang sudah anda copy ke Notepad kedalam HTML/JavaScript beri nama untuk Widgetnya yang berbeda agar tidak bingung membedakannya.
Lalu tambahkan kode di bawah di atas <div id="div id yang sobat miliki" style="width: 100%;"> dan kode </div> di akhir kode
jadi gambaranya seperti berikut:

<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: 100%; "></div>
<script type="text/javascript">
var skin = {};
skin['FACE_SIZE'] = '32';
skin['HEIGHT'] = "260";
skin['TITLE'] = "Pengikut";
skin['BORDER_COLOR'] = "transparent";
skin['ENDCAP_BG_COLOR'] = "transparent";
skin['ENDCAP_TEXT_COLOR'] = "#000000";
skin['ENDCAP_LINK_COLOR'] = "#000000";
skin['ALTERNATE_BG_COLOR'] = "transparent";

skin['CONTENT_BG_COLOR'] = "transparent";
skin['CONTENT_LINK_COLOR'] = "#000000";
skin['CONTENT_TEXT_COLOR'] = "#000000";
skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
skin['CONTENT_HEADLINE_COLOR'] = "#000000";
skin['FONT_FACE'] = "Arial";
google.friendconnect.container.setParentUrl("/");
google.friendconnect.container["renderMembersGadget"](
{id: "div-1oivj41cpmxb7",
height: 260,



site: " ID dari blog anda ",

locale: 'in' },
skin);
</script>
</div>

Klik SIMPAN

Keterangan : Kode yang berwarna biru di atas adalah kode yang harus di tambahkan silahkan di perhatikan saya memberikan type di JavaScript tersebut.

Langkah ke empat:
Sekarang anda mempunyai dua Widget Followers yang berbeda yang pertama adalah Widget dengan bawaan blogger dan yang kedua Widget yang berhasil di buat di HTML/JavaScript, sekarang anda harus menghapus Widget Followers bawaan blogger sehingga hanya ada satu Widget.

Langkah ke lima:
Sekarang kita akan membuat valid di W3C caranya adalah:
Dalam Rancangan klik Edit HTML centang Expand Template Widget
lalu cari kode <b:include name='quickedit'/> kalau sudah ketemu hapus
Kemudian klik SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

No comments:

Post a Comment