Sunday, April 13, 2014

Cara Membuat Blog 100% Valid HTML5

7:24 AM    No comments


Langkah-Langkah Membuat Blog 100% Valid HTML5
    Langkah 1 : Backup template sebelum melakukan editing.
    Langkah 2 : Cari kode seperti ini :

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <HTML>
    <head>
    <meta charset='utf-8'/>

    Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template)

    Langkah 4 : ganti kode ini :

    <b:include data='blog' name='all-head-content'/>
    • dengan kode di bawah 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>

    Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah :

    <link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
    &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
    <style>

    Langkah 6 : Hapus semua kode ini :

    <b:include name='quickedit'/>
    • Setiap kali menambahkan widget baru, hapus kode di atas.
    Langkah 7: Hapus semua kode ini (opsional)

    <a expr:name='data:post.id'/>

    Langkah 8 : hapus kode seperti ini :

    <b:include data='post' name='postQuickEdit'/>
    • atau seperti ini :
    <b:includable id='postQuickEdit' var='post'>
    <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
    <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
    <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
    </a>
    </span>
    </b:if>
    </b:includable>

    Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)

    <div class='post-share-buttons goog-inline-block'>...sampai...</div>

    Langkah 10 : Ganti semua code & dengan &amp;

    Langkah 11 : Selesai

    Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :

    1. Selalu gunakan tag alt pada gambar, contoh :

    <img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSLWUjrccgocgkOixuroM6jhziHUndWUUSZpdJdLEuC3PMY-mD-c72pll4OTXgGPSck0Oic-HC9BCXFCJ5dpfAxTApoEbZTZ5o5difGA0uen6afN94sWKuLzhc4BnhIYRSOO6-SAtZF1s/s1600/html5.png" />

    2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :

    style="border:none"
    • atau CSS terpisah seperti
    img{border:none}

    3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :

    style="border:none;overflow:hidden"

    atau CSS terpisah seperti

    iframe{border:none;overflow:hidden}

    4. Pada tag a jangan menggunakan tag name seperti :

    <a name='comment-form'>

    sebagai gantinya gunakan id seperti :

    <a href='#comment-form'>

    5. Jangan ada dua id pada template.

    6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru.

    0 comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)