Login with your blogger account first, follow this step :

Step 1
First time you must edit the DOCTYPE for get the better HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML  1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

change to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML  1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Save template.

Step 2
To further expand the widget to find the hidden code that contain on the widget. Search this code and delete them, this code use for quick edit icon on widget.

<b:include data='post' name='postQuickEdit'/>
and
<b:include name='quickedit'/>

This code will added when we add new widget, so dont forget to check if you added new widget

Step 3
Be sure to always use the alt= code for each image and close the image with />

Step 4
Do not use the widget Archive using Hierarchy view, because it will show a lot of errors. Better to use the Model List, thereby reducing errors, but it will look more simple and elegant.

Step 5
Becarefully for using this step, couse small mistake can make some error on the blogs.

First time you can del this code for default injection code from blogger.

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

For change the injection by manualy follow this code and edit the bold content with your own, couse this is unique nothing same on each blog.
<!-- 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/YOURBLOGERID'  rel='me'/>
<link href='http://www.blogger.com/openid-server.g'  rel='openid.server'/>
<link  href='http://www.blogger.com/rsd.g?blogID=YOURBLOGID'  rel='EditURI' title='RSD' type='application/rsd xml'/>
<link  href='http://www.blogger.com/feeds/YOURBLOGID/posts/default'  rel='service.post' title='BLOGTITLE - Atom' type='application/atom xml'/>
<link  href='http://www.YOURBLOGURL.blogspot.com/feeds/posts/default'  rel='alternate' title='BLOGTITLE - Atom' type='application/atom xml'/>
<!--  End Blogger Default Meta -->

YOURBLOGERID: is your blogger profile ID show in numberic on your blogger profile URL.
YOURBLOGID: is your blog ID show when we edit our blog, check on the url identity with numberic.
BLOGTITLE: is your blog title.
YOURBLOGURL: is your blog url .com

Step 6
Check your CSS skin code, don’t use many dash (-) code to the CSS. its contain error for that code. Use max only two dash on your css for explain some code tag.

Step 7
This step will make big change on your blogger blog, this code will delete the navbar and also some inject code from blogger.  Still on HTML Editor, place this code between </head> and <body> code :

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

Step 8
For page navigation that contain error url, we can hide that link. But that link is needed for good navigation. The error only on index pages, so we can hide the link only on index pages. Here the tricks, find this code
<b:include name='nextprev'/>

Replace with this code  :

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

Closing
I think it is still a lot of code that needs to be correct and the most basic is the use of the code (&) that contain error code for not in the end with (;). In addition there are also errors in the comment box susunanya inappropriate. Although not all mevalidasi this blogger template, but at least we can minimize errors.

Do not forget to always perform validation checks on the page to find the remaining errors on our blog after doing the step-step above.

Visit : www.validator.w3.org
Navigation Bar is fasility of blogger.com. But many blogger want to hide this navbar because it will make their blog layout look better without a box (navbar) above it. The Question "is this break TOS (Term Of Service) of blogger.com?" I don't know, but so far is good, there are many blogger hide their navbar but no reaction from blogger.com. So? do you want to hide Your blog navbar? if you want here's the trick to hide blogger navbar:

1. Login to Blogger --> Layout --> Edit HTML.
2. Copy the code below and insert into your <head> tag.

#navbar-iframe {
display: none !important;
}

3. Example put like this

-----------------------------------------------
Blogger Template Style
Name: xxx
Designer: xxx
URL: http://palingkomplet.blogspot.com
Date: Januari 2012
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Save your setting, and open your blog, You will have no navbar in your blog page

