Belajar Cara Membuat Template Blogger Dari Awal

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 responsivetemplate blog yang seo friendly.. Huuuhh.... tetapi tidak ada salahnya kita belajar membuat  template blog sendiri.

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

    • Memahami penggunaan HTML
    • 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
      <?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. Menambahkan Bagian Outer-wrapper dan Header
    6. Tambahkan HTML di bawah ini diantara tag <body>tambahkan disini</body>
      <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>
      <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>
      
    9. Menambahkan bagian sidebar
    10. Tambahkan HTML di bawah ini setelah main wrapper yang anda tambahkan tadi tepatnya setelah </b:section> 
      <aside itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
      <b:section class='sidebar' id='sidebar-right' showaddelement='yes'>
      </b:section>
      </aside>
      
    11. Menambahkan bagian footer
    12. Tambahkan HTML di bawah ini setelah kode </aside>
      <footer itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
      <b:section class='footer' id='footer' showaddelement='yes'>
      </b:section>
      </footer>
      
    13. Menambahkan CSS
    14. 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
      
      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..
    15. Cukup sampai disini dulu ya....
    Reaksi :
    Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

    Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

    Artikel relevan lainnya
    Beri Komentar