June 20, 2014 wahyutiez

Cara Membuat Template Blog Valid HTML5

Cara Membuat Template Blog Valid HTML5
YANG dimaksud Cara Membuat Template Blog Valid HTML5 ini bukan membuat template baru, tapi mengedit, memperbaiki, atau memodifikasi template yang kita gunakan agar valid atau sesuai dengan program HTML5.

Jika template blog kita valid HTML5, maka menurut para pakar desain web, hal itu akan membuat blog kita mudah dibaca user (pengguna, pengunjung) dan mudah dikenali serta diindeks oleh mesin pencari.

Artinya, valid HTML5 sangat bagus untuk masa depan dan kejayaan blog kita. Seluruh internet browser utama (Firefox, Opera, IE, Chrome, Safari) mendukung HTML5.

Cara Cek Valid HTML5

Untuk mengecek apakah blog kita valid HTML5 atau tidak, bisa gunakan situs ValidatorW3. Blog GBL ini mendapatkan data error dan warning: 6 Errors, 1 warning(s) (dengan memasukkan URL) dan 2 Errors, 3 warning(s) (dengan metode Direct Input).

Biarin da ah, yang penting nggak kebanyakan. Bandingkan misalnya dengan detik.com yang dinyatakan punya 221 Errors, 161 warning(s)! Tapi toh detikcom aman-aman saja!

Bahkan, template-template yang diklaim Valid HTML5, saat dicek di sana, masih saja mengandung error. Aneh ya?

Jadi, gimana dong? Itu tadi.... minimal  "jangan kebanyakan" errornya, di bawah 10 deh kayak punya GBL ^_^

Cara Membuat Template Blog Valid HTML5

Untuk membuat blog kita valid HTML5, minimal mengurangi errror, maka lakukan langkah-langkah berikut ini. Backup dulu template blog Anda, kalau makin error, atau nanti tampilannya malah acak-acakan, balikin lagi aja ke semula.

Login > klik "Template" > klik "Edit HTML"
1. Cari (CTRL+F) atau temukan kode di bawah ini. Gampang... ada di bagian paling atas!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
Atau yang seperti ini:
<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> 
<head>
Hapus semuanya dan ganti (replace) dengan kode berikut ini:
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
2. Ganti kode </html> menjadi </HTML>  di bagian akhir/bagian bawah banget template Anda.

3. Hapus kode <b:include data='blog' name='all-head-content'/>
4. Ganti dengan meta tags Valid HTML 5 berikut ini:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> 
<meta content='blogger' name='generator'/> 
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/> 
<link expr:href='data:blog.url' rel='canonical'/> 
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> 
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/> 
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/> 

<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> 
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.postImageThumbnailUrl'> 
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> 
</b:if> 
<b:if cond='data:blog.metaDescription != &quot;&quot;'> 
<meta expr:content='data:blog.metaDescription' name='description'/> 
<b:else/> 
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/> 
</b:if> 
</b:if>

5. Cari dan ganti kode <b:skin><![CDATA[ dengan kode di bawah ini
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>
6. Ganti kode semua /*------ ----*/ dengan /* dan */ saja. Contohnya kode seperti ini:
/* ----------------------
Name: New Johny Wuss V3
Date : 16 Jun 2014
Url : http://contohblognih.blogspot.com
-------------------------*/
Ganti menjadi begini:
/* Name: New Johny Wuss V3
Date : 16 Jun 2014
Url : http://contohblognih.blogspot.com */
7. Hapus Navigasi Baru bawaah blogger! Cari kode <body> dan tambahkan kode di berikut ini di atasnya.
<!-- <body><div></div> -->
8. Hapus ikon QuickEdit atau gambar Obeng+Tang (Screwdriver)! Cari dan hapus semua kode 
<b:include name='quickedit'/> 

Jangan lupa, setiap kali menambah widget baru, akan muncul kode tersebu di template, dan hapus lagi!

9. Temukan kode seperti ini:
<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>
Hapus semuanya dan ganti dengan kode berikut ini:
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
10. Tambahkan kode type = "text/javascript" di semua kode JavaScript dan tambahkan type = "text/css" di semua kode css. Misalnya:
<script src="https://GBLblogger.googlecode.com/files/code.js"></script>
<script src="https://GBLblogger.googlecode.com/files/cibiblog.css"></script>
Ubah menjadi begini:
<script type="text/javascript" src=""https://GBLblogger.googlecode.com/files/code.js"></script>
<script type="text/css" src="https://GBLblogger.googlecode.com/files/cibiblog.css"></script>
11. Sembunyikan navigasi halaman (page navigation) di Homepage! Cari kode 
<b:include name='nextprev'/> dan ganti dengan kode berikut ini:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
12. Tambahkan "Alt Attributes" di semua gambar/images. Misalnya:
<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK333UqhonYUOdjKA99eyUquNxX-0IiPvndnU2B0MYGKILFkHjHhX6wu_BdPQVaigz7psamHWsl3m7nlmOy9HM7-mf8x5jW-h0rK8HfbMD3MiAF8sJAlO3siabDdfwLsaVMBBdU6Ubi88/s1600/logo.png' width='75'/>
Ubah menjadi begini:
<img alt='no image' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK333UqhonYUOdjKA99eyUquNxX-0IiPvndnU2B0MYGKILFkHjHhX6wu_BdPQVaigz7psamHWsl3m7nlmOy9HM7-mf8x5jW-h0rK8HfbMD3MiAF8sJAlO3siabDdfwLsaVMBBdU6Ubi88/s1600/logo.png' width='75'/>

13. SAVE Template!

Kalaupun ke-13 langkah di atas tidak 100% membuat template blog kita jadi Valid HTML5, minimal bisa mengurangi error dan warning. 

Namun, jika langkah di atas malah menjadikan tampilan blog berantakan, balikin aja ke semula. Lakukan langkah "minimal", antara lain: ganti meta tags dan hapus quickedit doang.

Jangan terlalu "pusing" soal valid HTML5 ini. Pilih saja template blog seo dan fokus ke konten! Ingat, Content is STILL the King! Konten tetaplah raja. Maka, utamakan konten berkualitas! 
Good Luck!

Sumber:
http://html5doctor.com/designing-a-blog-with-html5/
http://www.leetblogger.com/2014/03/how-to-make-valid-xhtml-blogger-templates-seo.html
Tags

Post a Comment

0 Comments