Enjoy
Adapun langkah-langkah Cara Pasang Readmore Otomatis di Blogspot adalah sebagai berikut:
   1. Login ke Account Blogger Anda;
   2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
      <script type='text/javascript'>
      var thumbnail_mode = "float" ;
      summary_noimg = 250;
      summary_img = 250;
      img_thumb_height = 120;
      img_thumb_width = 120;
      </script>

      <script type='text/javascript'>
      //<![CDATA[
      function removeHtmlTag(strx,chop){
      if(strx.indexOf("<")!=-1)
      {
      var s = strx.split("<");
      for(var i=0;i<s.length;i++){
      if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
      }
      }
      strx = s.join("");
      }
      chop = (chop < strx.length-1) ? chop : strx.length-2;
      while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
      strx = strx.substring(0,chop-1);
      return strx+'...';
      }

      function createSummaryAndThumb(pID){
      var div = document.getElementById(pID);
      var imgtag = "";
      var img = div.getElementsByTagName("img");
      var summ = summary_noimg;
      if(img.length>=1) {
      imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
      summ = summary_img;
      }

      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
      div.innerHTML = summary;
      }
      //]]>
      </script>

   3. Cari dan ganti kode <data:post.body/> dengan semua kode dibawah ini:
   
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

4. Simpan/Save Template.

Catatan :  Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.
Nofollow artinya link yang anda masukkan pada saat anda memberikan komentar disebuah blog tidak akan ditelusuri lebih lanjut oleh mesin pencari dalam artian anda tidak akan mendapatkan backlink dari blog tersebut, sementara kita tahu bahwa backlink merupakan salah satu unsur penting dalam peningkatan page ranking.

Sedangkan Dofollow memiliki arti yang sebaliknya, dalam artian anda akan mendapatkan backlink dari komentar yang anda berikan pada sebuah blog, yah anggaplah sebagai hadiah dari sipemilik blog kepada anda karena sudah bersedia memberikan komentar yang berkualitas di blognya. Secara default setting komentar sebuah blog adalah nofollow, tapi anda dapat merubahnya menjadi dofollow.

 Cara Setting Blog Menjadi Dofollow, sebagai berikut:

1.  Login ke Blogger.com --> kemudian klik menu Rancangan/Layout masuk ke tab Edit HTML --> beri tanda contreng pada kotak disebelah tulisan Expand Widget Templates;

2  Cari kode HTML yang menyusun komentar di blog anda, kira-kira kodenya seperti ini:

      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

3.  Langkah selanjutnya hapus tulisan yang bercetak tebal sehingga kode HTML blog anda menjadi seperti di bawah ini:
  
  <a expr:href='data:comment.authorUrl'><data:comment.author/></a>

 4.  Save Template

Untuk mengetahui apakah blog anda sudah Dofollow atau belum, Anda bisa melakukan pengecekan dengan cara klik kanan di halaman blog dan klik view page source. Jika anda masih menemukan tulisan rel='nofollow' berarti blog anda belum Dofollow.
1. Login ke Blogspot
2. Klik Rancangan/Design --> pilih Edit HTML, beri ih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
3.  Cari kode di bawah ini:
      <b:include data='feedLinks' name='feedLinksBody'/>

4. Delete semua kode di atas
5. Save Template
1. login Dengan Account Blogger Anda -->Masuklah ke halaman Dasboard lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.
3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
4.Kemudian centanglah Expand Template Widget.
5. Kemudian carilah kode: <b:includable id='status-message'>
6. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.
7. Kemudian scroll sedikit ke bawah, maka akan tampak beberapa baris kode pengiringnya, sehingga lengkapnya akan terlihat seperti dibawah ini.
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

8. sekarang gantilah semua kode tersebut dengan kode di bawah ini. Agar lebih mudah anda bisa copy saja lalu paste kan  tepat pada semua kode di atas.
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

9. Simpan template.
Sintaks HTML5 saat ini sedang dikembangkan sebagai revisi utama berikutnya dari HTML (HyperText Markup Language), bahasa markup inti dari World Wide Web. HTML5 adalah standar berikutnya diusulkan untuk HTML 4.01, XHTML 1.0 dan DOM Level 2 HTML.HTML5 juga mencakup Formulir Web 2.0, spesifikasi lain WHATWG. Selain menetapkan markup, HTML5 scripting menentukan application programming interfaces (API)yang ada Dokumen object model (DOM) antarmuka yang diperpanjang ada juga API baru, seperti:

#Unsur kanvas untuk menggambar model 2D
#Jangka waktu media pemutaran
#Offline penyimpanan database (aplikasi web offline)
#Dokumen untuk mengedit
#Drag-dan-drop
#Cross-dokumen pesan
#Browser sejarah manajemen
#Tipe MIME dan pendaftaran protokol penangan.
#Microdata

