Info [K-moe] - Hal yang pertama kali saya pikirkan ketika memulai ng-blog adalah bagaimana cara membuat template blog, khususnya template blogger /  blogspot. Setelah sekian lama belajar dan berkeksplorasi sendiri baik itu membuat dan mengedit template blog akhirnya sedikit-sedikit mulai mengerti langkah-langkah membuat template blog.

Membuat template blog memang gampang-gampang susah.. Apalagi template blog responsive / template blog yang seo friendly.. Huuuhh....

Faktor yang harus difahami dalam membuat Template Blog

Berlanjut pada tema cara membuat template blog, terdapat 3 hal yang harus diperhatikan diantaranya adalah
  1. Memahami struktur blog
    2. Umumnya struktur blog terdiri dari body, outer-wrapper, header, main, aside/sidebar,dan footer
    • Body
      • body bisa disebut juga tubuh yang membungkus seluruh isi blog.
    • Outer-wrapper 
      • merupakan bagian dalam body. Ya kalau dibandingkan dengan tubuh manusia bisa juga disebut kulit yang pembungkus dari header, main, aside/sidebar,dan juga footer.
    • Header
      • Header merupakan bagian teratas dari blog. Bagian header biasanya berisi Judul blog, deskripsi blog, dll.
    • Sidebar
      • Sidebar merupakan bagian blog yang umumnya di isi oleh widget-widget blog. Letak sidebar biasanya berada di samping posting blog / main-wrapper.
    • Main-wrapper
      • Main-wrapper merupakan bagian blog untuk menampilkan posting artikel baik itu Judul Post, Post konten, kotak komentar dan lain-lain
    • Footer
      • Footer biasanya terletak dibagian bawah blog. Bagian footer bisa berisi widget ataupun link/tautan yang berhubungan dengan pemilik blog.

    Cara Membuat Template Blogger

    Keterangan
    Warna Abu-abu = Body
    Garis Tebal Hitam = Outer wrapper
    Kolom Warna Ungu = Header
    Kolom warna biru muda/biru langit = main-wrapper
    Kolom Biru Tua = sidebar
    Kolom berwarna Hijau = Footer

  2. Memahami penggunaan HTML
  3. Memahami penggunaan CSS

Langkah-langkah membuat template blog

  1. Pastikan anda membuat coretan desaign template yang ingin dibuat dalam kertas agar lebih memudahkan pembuatan template dan juga supaya lebih terarah.
  2. Membuat template kosong / blank template
  3. Caranya hapus semua code HTML bawaan dan ganti dengan kode dibawah ini
    1234567891011121314151617181920212223242526272829303132<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <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:else/>
      <title>
        <data:blog.pageName/>
        - 
        <data:blog.title/>
      </title>
    </b:if>
<b:skin><![CDATA[/
Disini nantinya akan di isi oleh CSS
]]></b:skin>
</head>
<body>
</body>
</HTML>
  4. Simpan. Nah template kosong anda sudah jadi
  5. Langkah selanjutnya adalah menambahkan Header, Sidebar, Main Wraper (Posting), dan Footer.
  6. Menambahkan Bagian Outer-wrapper dan Header
    7. Tambahkan HTML di bawah ini diantara tag <body>tambahkan disini</body>
    123456789<div class='outer-wrapper' id='outer-wrapper'>
<header class='header-wrapper cl cf' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Info [K-moe] (Header)' type='Header'>
</b:widget>
</b:section>
</header>
</div>
  7. Menambahkan bagian main-wrapper
    8. Tambahkan HTML di bawah ini  setelah tag </header>
    12345<b:section class='main-wrapper' id='main-wrapper' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
  8. Menambahkan bagian sidebar
    9. Tambahkan HTML di bawah ini setelah main wrapper yang anda tambahkan tadi tepatnya setelah </b:section> 
    12345<aside itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<b:section class='sidebar' id='sidebar-right' showaddelement='yes'>
</b:section>
</aside>
  9. Menambahkan bagian footer
    10. Tambahkan HTML di bawah ini setelah kode </aside>
    12345<footer itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<b:section class='footer' id='footer' showaddelement='yes'>
</b:section>
</footer>
  10. Menambahkan CSS
    11. Elemen pada CSS harus sesuai dengan Kode HTML yang sudah sobat buat tadi
    Tambahkan CSS diantara <b:skin><![CDATA[/ Disini nantinya akan di isi oleh CSS ]]></b:skin>
    Contoh 
    123456789101112131415161718
body {
background: #eceef5;
margin: 0;
padding: 0;
color: #797979;
font-family: "Arial",Tahoma, sans-serif;
font-weight: 400;
font-size: 12px;
}
.outer-wrapper{
background:#fff;
max-width:960px;
width: 100%;
margin: 0 auto;
padding: 0;
}
dan seterusnya sesuai dengan elemen yang sobat buat sebelumnya..
  11. Cukup sampai disini dulu ya....