Tutorial membuat template Blogger #1

Pada posting kali ini saya akan membahas bagaimana cara membuat sebuah template blogger versi saya, untuk membuat template blogger kita perlu memahami beberapa materi pemograman web yang mungkin pernah dipelajari saat SMK atau ketika kuliah, jika kita menguasai materi tersebut kita akan dengan mudah memahami struktur template yang ada pada blogger.

Seperti yang saya bilang ada beberapa materi yang harus dipahami diantaranya yaitu :
  • HTML untuk struktur elemen.
  • CSS untuk menghias.
  • JavaScript untuk membuat konten lebih dinamis.
  • XML
Saya mempelajari semua itu pertama ketika saya sekolah dan dari situs W3Schools.

Persiapan

Bahan-bahan yang diperlukan untuk membuat template tidak terlalu sulit dan sudah pasti ada disetiap komputer, berikut ini bahan yang perlu dipersiapkan.
  • Editor Text seperti Notepad, Mousepad (Linux), saya menyarankan Notepad++.
  • Browser Chrome, Firefox, Opera, atau Safari sebagai Viewer (Output).
Pada setiap browser kita dapat memanfaatkan fitur Inspect Element atau developer tools untuk memudahkan kita dalam pembuatan.

Caranya klik kanan pada browser > Inspect.

Gambar diatas merupakan contoh fitur inspect element.

Membuat template kosong

Kita buat template kosong atau kanvas kosong, saya menyarankan membuat templatenya pada blog baru yang khusus untuk pengujian yang tidak dipakai untuk ditayangkan dipublik.

Buka Blogger > Pilih salah satu blog > Template > Edit HTML.

Pada bagian ini kita hapus bersih semua kode yang ada pada kotak itu tanpa sisa.

Masukan kode struktur dasar HTML pada kotak tersebut, berikut ini kodenya. 
<!DOCTYPE html>
<html>
  <head>
    <title>Judul Blog</title> 
  </head>
  <body>
   Isi Blog
  </body>
</html>
Setelah itu pada bagian <head> tambahkan beberapa tag html lainnya seperti xml, b:skin. 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' 
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
   <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
    <b:if cond='data:blog.isMobile'> 
      <!--
       Tag Meta jika ingin template blogger ini menjadi responsive, 
       yaitu menyesuaikan ukuran layar perangkat
      -->
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
    <b:else/> 
      <meta content='width=1100' name='viewport'/> 
    </b:if> 
    <!--
     tag b:include untuk memanggil konten yang terpisah,
     yang ini untuk memanggil semua konten head yang dibutuhkan pada blogger
    -->
    <b:include data='blog' name='all-head-content'/>
    <!--
     Tag b:if memungkinkan kita membuat beberapa konten berbeda tergantung dari kondisi,
     misalnya jika pada halaman homepage isinya menjadi A sedangkat selain homepage menjadi B,
    -->
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <title><data:blog.pageTitle/></title>
      <b:else/>
      <title><data:blog.pageName/></title>
    </b:if>
    <!-- Tempat untuk meletakan CSS blogger ada pada tag b:skin -->
    <b:skin>
<![CDATA[
body, html {
  margin : 0;
  padding : 0;
  font-family : sans-serif;
}
]]>
    </b:skin>
  </head>
  <body>
   Isi Blog
  </body>
</html>
Setelah bagian head, kita lanjutkan pada bagian <body>, kita akan menambahkan tag b:section untuk menyediakan tempat menyisipkan widget pada blog, atau bisa menjadi tempat postingan dan header. 
<body>
  <!--
   Dalam satu tag b:section dapat diisi beberapa widget blog, b:section header
   bisa digunakan untuk meletakan header, sedangkan tag b:section main 
   biasanya sebagai tempat postingan blog dimuat.
  -->
  <b:section class='header' id='header' showaddelement='yes'/>
  <b:section class='main' id='main'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' />
  </b:section>
  <!--
   Setiap b:section memiliki class untuk membedakan jenisnya, dan id untuk
   membedakan antara b:section satu dengan yang lainnya.
   b:section dibawah ini dapat diisi dengan widget tambahan seperti label,
   archive, popular post
  -->
  <b:section class='sidebar' id='sidebar1' showaddelement='yes' />
  <b:section class='sidebar' id='sidebar2' showaddelement='yes' />
</body>
Maka hasil akhirnya akan seperti dibawah ini. 
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
   <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
    <b:if cond='data:blog.isMobile'> 
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
    <b:else/> 
      <meta content='width=1100' name='viewport'/> 
    </b:if> 
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <title><data:blog.pageTitle/></title>
      <b:else/>
      <title><data:blog.pageName/></title>
    </b:if>
    <b:skin><![CDATA[
body, html {
  margin : 0;
  padding : 0;
  font-family : sans-serif;
}
    ]]></b:skin>
  </head>
  <body>
    <b:section class='header' id='header' showaddelement='yes'/>
    <b:section class='main' id='main'>
      <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' />
    </b:section>
    <b:section class='sidebar' id='sidebar1' showaddelement='yes'/>
    <b:section class='sidebar' id='sidebar2' showaddelement='yes'/>
  </body>
</html>
Klik simpan untuk menyimpannya, setiap kali ada perubahan klik simpan untuk menyimpan perubahan.

Menambahkan widget

Kita akan mengisi b:section dengan widget, kali ini yang saya contohkan adalah Header. Klik Tata Letak pada blogger, kira-kira hasilnya sementara seperti ini.
Klik tambahkan gadget pada bagian header, lalu pilih Header halaman.
Langsung klik simpan, setelah selesai sementara jika dilihat dari web browser akan seperti ini.
Cukup sampai disini postingan saya yang ini, jika ada waktu saya akan melanjutkan pada part berikutnya.

Komentar

Posting Komentar