Home / blog / Tutorial / Cara Membuat Template Blogger

Cara Membuat Template Blogger

- ,



Bagaimana cara membuat template blogger? Pertanyaan ini menjadi pertanyaan yang sangat sering ditanyakan oleh para blogger. Walaupun blogger sendiri sudah menyediakan template default yang cukup baik dan responsive, ketika melihat beberapa blogger lain mampu membuat template yang unik dan keren, bahkan beberapa membuat dan sekeligus membagikan atau menjualnya, muncul keinginan untuk mencoba untuk membuat template yang unik juga. Saya pun memiliki pertanyaan ini sejak pertama kali saya menjadi blogger beberapa tahun lalu. Belajar otodidak, dengan mencari-cari tutorial di internet menjadi solusi saya saat itu. Kebanyakan sumber berbahasa inggris dan itu membuat saya cukup kesulitan memahaminya. Oleh karena itu, sekarang saya mencoba membagi sedikit pengetahuan saya tentang ini dengan bahasa Indonesia yang sederhana dan mudah dipahami. Semoga. :D


Syarat Awal Untuk Membuat Template Blogger Sendiri

Sebelum saya membahas lebih lanjut, saya ingin menjelaskan terlebih dahulu pengetahuan dan keahlian dasar apa saja yang diperlukan seseorang untuk bisa membuat template sendiri. Syarat awalnya adalah anda sudah familiar dengan Blogger.com. Setidaknya anda sudah tahu cara membuat post, mengubah template, menambahkan widget, mungkin kostumisasi widget dan beberapa pengaturan sederhana lainnya. Kemudian pengetahuan dasar tentang bahasa HTML dan CSS juga sangat penting. Mungkin juga sedikit pengetahuan tentang XML dan Script akan sangat membantu. Jika anda belum memiliki pengetahuan dasar tersebut, anda bisa belajar dahulu. Banyak sumber pelatihan online gratis tentang HTML,CSS, dan lainnya. Seperti yang pernah saya post di 5 Website Untuk Belajar Pemrograman , ada website pelatihan seperti http://www.codecademy.com/ yang bisa membantu anda.

Langkah-1 : Mempersiapkan blog sederhana sebagai objek
Persiapkan sebuah blog baru sederhana dengan template default dari blogger untuk dijadikan bahan eksperimen. Isi dengan beberapa post, mungkin 10-15 post sederhana dengan gambar dan tulisan sudah cukup. Blog ini adalah tempat anda menguji template yang anda buat nanti.

Langkah-2 : Memahami struktur dasar dari sebuah Template Blogger
Sebelum membuat sebuah template, anda harus memahami struktur sebuah template. Template yang digunakan di Blogger biasanya berformat XML. Di bawah ini saya sediakan contoh template kosong yang menunjukan susunan dasar sebuah template XML.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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>
    <b:include data='blog' name='all-head-content'/>
