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

READ MORE - Widget Followers Valid di W3

Cara Mengurangi Error Validasi W3

Postingan sebelumnya saya sudah menjelaskan Cara Memvalidasi Blog di W3 Markup Validation Service, dan postingan kali ini saya akan menjelasan Cara Mengurangi Error Validasi W3.
Tanpa banyak basa-basi langsung saja kita praktekkan
Berikut Cara Mengurangi Error Validasi W3

Ganti DOCTYPE punya blogger
Caranya :
Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

Kemudian cari kode seperti berikut letaknya di awal kode template
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Jika sudah ketemu ganti kode diatas dengan kode berikut ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Sekarang cari kode seperti di bawah :

<b:include data='blog' name='all-head-content'/>

Jika sudah ketemu ganti dengan kode berikut :

<!-- Blogger Default Meta -->
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='http://www.blogger.com/profile/00356345871860419117' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=6634386433859994495' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/6634386433859994495/posts/default' rel='service.post' title='Tip Trik Blogger - Atom' type='application/atom+xml'/>
<link href='http://tiptrikblogger.blogspot.com/feeds/posts/default' rel='alternate' title='Tip Trik Blogger - Atom' type='application/atom+xml'/>
<!-- End Blogger Default Meta -->

Keterangan : ganti tulisan yang berwarna biru
00356345871860419117 ganti dengan ID Profile (bisa dilihat pada address bar browser saat buka profile)
6634386433859994495 ganti dengan ID Blogger (bisa dilihat pada address bar browser saat edit blog)
http://tiptrikblogger.blogspot.com ganti dengan Url blog sobat
Tip Trik Blogger ganti dengan title blog sobat

Selanjutnya cari kode berikut :

<b:include name='quickedit'/>

Jika sudah ketemu hapus semua kode tersebut yang ada pada template sobat

Keterangan : kode tersebut di atas adalah kode yang menampilkan gambar tank dan obeng yang biasanya berada di sudut bawah widget
Catatan : usahakan jikan sobat menambahkan widget/gadget baru pada template, cek pada Edit HTML, dan hapus kode tersebut.

Kemudian tambahkan kode berikut dibawah kode </head>

<!-- <body><div></div> -->

Keterangan : kode tersebut berfungsi untuk menghapus navbar blogger, kalau ada konfirmasi untuk menghapus, klik hapus.

Hilangkan post icons, cari kode seperti berikut

<span class='post-icons'>
           <!-- email post links -->
           <b:if cond='data:post.emailPostUrl'>
            <span class='item-action'>
            <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
            </a>
          </span>
           </b:if>
          <!-- quickedit pencil -->
          <b:include data='post' name='postQuickEdit'/>
         </span> <div class='post-share-buttons'>
          <b:include data='post' name='shareButtons'/>
         </div> </div>

Jika sudah ketemu hapus dan ganti dengan kode dibawah ini

<span class='post-icons'>
           <!-- email post links -->
           <b:if cond='data:post.emailPostUrl'>
           </b:if>

         </span>
         </div>

Selanjutnya usahakan kurangi penggunaan kode strip/dash (-)

Contoh untuk HTML

<!--------------- Blogger Default Meta ---------------> Kesalahan

<!--End Blogger Default Meta--> Yang di anjurkan


Contoh untuk CSS

/*--------------- Navbar ---------------*/ Kesalahan

/*Navbar*/ Yang di anjurkan


Gunakan tag alt pada setiap gambar.

Contoh :

<img alt='Keterangan' src='Url gambar'/>

jika sudah SIMPAN TEMPLATE.

Untuk membuktikan kebenarannya sebelum di edit sobat bisa cek di situs http://validator.w3.org/ berapa errornya dan sesudah di edit berapa errornya.

Semoga bermanfaat

READ MORE - Cara Mengurangi Error Validasi W3

Cara Memvalidasi Blog di W3 Markup Validation Service

W3 Markup Validation Service adalah sebuah situs untuk mengecek apakah kode-kode HTML yang berada dalam blog sudah valid dan ditulis dalam kode yang benar.
Untuk menggunakan W3 Markup Validation Service caranya sangat mudah.
Jika diantara sobat blogger ada yang ingin ngecek blognya
berikut caranya :

• Masukkan alamat http://validator.w3.org/ pada web browser sobat.
• Pada Address Box, masukkan url blog sobat yang ingin dicek.
• Kemudian pilih More Options
• Berikan centang pada Validate error pages agar dapat diketahui letak error jika ada dan juga Clean up Markup with HTML Tidy untuk menampilkan hasil rekomendasi kode yang baru dan valid.
• Kemudian klik Check untuk memulai proses validator.

Setelah proses selesai maka W3 akan memberikan keterangan apakah blog sobat sudah Valid CSS dan HTML atau masih banyak yang Error.
Pada bagian result W3 akan menjelaskan berapa Error dan Warning nya.
Contohnya blog ini (saat posting): 17 Errors, 15 warning(s)

silahkan coba cek blog sobat dan belajarlah mengurangi Error tersebut dengan memperhatikan bagian-bagian Error yang ada dibagian bawah penjelasan W3 Validator.

Selamat mencoba

READ MORE - Cara Memvalidasi Blog di W3 Markup Validation Service