Ads by Yasya El Hakim
Cara Membuat Blogger Template - Bagian 1

Mendesain Blogger Template tidaklah sesulit yang anda bayangkan (Jika anda sudah memahami sedikit tentang HTML dan CSS). Saya sudah merangkum cara untuk membuat Blogger Template dan disini saya akan menunjukkan cara yang mudah untuk dimengerti. Sebelum melanjutkan, hal pertama yang harus anda ketahui adalah bagaimana Blogger itu bekerja.

Untuk mendesain sebuah Template membutuhkan skill dalam Web Development. Anda harus menguasai atau memahami Web Desain tetapi anda tidak harus (sangat) menguasainya. Setidaknya, anda sudah mengerti tentang HTML, CSS, JavaScript, dan XML dasar. Untuk mempelajari teknologi tersebut, saya merekomendasikan agar anda mempelajarinya di W3Schools.com.

Bagaimana Cara Kerja Blogger?

Ketika kita meng-upload atau memasang template baru pada Blogger. Template tersebut akan masuk kedalam Database Blogger. Ketika Blog anda dikunjungi oleh seseorang, maka Browser akan mengirim Request dan Blogger akan memberikan Output kepada Browser.

Layout Dasar

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
<title><data:blog.pageTitle/></title>
</head>
<body>
 <!-- KONTEN -->
</body>
</html>

Template Blogger semuanya berisi kode XML dan beberapa elemen. Kita dapat melihat kode diatas bahwasanya struktur kode dari Blogger terdiri dari xmlns (XML Namespace). Namespace seperti xmlns:b, xmlns:data, xmlns:expr berfungsi untuk memberikan kita data dari database Blogger.

Berikut adalah penjelasan tentang XML Namespace pada Blogger:
  1. xmlns:b - Untuk mengakses elemen pada Blogger.
  2. xmlns:data - Merupakan tempat dimana data berasal.
  3. xmlns:expr - Digunakan untuk menghitung Expression untuk atribut (Kita akan mempelajarinya nanti)
Catatan: Anda dapat mengubah Namespace dari xmlns:b ke xmlns:blog atau xmlns:data ke xmlns:d. Tetapi lebih baik gunakan versi bawaannya saja.

Sebelum Melanjutkan

Sebelum kita masuk ke tahap selanjutnya, disini saya memilki sedikit penjelasan tentang Layout dan bagaimana Layout itu terlihat. Untuk mendesain Layout, anda dapat membuat gambaran atau membuat sketsa.

Berikut adalah beberapa kunci untuk membuat Layout:
  1. Tentukan dimana letak Menu dan bagaimana Menu dapat terlihat.
  2. Tentukan bagaimana dan dimana Postingan akan tampil, apakah terdiri dari 2 kolom atau 3 kolom.
  3. Tentukan dimana Widget dapat tampil.

Section

Layout pada Template Blogger di buat dengan menggunakan Section. Section merupakan salah satu letak elemen seperi Header, Footer, Sidebar, dll.


Penulisan Section

Membuat Section pada Blogger sangatlah mudah. Kita bisa memasukkan Widget kedalam Section, tetapi kita tidak bisa memasukkan elemen HTML kedalam Section. Untuk memasukkan konten pada Section, kita harus menggunakan elemen Widget.

Berikut adalah contoh penulisan Section:
<b:section id='' class='' maxwidgets='' showaddelement=''>
</b:section>

Penulisan Section hampir sama dengan penulisan HTML yang memilki atribut. Setiap atribut memilki arti yang berbeda.

Atribut pada Section

  1. id (Diperlukan) - Berisi nama yang hanya diperbolehkan berupa huruf atau angka.
  2. class (Opsional) - Berisi nama seperti "navbar", "header", "sidebar", dll.
  3. maxwidgets (Opsional) - Jumlah Widget yang ingin ditambahkan pada Section.
  4. showaddelement (Opsional) - Anda hanya dapat memilih "Yes" atau "No". Secara Default, isi dari showaddelement adalah "Yes". Atribut tersebut merupakan elemen untuk menambahkan Widget.
  5. growth (Opsional) - Anda hanya dapat memilih antara "Horizontal" dan "Vertical". Secara Default, isi dari atribut growth adalah "vertical". Atribut tersebut merupakan tata letak dari widget (rata kesamping atau rata kebawah).

Section dapat memilki Widget didalamnya. Tetapi, kita tidak dapat menambahkan Section didalam Section.

Berikut adalah contoh penulisan Section:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
<!-- Konten pada Section -->
</b:section>
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<!-- Konten pada Section -->
</b:section>
<b:section id='footer' class='footer' showaddelement="no">
<!-- Konten pada Section -->
</b:section>

Widget

Section merupakan letak dimana Widget itu berasal. Section hanya sebuah elemen Layout, yang akan ditampilkan pada Browser adalah Widget. Kita dapat memasukkan Widget bawaan atau Widget Custom kedalam Section.

Berikut adalah contoh penulisan Widget:
<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

Atribut pada Widget

  • id (Diperlukan) - Berisi nama yang hanya diperbolehkan berupa huruf atau angka.
  • type (Diperlukan) - Merupakan jenis atau tipe dari Widget. Berikut adalah tipe Widget yang dapat digunakan di Blogger:
    • BlogArchive
    • Blog
    • Feed
    • Header
    • HTML
    • SingleImage
    • LinkList
    • List
    • Logo
    • BlogProfile
    • Navbar
    • VideoBar
    • NewsBar
  • locked (Opsional) - Anda hanya memilih antara "Yes" atau "No". Secara default "No". Jika anda memilih "No", maka Widget akan terkunci, tidak bisa dipindahkan atau dihapus.
  • title (Opsional) - Merupakan atribut untuk menampilkan judul Widget. Jika tidak diisi, maka Title dapat berupa nama dari Tipe Widget.
  • pageType (Opsional) - Dapat berupa nama seperti "main", "archive", "item", dll. Defaultnya adalah "all".
  • mobile (Opsional) - Anda hanya memilih antara "Yes", "No", atau "only". Jika anda memilih "Yes", maka Widget hanya akan tampil pada perangkat Mobile.

Berikut adalah penulisan Section beserta Widgetnya:
<b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
<b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/>
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'/>
<b:widget id='Label1' type='Label' locked='false' />
</b:section>


Selanjutnya: Cara Membuat Blogger Template Bagian 2 - Includable dan Include

1Komentar

  1. Terima kasih admin.. ini yang saya cari dari kemarin2
    Penjelasanya sangat runut dan mudah untuk dipahami

    BalasHapus

Posting Komentar

Sebelumnya Selanjutnya