Tampilkan postingan dengan label Template. Tampilkan semua postingan
Tampilkan postingan dengan label Template. Tampilkan semua postingan

Template Blog Valid XHTML

Cara Membuat Template Blog Valid XHTML/ Valid HTML5

Template Blog Valid XHTML
Template Blog Valid XHTML

1. Login ke akun blogger > masuk menu Templates > Edit HTML > beri centang Expand Template Widget
2. Ubah 'deklarasi DOCTYPE, cari kode dibawah

<!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>

hapus semua kode diatas dan ganti dengan kode berikut

<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

setelah itu ubah kode </html> menjadi </HTML>

3. Menghapus comment declaration yang ada pada CSS, cari kode dash ( ----- ) dan hapus semuanya. contoh:

/* ----------------------
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Template Hasbi Htc
-------------------------*/

hasilnya menjadi

/* Blogger Template Style
Name: Simple Faster Blogger Templates
Date: 1 Maret 2013
Edited by: Template Hasbi Htc */

4. Hapus meta tag <b:include data=’blog’ name=’all-head-content’/>

5. Menghapus Navigasi Bar bawaan blogger, cari kode <body> dan tambahkan kode berikut tempat diatasnya

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

Nanti akan muncul peringatan untuk menghapus navbar, langsung klik hapus saja.

6. Menghapus Icon Quickedit atau gambar obeng, cari kode <b:include name='quickedit'/> kalo sudah ketemu hapus semua, jangan lupa jika kelak menambahkan widget baru hapus lagi kode tersebut.

7. Menghapus Post icon, cari kode 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>

hapus dan ganti dengan kode berikut

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

8. Menambahkan jenis type="text/javascript" pada semua kode JavaScript dan type type="text/css" untuk semua css yang ada, baik di templates, posting maupun di widget. Contoh:

<script src="https://bloggergubug.googlecode.com/files/sumbercopas.js"></script>
<script src="https://bloggergubug.googlecode.com/files/coba.css"></script>

ubahlah menjadi

<script type="text/javascript" src="https://bloggergubug.googlecode.com/files/sumbercopas.js"></script>
<script type="text/css" src="https://bloggergubug.googlecode.com/files/coba.css"></script>

9. Menyembunyikan page navigation di halaman utama, cari kode <b:include name='nextprev'/> ganti dengan kode berikut

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>

10. Menambahkan atribut Alt pada semua gambar, contoh

<img height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg' width='75'/>

ganti menjadi seperti berikut

<img alt='no image' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg' width='75'/>

11. Hapus semua Meta tag yang mengakibatkan Error pada template blog. Gunakanlah meta tag Valid HTML 5 berikut

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta content='Kumpulan Informasi Internet' name='description'/>
<meta content=’Keyword blog anda’ name=’keywords’/></b:if>
<link href=’http://bloganda.blogspot.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/>
<link href=’http://bloganda.blogspot.com/feeds/posts/default’ rel=’alternate’ title=’RSS Feeds’ type=’application/atom+xml’/>
<link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>
<link href=’http://bloganda.blogspot.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/>
<meta content=’kode verifikasi dari google webmaster’ name=’google-site-verification’/>
<meta content=’kode verifikasi alexa’ name=’alexaVerifyID’/>
<meta content=’kode verifikasi dari bing’ name=’msvalidate.01&#8242;/>
<meta content=’Nama Anda’ name=’Author’/>


12. Mengatasi error css bundle templates, hapus code <b:skin><![CDATA[ ganti dengan kode berikut

<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>


13. Menyembunyikan widget dihalaman utama.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
Widget Yang Mau DiSembunyikan
</b:if>

14. Taruh Script dibawah dibawah tepat dibawah <head>

<!--[if IE]><script type='text/javascript' src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->

15. Pada saat posting gambar hapus atribut Anchor='1' dan Border='0' ganti tambahkan atribut alt dan title. contoh berikut adalah format gambar standart blogspot

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" /></a></div>

Rubah menjadi

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Hasbi Htc" title="Template Hasbi Htc" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4lcX6XbsA90BpQgqiPodtAXvNkV5bQyk3uyLsR7U6jLxcmOhq0PAZhEdwf1A8N_X8jLH7Q5CM8WnacHFC3iXeavDGBHyeEuYxKoIXfg0EOS7ANzNWBH5qugXv1-CUpie_mHpkOq086BlG/s1600/BloggerGubug.jpg" /></a></div>

16. Jangan pernah menggunakan tag <center> untuk membuat tulisan ataupun gambar rata tengah, pakailah kode berikut jika tidak ingin mengakibatkan error html baik di postingan maupun di widget html.

<div style="text-align: center;">Isi Widget</div>

Kira nya itu dulu Membuat Template Blog Lebih Valid XHTML, saya juga pun masih belajar untuk masalah validasi xhtml. Mungkin jika ada yang mau menambahkan bisa tulis di kotak komentar :)
Baca Selengkapnya »
Diposting oleh di Tidak ada komentar:
Label:

Template Next Generation Hasbi Htc

Template Next Generation Hasbi Htc - Sahabat Blogger Hasbi Htc postingan yang berlebel template adalah postingan pendana saya di blog ini, Oh yach saya gak akan bercerita banyak mengenai templaate blog ini yang saya akan pakai di Template Hasbi Htc generasi berikutnya, di Blog Hasbi Htc, Sekedar info template yang saya akan Instal di blog saya ini merupakan template hasil dari jerih payah saya selama ini, jadi template ini otomatis tidak Free atau Gratis, seperti template saya yang saat ini yang terpasang di Hasbihtc.blogspot adalah tema hasil karya dari salah satu best friends blogger hasbi.

Template Next Generation Hasbi Htc

Namum sayang saya sama sekali tidak berniat menganti template blog saya karena menganti tampilan itu akan mempengaruhi SEO blog di search Engine. Lantas mengapa tempalate ini saya Katakan template Hasbi Generasi selanjutnya ? Tema Ini Insyah Allah sementara dalam Tahap Edited yang natinya akan bersemanyam di dasbor blog namun Bukan dasbor Blogspot tapi Wordpres

Sekedar Info template ini adalah template Valid HTML 5 dan Template Next Generation Hasbi Htc berikutnya akan di usahakan lebih valid lagi baik itu pada saat Home Page atau Pun pada Saat read More Artikel jadi saya hanya meyempurnakan dari Pembuatnya saya hingga temlpalte ini akan migrasi dari tema blogspot ke tema Wordpres. Insyah Allah Dalam beberapa Hari kedepan Saya akan Louncing Perdana template ini dengan sebuah domain Hosting milik salah satu perusahaan Hosting Di Indonesia.

Kesimpulan dari apa yang saya Katakan Diatas Template Next Generation Hasbi Htc akan saya Converter dari tema blogspot menjadi tempalte Wordpers, Yang dalam tahap pembuatan oleh seorang master blogger yang sudah tidak diragukan lagi. Demikianlah Postingan Awal di Blog ini buat teman yang minat pake di versi wordpres Nantikan Templatenya yang saya akan bagi Gratis Buat Agan-agan Blogger yang minat Ngeblog di Wordpres Tentunya. Salam Blogger.

Baca Selengkapnya »
Diposting oleh di Tidak ada komentar:
Label: