CARA MENGURANGI EROR HTML DAN CSS PADA TEMPLATE BLOG

CARA MENGURANGI EROR HTML DAN CSS PADA TEMPLATE BLOG


Mungkin sebagian dari kalian ada yang bertanya, apa pentingnya kevalidan HTML dan CSS?

Dari beberapa referensi yang saya baca, katanya kevalidan HTML dan CSS ini penting untuk mempercepat looding blog kita saat dibuka. Selain itu Search Engine juga lebih menyukai halaman blog yang memiliki eror seminimal mungkin, sehingga posisi blog itu akan lebih baik secara SEO.

Untuk itu mari kita cek site kita dengan melakukan pengecekan tersebut. Buat rekan-rekan yang ingin melakukan pengecekan kevalidan kode HTML/CSS blog anda dapat mengunjungihttp://valida tor.w3.org/

Masukkan alamat blog kamu, lalu klik validate/revalidate.

Catat hasil eror yang dihasilkan

(Ini penting karena hasil itu akan kita bandingkan dengan hasil akhir nanti setelah kita melakukan trik-trik dibawah ini untuk meminimalkan eror HTML dan CSS blog kita).

Validasi blog.wahyu-winoto.com

(Gb. 1. Hasil pengecekan eror blog saya sebelum dilakukan trik pengurangan eror HTML/CSS. Disana terlihat hasil 168 eror dan 176 warning).

CARA MENGURANGI EROR HTML DAN CSS PADA TEMPLATE BLOG (VALIDASI DENGAN W3C) 

Setelah kita melakukan pengecekan, tentu ada usaha kita untuk memperbaiki kode yang error. 

Untuk mengurangi eror HTML dan CSS blog anda silahkan anda ikuti langkah2 di bawah ini:

1. Login ke blogger Kalian --> Rancangan ---> EDIT HTML (centang Expand template widget)

2. Silahkan ganti "doctype" punya blogger (letaknya di awal kode template )

Kode terusannya seperti di bawah. 

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

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

3. Selanjutnya cari kode berikut :

<b:include name='quickedit'/>

Hapus semua kode tersebut yang ada pada template kalian

4. Sekarang cari kode berikut :

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

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/IDBLOGGERPROFILEKALIAN' rel='me'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://www.blogger.com/rsd.g?blogID=IDBLOGGERKALIAN' rel='EditURI' title='RSD' type='application/rsd xml'/>
<link href='http://www.blogger.com/feeds/IDBLOGGERKALIAN/posts/default' rel='service.post' title='JUDULBLOG - Atom' type='application/atom+xml'/>
<link href='http://NAMABLOG.blogspot.com/feeds/posts/default' rel='alternate' title='JUDULBLOG - Atom' type='application/atom+xml'/>
<!-- End Blogger Default Meta -->

Keterangan:

- Tulisan : IDBLOGGERPROFILEKALIAN adalah ID anda saat membuka profil
- Tulisan IDBLOGGERKALIAN adalah ID kalian saat melakukan edit HTML
- Tulisan NAMABLOG adalah URL blog anda

5. Mengurangi penggunaan kode strip/dash (-), hapus Dash pada script template anda.

Untuk HTML 

<!------------------- Blogger Default Meta ----------------------> SALAH

<!-- Blogger Default Meta --> Benar

Untuk CSS

/*----------- Header ------------*/ SALAH

/* Header */ Benar

6. Simpan kode berikut dibawah kode </head>

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

Itu fungsinya untuk menghapus navbar blogger, kalau ada konfirmasi untuk menghapus, KLIK saja HAPUS. 

7. Biasakan menggunakan tag alt pada setiap gambar.

Contoh: <img alt='Tulis Keterangan disini' src='URL gambar'/>

8. Tambahkan kode CSS seperti ini pada CSS template blogspot Anda (Tempatkan diatas kode ]]></b:skin> )

.quickedit{display:none} 

9. Selanjutnya, cari kode HTML berkut: 

<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://www.blogger.com/img/icon18_email.gif' width='18'/> 
</a> 
</span> 
</b:if> 
<b:include data='post' name='postQuickEdit'/> 
</span> 

Lalu ganti menjadi seperti ini: 

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

10. Nonaktifkan tampilan versi mobile blog Anda 

Biarkan versi desktop saja yang tampil ketika blog Anda dibuka dari browser ponsel, karena versi mobile blogspot mengandung banyak error alias tidak valid.
Nonaktifkan versi Mobile
Nonaktifkan versi Mobile

******
Setelah kamu selesai melakukan langkah-langkah diatas, silahkan simpan template anda.

Setelah itu kembali ke http://validator.w3.org/

Cek lagi eror HTML dan CSS blog anda.

Lihat apakah eror yang ada tadi sudah berkurang atau belum.

Berdasarkan pengalaman saya mengecek http://garlandtheme.blogspot.com sebelumnya didapatkan hasil 168 eror dan 176 warning, lalu setelah melakukan langkah-langkah diatas jumlah eror menurun cukup banyak, yaitu menjadi 68 eror dan 43 warning.
Eror berkurang Drastis
Eror berkurang Drastis
(Setelah melakukan langkah-langkah diatas jumlah eror pada HTML/CSS blog saya menurun cukup banyak, yaitu dari 168 eror dan 176 warning menurun menjadi 68 eror dan 43 warning.)

Bahkan jika anda mau lebih teliti lagi maka eror yang ada akan bisa ditekan menjadi lebih sedikit lagi, coba saja cek eror blog garlandtheme.blogspot.com

DEMIKIAN SEDIKIT SARAN CARA MENGURANGI EROR HTML DAN CSS PADA TEMPLATE BLOG, SEMOGA BERMANFAAT !!!!!

***

Cara Membuat Template Blog Menjadi SEO Friendly

Cara Membuat Template Blog Menjadi SEO Friendly - Pada postingan kali ini saya akan membagikan Cara Membuat Template Blog Menjadi SEO Friendly. Banyak website atau blog yang menyediakan template SEO Friendly, namun mungkin design templatenya tidak sesuai dengan yang kita inginkan. Nah, cara ini sangat tepat jika Anda ingin mengoptimalkan blog Anda menjadi lebih SEO Friendly.

Cara Membuat Template Blog Menjadi SEO Friendly
Oke, berikut ini adalah Langkah-langkah Membuat Template Blog Menjadi SEO Friendly :

1. Mengoptimalkan Title Tag
Dengan melakukan cara ini kita dapat meningkatkan ranking blog pada SERP. Jika Title Tag sudah di optimalkan dengan baik, maka setiap artikel akan diikuti oleh title blog kita.
Tutorial :
  • Masuk ke Akun Blogger
  • Pilih Template
  • Cari kode <title><data:blog.pageTitle/></title>
  • Lalu ganti dengan kode berikut.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | Learn And Sharing</title>
    </b:if>
Keterangan : Ganti kode yang berwarna merah dengan kata kunci blog Anda.
  • Simpan Template Blog.

2. Memasang Meta Tag Yang SEO Friendly
Mungkin di blog Anda sudah terdapat Meta Tag, tapi sebaiknya Anda mengganti Meta Tag pada blog Anda dengan yang lebih SEO Friendly. Cara ini agar blog Anda cepat terindex oleh Google. 
Tutorial : Baca Disini => Cara Memasang Meta Tag SEO Friendly

3. Menambah Kode rel='canonical'
Menambah kode rel='canonical' pada blog kita berfungsi untuk menghindari atau mencegah terjadinya duplicate content atau konten ganda. Terus terang search engine seperti Google sangat tidak menyukai Duplicate Content karena dianggap spam oleh google dan artikel ktia tidak terdetek oleh google.
Tutorial :
  • Masuk ke Akun Blogger
  • Pilih Template
  • Cari kode <head>
  • Letakkan kode dibawah ini tepat dibawah kode <head>
<link expr:href='data:blog.url' rel='canonical'/>
  • Klik Save Template.
4. Memasang Breadcrumb
Membuat Navigasi Breadcrumb pada blog merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori postingan blog tersebut. Disamping itu juga dapat meningkatkan SEO pada blog kita.
Tutorial : Baca Disini => Cara Membuat Breadcrumb Menu Pada Blog

5. Memasang Permalink
Kotak permalink ini biasanya muncul pada bagian bawah postingan blog. Manfaat memasang kotak permalink pada blog selain untuk mempermudah pengunjung untuk mengetahui halaman yang sedang ia baca, tapi juga dapat meningkatkan SEO pada blog.

6. Memasang Related Post
Fungsi memasang Related Post pada blog adalah untuk mempermudah pengunjung untuk mencari postingan yang berhubungan dengan postingan yang ia baca. 

7. Mematikan Fungsi Arsip Blog
Arsip blogger dapat menyebabkan duplikat konten pada search engine, sehingga postingan kita dianggap spam oleh google. Bagi search engine seperti Google tentu sangat tidak menyukai yang namanya duplikat konten. Nah, untuk itu kita harus mematikan fungsi arsip (archive) pada blog kita.
Tutorial :
  • Masuk ke Akun Blogger
  • Pilih Setting > Search Preferences
  • Pilih 'Edit' pada Custom robots header tags
  • Klik 'Yes'
  • Klik 'No index' pada Archive and Search pages 
Setting Archive Blog
  • Klik Save Changes.

Demikianlah Cara Membuat Template Blog Menjadi SEO Friendly,
Semoga bermanfaat!

Jika ada pertanyaan tentang hal diatas, silahkan komentar pada kolom komentar dibawah.


Cara Memasang Permalink di Blog


Cara Memasang Permalink di Blog - Dalam postingan ini saya akan membahas tentang Cara Memasang Permalink di Blog. Kotak Permalink ini biasa muncul pada postingan blog, tepatnya di bagian bawah artikel/post blog. Manfaat memasang Kotak Permalink pada blog, selain untuk mempermudah pengunjung mengetahui halaman yang sedang ia baca, tapi juga bisa untuk meningkatkan SEO pada blog. 






Cara Memasang Permalink di Blog : 

1. Silahkan Masuk ke Akun Blogger Anda, melalui www.blogger.com.
2. Pada Dashboard Blog, Klik Template.
3. Klik Edit HTML.
4. Jangan lupa klik "Expand Template Widget".
5. Cari kode <data:post.body/> (Klik Ctrl+f untuk mempermudah pencarian kode).
6. Letakkan kode berikut di bawah kode <data:post.body/> (Copy > Paste).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='line-height:1.4em;padding: 1px; margin: 2px;background-color: #ffffff;font-size: 11px;text-align: justify'>
<span>Terima kasih telah membaca Artikel <strong><u><a expr:href='data:post.url'><data:blog.pageName/></a></u></strong> . Jika Anda ingin Copy Paste Artikel  ini, Harap cantumkan Link <strong><u><a expr:href='data:post.url'><data:blog.pageName/></a></u></strong> sebagai sumbernya.</span><br/>
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>
</div>
</b:if>

7. Klik Simpan Template.

Cara Membuat Breadcrumb Menu Pada Blog




Membuat menu navigasi berurutan di atas artikel posting atau istilahnya disebut breadcrumb,merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini.
Untuk melihat hasil dari sebuah blog yang sudah membuat breadcrumb/menu navigasi diatas posting bisa lihat gambar.


Cara Membuat Menu Breadcrumbs sebagai berikut :
  • Login ke blogger
  • Pilih Rancangan
  • Pilih Edit HTML
  • Conteng expand widget templates
  • Cari kode ]]></b:skin> gunakan Ctrl + F untuk memudahkan pencarian
  • Copy paste kode berikut di atas kode ]]></b:skin>.
#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:3px double #333;
}
  • Setelah itu cari kode
<div class='post hentry uncustomized-post-template'>      atau       <div class='post hentry'>
  • Letakkan  kode dibawah ini tepat dibawah kode di atas
<b:if cond='data:blog.pageType == &quot;item&quot; '>
<div id='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
</div>
</b:if>
  • Simpan Template dan selesai

Random Post