Membuat Template Blogspot Valid HTML5

Bisakah Template Blogspot yang biasa dipakai dijadikan valid HTML5?
Sebelum tulisan ini melanjutkan bahasan dari pertanyaan tersebut, ada baiknya kita mengetahui lebih dulu pengertian HTML5 dan apa efeknya bagi blogspot.

HTML5 merupakan versi terbaru dari pengembangan versi sebelumnya. Update terbaru dari HTML ini berfungsi untuk perbaikan teknologi HTML agar lebih mudah diakses baik itu oleh manusia maupun oleh mesin. Jadi pada prinsipnya adalah agar web/blog lebih mudah terbaca di berbagai browser serta memudahkan penggunaannya.

Lalu, apa saja keuntungan sebuah blog (khususnya blogspot) yang sudah valid HTML5. Beberapa list berikut ini bisa membantu menjelaskan keuntungannya.

blog lebih mudah terindeks oleh mesin pencari (google) dengan lebih baik.
browser bisa melakukan render dengan lebih baik dan bahkan lebih cepat.
DOM/Document Object Model menjadi lebih konsisten dan stabil
HTML lebih compatible dengan berbagai model browser baru yang terus bermunculan.
lebih mudah mengetahui berbagai link broken dan link mati di blog.
blog tentu saja lebih disukai oleh browser.

Sedikit uraian mengenai keuntungan HTML5 tersebut pastinya bisa meyakinkan anda mengenai perlunya sebuah blog (blogspot) harus valid HTML5. Masih banyak keuntungan lainnya yang bisa didapatkan oleh sebuah blogspot jika valid HTML5, anda bisa browsing sendiri di google.

Pertanyaannya lagi, bagaimana dampaknya terhadap SEO?
Meskipun para pakar webmaster belum bisa menjawabnya secara pasti, namun jika melihat berbagai keuntungan yang didapat tersebut, tentunya hasilnya pasti lebih positif terhadap SEO.

Baiklah, sekarang kita menuju ke cara melakukan validasi blogspot anda.
Untuk melihat ke validan sebuah blog apakah sudah valid HTML5 atau belum, anda bisa membacanya DISINI.

Lalu, bagaimanakah caranya agar blogspot (template) bisa valid HTML5?
Setelah saya mencoba menerapkan ke beberapa blog yang dimiliki Tips SEO Terbaik lainnya dengan beberapa cara dari beberapa browsing yang dilakukan, ternyata cara yang cukup berhasil diterapkan adalah dengan menggunakan informasi cara membuat valid HTML5 versi dari blognya Kang Ismet.

Cara dari Kang Ismet ini ternyata terbukti berhasil diterapkan di beberapa blog yang dimiliki Tips SEO Terbaik.

Nah berikut ini adalah cara mevalidkan HTML5 yang sudah dicoba Tips SEO Terbaik dan terbukti berhasil membuat valid HTML5 dari Blogspot.

Panduan Membuat Blogspot Valid HTML5 100%

1. Login ke blogspot anda.
2. masuk ke edit HTML template, kemudian ikuti langkah berikut ini:
3. cari kode berikut 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>

kemudian ganti dengan kode berikut :

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

4. Selanjutnya cari kode </html> pada bagian paling bawah template lalu ganti dengan kode </HTML>.

6. Kemudian temukan kode berikut ini:

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

Lalu ganti dengan kode berikut ini:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
</b:if>
</b:if>

7. Ganti kode <b:skin><![CDATA[ dengan kode berikut ini:

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

8. Hapus semua kode seperti ini: <b:include name='quickedit'/>
Kode tersebut akan selalu muncul setiap kali anda menambahkan widget baru. Jadi pastikan anda selalu menghapusnya.

9. Hapus semua kode berikut ini (opsional)

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

10. Hapus juga kode berikut ini :

<b:include data='post' ='postQuickEdit'/>

atau mungkin kode seperti ini:

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + 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>

11. Jika ditemukan kode seperti ini, hapus saja

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

12. Ganti semua kode & dengan &

Nah sampai disini seharusnya homepage blog anda sudah valid HTML5 meskipun belum 100%.
Kenapa cuma di homepage? Ya.., untuk membuat semua halaman, termasuk halaman posting Valid HTML5 diperlukan beberapa cara lagi yang akan Tips SEO Terbaik bahas di tulisan yang lainnya.

Nah, agar homepage blogspot bisa 100% valid HTML5, anda perlu memperhatikan beberapa hal berikut ini:
#. Selalu gunakan tag alt pada gambar, contoh:

<img alt="HTML5" src="http://linkgambar.png" />

#. ganti kode border="0" pada gambar dengan kode berikut ini":

style="border:none"

atau bisa dibuatkan kode CSS tersendiri:

img{border:none}

#. untuk IFrame, jangan gunakan kode frameborder="0" atau allowtransparency:"true" scrolling="no". hapus dan ganti dengan kode berikut ini :

style="border:none;overflow:hidden"

atau bisa memakai kode CSS seperti ini:

iframe{border:none;overflow:hidden}

#. untuk tag a, jangan gunakan tag name seperti contoh:

<a name='comment-form'>

ganti dengan menggunakan id seperti berikut ini:

<a href='#comment-form'>

#. Pastikan tidak ada dua id yang sama di template anda.

Nah, seharusnya jika langkah membuat template blogspot valid HTML5 tersebut sudah dilakukan dengan benar, maka homepage blog anda akan 100% valid HTML5 dan tidak ditemukan error lagi.

sumber : blog.kangismet.net

Memasang Widget Recent Post Berdasar Label dengan Thumbnail Paling Mudah

Sampai saat posting ini diterbitkan, blogspot belum pernah secara khusus dan resmi merelease widget recent post (post terbaru) berdasarkan label. Hanya ada widget recent post berdasarkan posting terbaru dan widget archive yang berisi semua posting. Padahal widget seperti ini sebenarnya cukup banyak dibutuhkan oleh blogger. Khususnya jika memiliki blog yang memiliki topik majalah atau berita. Berikut ini akan Saya bagikan script untuk membuat dan menambahkan widget recent post berdasarkan label. Ada dua tipe yang ingin Saya bagikan. Yang pertama adalah untuk widget recent post label yang memiliki fitur thumbnail dilengkapi dengan judul dan deskripsi posting. Sedangkan yang kedua adalah untuk recent post based label yang hanya menampilkan thumbnail saja. Panduan yang dibagikan di sini sengaja Saya pilihkan yang paling mudah, yaitu cukup memasangnya atau mengcopy script dengan sedikit editing untuk penyesuaian dengan blog Anda, dan memasangnya (Paste) ke dalam widget HTML/Javascri

Tips Seo Terbaik

Cari di e-LKS