<title>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
          <data:blog.pageName/> | <data:blog.title/>
          <b:else/>
          Page Not Found | <data:blog.title/>
        </b:if>
      </b:if>
    </title>
    <b:skin><![CDATA[
body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>
</head>
<body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
</body>
</html>

Jika anda mencoba untuk menerapkan template di atas, yang muncul adalah halaman kosong. karena memang komponen HTML dan CSS yang menentukan tampilan blog belum ada.
Nah, sekarang mari kita pahami satu persatu susunan template di atas.
  1. Tag XML dan HTML : tag html dan xml adalah bagian utama dari template yang menjadi tempat penyimpanan semua komponen template. Anda bisa lihat baris kode sebelum baris <head>
  2. Bagian  <title> : Jika anda lihat kode setelah tag <head> terdapat tag <title>. Tag ini sangat penting karena menjadi parameter utama yang akan menunjukan identitas dari blog anda. Pada template di atas, ada tiga bagian kondisional (ditandai dengan tag <b:if cond=..>) di dalam tag <title>, bagian pertama akan menunjukan judul blog anda jika ada orang yang membuka halaman blog anda. Bagian kedua template akan menunjukan judul post atau page. Bagian ketiga menunjukan halaman error 404 jika halaman post atau page yang dituju tidak ada. 
  3. Bagian <b:skin> ... </b:skin> : tag ini merupakan tempat anda memasukan kode stylesheet untuk mengatur tampilan template. Bahasa yang digunakan adalah bahasa CSS. Sederhananya, CSS digunakan untuk menyusun posisi dan tampilan komponen HTML yang anda pasang di template. Setiap kode CSS yang anda buat harus berada di dalam tag ini. 
  4. Tag <b:section> ... </b:section> : tag ini digunakan untuk mengatur widget yang akan dipasang pada template. Bagian-bagian penting seperti area posts, footer, dan lainnya ditangani dengan tag ini. Untuk membuat area widget di template gunakan tag ini. Keterangan tentang ini bisa anda baca di Page Elements Tags for Layouts. 

Langkah-3 : Membuat Header

Setelah mempelajari struktur dasar, sekarang saatnya untuk membuat header blog. Ada dua hal penting dalam membuat sebuah template blogger yaitu Header dan Isi Blog (Blog Content). Sebenernya komponen lain juga penting, tapi kedua hal itu yang paling utama. Kita akan menggunakan widget cutom header dan mencoba untuk mengubahnya sesuai dengan keinginan kita. Pada dasarnya, Header adalah widget dan kita sudah tahu cara untuk membuat widget bukan? Jadi yang perlu kita lakukan adalah membuat 'section' untuk header yang akan kita buat. Copy dan Paste kode section header berikut di dalam tag <body> ... </body>. Anda tahu kenapa kita masukan di dalam tag <body> bukan? Kalo belum silahkan belajar lagi dahulu tentang HTML.
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>

Kode di atas belum lengkap, tapi ketika anda memasukan kode tersebut di template dan mengintegrasikannya dengan template, blogger akan secara otomatis memasukan kode default untuk widget. Sebelum lanjut, ayo kita pahami bagian-bagian kode tersebut. 

Setelah mempelajari struktur dasar, sekarang saatnya untuk membuat header blog. Ada dua hal penting dalam membuat sebuah template blogger yaitu Header dan Isi Blog (Blog Content). Sebenernya komponen lain juga penting, tapi kedua hal itu yang paling utama. Kita akan menggunakan widget custom header dan mencoba untuk mengubahnya sesuai dengan keinginan kita. 

Pada dasarnya, Header adalah widget dan kita sudah tahu cara untuk membuat widget bukan? Jadi yang perlu kita lakukan adalah membuat 'section' untuk header yang akan kita buat. Copy dan Paste kode section header berikut di dalam tag <body> ... </body>. Anda tahu kenapa kita masukan di dalam tag <body> bukan? Kalo belum silahkan belajar lagi dahulu tentang HTML. 
Kode di atas belum lengkap, tapi ketika anda memasukan kode tersebut di template dan mengintegrasikannya dengan template, blogger akan secara otomatis memasukan kode default untuk widget. Sebelum lanjut, ayo kita pahami bagian-bagian kode tersebut. 

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>

  1. <b:section> dengan class='header' dan id='header'. Class dan id tersebut adalah tag yang biasa digunakan dalam CSS. Dengan tag tersebut anda bisa mengatur width, height, padding, font, dan lainnya di kode CSS template anda. 
  2. <b:section> dengan maxwidgets='1'. Ini digunakan untuk membatasi jumlah widget yang bisa anda tambahkan di section tersebut.
  3. showaddelement='yes/no'. Bagian ini digunakan untuk menampilkan atau tidak (yes/no) section tersebut di halama editor tata letak di blogger. 
  4. locked='true/false'. Bagian ini digunakan untuk mengunci atau tidak widget tersebut. Mengunci dalam artian bisa diedit atau tidak. 
Kemudian setelah anda menyusun header pada body html tersebut, sekarang saatnya mengatur tampilannya dengan CSS. Berikut saya beri sedikit contoh bagaimana susunan CSS yang akan anda letakan di antara tag <b:skin>. 
#header {  }
#header h1 {  }
#header h1 a {  }
#header .description {  }
Untuk lebih detail tentang CSS anda bisa mengunjungi website W3School untuk belajar lebih lanjut. 

Langkah-4. Membuat Menu Widget

Cara membuat header di atas dapat digunakan juga untuk membuat menu. Metode yang biasa digunakan adalah dengan membuat list. Untuk membuat list di HTML, biasanya digunakan ul li. Berikut ini contoh css dan html dari sebuah menu. 

html : 
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
        <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
     <div id='menu'>
<ul>
<li>
<a href="alamat page yg dituju">menu 1</a>
</li>
<li>
<a href="alamat page yg dituju">menu 2</a>
</li>
</ul>
</div>
 </b:widget>
</b:section>

CSS :
#menu {
display : block;
width : auto;
margin: 0 auto;
}
#menu ul{
list-style:none;
background-color:white;
}
#menu li{
margin: 0 5px;
}
#menu li a{
color : black;
padding: 1px 2px;
}


Langkah-5. Membuat bagian isi blog.

Langkah ini adalah langkah terpenting dalam pembuatan template. Di blogger, secara default kita sudah diberikan widget post, biasanya di halaman layout pages atau tata letak disebut sebagai Blog Posts. Kita bisa mengubahnya sesuai dengan keinginan, tapi akan sedikit lebih sulit karena membutuhkan pengetahuan coding yang lebih dalam. Tapi secara sederhana  saya akan mencoba menjelaskannya. Seperti widget yang telah kita pelajari sebelumnya, Blog Posts sama saja dengan widget lainnya, bedanya adalah pada section nilai showaddelement='no', pada tag widget locked='true'. 

Dengan kode di atas, anda sudah bisa mengubah tampilannya dengan mengotak-atik id class CSS nya. Ketika anda memperlebar tag widget posts, anda akan menemukan banyak tag <b:includable>. Tag ini berfungsi secara default untuk menyertakan komponen yang ditampilkan. Untuk post, nilai tag default includable adalah dengan tag id='post' dan var='post'. 

Langkah-6. Membuat komponen footer dan gadget lainnya. 

Langkah membuat footer dan widget yang lain sama saja dengan langkah yang telah dijelaskan di atas. Berikut ini adalah contoh section yang bisa anda gunakan. 

Yang menjadi perhatian adalah bagimana anda mengolah komponen HTML dan CSS widget yang ingin anda tampilkan. Jumlah <div> yang anda gunakan, dan kejelian anda menentukan nilai width,height,position,float,margin, dan padding akan menentukan seindah apa widget yang anda buat. Mungkin untuk beberapa perilaku komponen html yang lebih kompleks, misalnya mengubah nilai opacity sebuah komponen jika anda klik, akan memerlukan pengetahuan tentang java script. 

Langkah-7. Mengatur Layout halaman.

Terkadang jika kita tidak hati-hati dalam mengatur susunan komponen yang kita tempatkan, tampilan template kita malah akan menjadi kacau. Oleh karena itu, diperlukan prencanaan dan susunan CSS yang jelas. Berikut ini saya tunjukan contoh susunan layout widget yang akan membantu anda menyusunnya dengan baik. 
body#layout #widgetID { detail layout widget di sini }
body#layout #widgetID2 { detail layout widget di sini }
body#layout #widgetID3 { detail layout widget di sini }
body#layout #widgetID3 { detail layout widget di sini } 

Petunjuk Terakhir 

Lakukan eksperimen sebanyak - banyaknya! Anda akan memahami bagaimana kerja html, css, script, jquery, dan komponen lainnya dengan banyak berlatih. Perencanaan desain, dengan membuat sebuah layout dasasr sederhana untuk menyusun letak section div yang ada pada template anda akan sangat membantu pembuatan template. 
Untuk mempelajari html css script dengan mudah, anda bisa kunjungi codeacademy.com. Untuk referensi library nya anda bisa kunjungi w3schools.com. 

Saya harap, tutorial yang sangat sederhana ini bisa membantu anda. Paling tidak memberikan anda pencerahan apa yang harus anda lakukan sekarang untuk bisa membuat sebuah template blogger anda sendiri. Selamat mencoba!!

tag : membuat template blogger, template, tutorial
Cara Membuat Template Blogger Cara Membuat Template Blogger Reviewed by skyoko7@gmail.com on Monday, September 15, 2014 Rating: 5

No comments:

Comment Here

Subscribe to: Post Comments ( Atom )
Powered by Blogger.