Seperti yang kita ketahui ada HTML ada juga css yang mendukung, CSS yang mendukung bahasa html 5 adalah CSS3 apabila sudah di terapkan bahasa tersebut kedalam web kita bisa menceknya di W3C yang akan berkata selamat anda sudah menerapkan HTML5 di dalam web anda yang berarti semua pharse dan sintaxs sudah valid dan tidak salah. Inti dari html 5 ini sebenarnya untuk membenarkan sintaxs <div> dan juga <span> yang di gunakan dalam semantik umum dan memperkenalkan unsur audio, video..Kesimpulannya halaman akan di bagi menjadi bagian yang terpisah seperti konten utama, menu, headers, footer dll.
oke.. biar ga bingung dibawah adalah unsur baru yang ada di html 5:

1.Sebuah tag baru <section>
Tag <section> baru dapat digunakan untuk mengidentifikasi bagian yang terpisah pada halaman, bab, buku. Keuntungannya adalah setiap bagian dapat memiliki HTML terpisah. Seperti dengan tag <article>, mesin pencari akan lebih memperhatikan isi bagian yang terpisah. Misalnya, jika kata-kata dari sebuah string pencarian ditemukan di satu bagian, ini menunjukkan relevansi yang lebih tinggi dibandingkan dengan  kata-kata yang ditemukan di seluruh halaman atau dalam bagian yang terpisah.

2.tag baru <header>
Tag <header> baru (yang berbeda dari unsur kepala) merupakan rahmat bagi para ahli SEO karena memberikan banyak fleksibilitas. Tag <header> sangat mirip dengan tag <h1></h1>
tetapi perbedaannya adalah ini bisa mengandung banyak arti, seperti H1, H2, H3 elemen, seluruh paragraf teks,link yang kuat, dan jenis lain dari informasi yang relevan.

3. Sebuah tag baru <footer>
Tag <footer> mungkin tidak berguna sebagai <header>tetapi masih memungkinkan untuk memasukkan informasi penting di sana dan dapat digunakan untuk tujuan SEO juga. <header> dan tag <footer> dapat digunakan berkali-kali dalam satu halaman.yaitu sobat dapat memiliki header yang terpisah / footer untuk setiap bagian dan ini benar-benar memberikan banyak fleksibilitas.

4.Sebuah tag baru <nav>
Navigasi merupakan salah satu faktor penting untuk SEO dengan navigasi semua bisa mudah untuk penguna.Tag <nav> baru dapat digunakan untuk mengidentifikasi sebuah koleksi link ke halaman lain. 


Kalau di kaitkan dengan pengaruh seo ini jelas mempunyai perbedaan karena mesin pencari akan lebih memperhatikan element baru seperti:

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video

Itu adalah element baru yang akan di terapkan di dalam html 5 yang akan membuat web menjadi sederhana dan berkembang lebih baik.

sumber: http://seoconsult.co.uk
1. Login di blogger.com
2. Pilih menu Tata Letak (Layout) =>> Edit HTML
3. Beri tanda Centang bagian yang ada tulisan Expand Widget Templates.
4. Cari Kode Ini
    <b:includable id='post' var='post'>
<div>
5. Kemudian letakkan kode dibawah ini tepat di bawah kode tersebut
    <em>Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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;'> / </b:if>
    </b:loop>
    </b:if> / <a expr:href='data:post.link'><data:post.title/></a></em>

6. Simpan pengaturan template anda.

Catatan* Breadcrumb tersebut hanya akan terlihat di halaman artikel (post page) saja.

Selain cara di atas sobat bisa juga menggunakan cara lain dengan menambahkan sedikit kode CSS di template blogger sobat.


Cari kode ini :
]]></b:skin>

Pasang kode CSS berikut tepat di atas kode ]]></b:skin> tadi
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef;
    }

Kemudian cari kode
<b:includable id='post' var='post'>

Setelah itu letakkan kode dibawah ini tepat di bawah kode diatas:
    <div class='breadcrumbs'>
    Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <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;'> / </b:if>
    </b:loop>
    </b:if> / <a expr:href='data:post.link'><data:post.title/></a>
    </div>

Simpan template.