<header>

Untuk memudahkan maka kita langsung praktek membuat template, disini saya akan mengunakan theme contoh Bootstrap Blog

keRangka - Bootstrap Blog
Praktek Membuat Template Satu Widget Blog

Struktur html

<!DOCTYPE html>
<html lang="en">
  <head>
 
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="nav blog-nav">
          <a class="nav-link active" href="#">Home</a>
          <a class="nav-link" href="#">New features</a>
          <a class="nav-link" href="#">Press</a>
          <a class="nav-link" href="#">New hires</a>
          <a class="nav-link" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="blog-header">
      <div class="container">
        <h1 class="blog-title">The Bootstrap Blog</h1>
        <p class="lead blog-description">An example blog template built with Bootstrap.</p>
      </div>
    </div>

    <div class="container">

      <div class="row">

        <div class="col-sm-8 blog-main">

          <div class="blog-post">
            <h2 class="blog-post-title">Sample blog post</h2>
            <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

            <p>This blog post shows a few different types of content.</p>

          </div><!-- /.blog-post -->

          <div class="blog-post">
            <h2 class="blog-post-title">Another blog post</h2>
            <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>

            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, </p>
  
          </div><!-- /.blog-post -->

          <div class="blog-post">
            <h2 class="blog-post-title">New feature</h2>
            <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>

            <p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
  
          </div><!-- /.blog-post -->

          <nav>
            <ul class="pager">
              <li><a href="#">Older</a></li>
              <li class="disabled"><a href="#">Newer</a></li>
            </ul>
          </nav>

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. </p>
          </div>
          <div class="sidebar-module">
            <h4>Archives</h4>
            <ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
            </ol>
          </div>
          <div class="sidebar-module">
            <h4>Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
            </ol>
          </div>
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/abhrandj">@abrandj</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>


  </body>
</html>

Setelah kita mempelajari struktur html template blog tersebut, maka kita akan menerjemahkan ke kode-kode blogger tentunya dengan pembenahan sesuai dengan standar html5

<b:includable id='1-kR-header' var='top'>
kode
baris kode
baris baris kode ...
<b:includable/>

id='1-kR-header'
Pada dasarnya untuk id=' ' bebas dalam penamaannya tetapi karena settingan blogger akan mengurutkan berdasarkan alfabet, maka untuk memudahkan pengelompokan baiknya kita menggunakan nomor. Anda dapat modifikasi nama id sesuai dengan keinginan.

Tahap Pertama

kita akan memasukkan <div class="blog-header"> hingga </div> kedalam <b:includable id='1-kR-header' var='top'>, maka akan seperti ini:

    <b:includable id='1-kR-header' var='top'>
        <div class="blog-header">
         <div class="container">
          <h1 class="blog-title">The Bootstrap Blog</h1>
          <p class="lead blog-description">An example blog template built with Bootstrap.</p>
         </div>
        </div>
    </b:includable>
Tahap Pertama A

Karena dalam struktur mengunakan div, anda dapat menambhakan dengan role= header atau banner, serta melengkapi dengan schema, itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner"

    <b:includable id='1-kR-header' var='top'>
        <div class="blog-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner">
         <div class="container">
          <h1 class="blog-title">The Bootstrap Blog</h1>
          <p class="lead blog-description">An example blog template built with Bootstrap.</p>
         </div>
        </div>
    </b:includable>
Tahap Pertama B

Anda dapat mengganti tag div dengan tag <header> serta jangan lupa untuk menghapus role="banner", karena ini akan berlebihan dalam aturan W3 - ARIA, itemscope="itemscope" itemtype="http://schema.org/WPHeader"

    <b:includable id='1-kR-header' var='top'>
        <header class="blog-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
         <div class="container">
          <h1 class="blog-title">The Bootstrap Blog</h1>
          <p class="lead blog-description">An example blog template built with Bootstrap.</p>
         </div>
        </header>
    </b:includable>

Tahap Kedua

Kita membuat,
<b:includable id='1-kR1-title' var='1-kR-header'>

untuk

<h1 class="blog-title">The Bootstrap Blog</h1>

<b:includable id='1-kR1-title' var='1-kR-header'>
kode
baris kode
baris baris kode ...
<b:includable/>

Pada kode dibawah ini sudah di tambahkan schema itemprop='headline' dan itemprop='name'. Serta memaksimalkan SEO Blog dengan aturan heading text h1 untuk halaman homepage dan index, h2 untuk halaman post article. 

    <b:includable id='1-kR1-title' var='1-kR-header'>
     <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <h1 class="blog-title" itemprop='headline'>
       <data:title/>
      </h1>
      <b:else/>
      <h2 class="blog-title" itemprop='name'>
       <a expr:href='data:blog.homepageUrl' itemprop='url'>
        <data:title/>
       </a>
      </h2>
     </b:if>
    </b:includable>

Tahap Ketiga

Kita membuat,
<b:includable id='1-kR2-description' var='1-kR-header'>

untuk

<p class="lead blog-description">An example blog template built with Bootstrap</p>

<b:includable id='1-kR2-description' var='1-kR-header'>
kode
baris kode
baris baris kode ...
<b:includable/>

Pada kode dibawah ini sudah di tambahkan schema itemprop='description'

    <b:includable id='1-kR2-description' var='1-kR-header'>
     <p class="lead blog-description" itemprop='description'>
      <data:description/>
     </p>
    </b:includable>

Tahap Keempat

Menggabungkan

<b:includable id='1-kR1-title' var='1-kR-header'> - tahap kedua
<b:includable id='1-kR2-description' var='1-kR-header'> - tahap ketiga

ke

<b:includable id='1-kR-header' var='top'> - tahap pertama A atau B (silakan pilih)

dengan

<b:include name=' '/>

    <b:includable id='1-kR-header' var='top'>
        <header class="blog-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
         <div class="container">
          <b:include name='1-kR1-title'/>
          <b:include name='1-kR2-description'/>
         </div>
        </header>
    </b:includable>

Tahap Kelima

Menggabungkan

<b:include name='1-kR-header'/>

ke

<b:includable id='main' var='post'>

			<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
				<b:includable id='main' var='post'>
					<!--.site-navigation -->									
					<b:include name='1-kR-header'/>
					<!-- .site-header -->
					<!--.site-article -->
					<!-- .site-aside -->
					<!-- .site-footer -->
				</b:includable>

Kesimpulan

Bila kita perhatikan maka pada tahap pertama, kita sudah dapat membuat struktur header tanpa membuat <b:include id='title'/> dan <b:include id='description'/>, akan tetapi bila anda akan bermain-main dengan <b:if cond=' == '> akan mengalami kesulitan dalam menjabarkan kode-kode blogger. Selanjutnya kita akan membuat Nav