Cara Membuat Blogger Template: Section dan Widget
Mendesain Template atau Tema Blogger tidaklah sesulit yang kalian bayangkan (Jika kalian sudah memahami beberapa hal mengenai HTML dan CSS).
Saya sudah merangkum cara untuk membuat Template atau Tema Blogger dan disini saya juga akan menunjukkan cara mudah untuk dapat dimengerti.
Sebelum melanjutkan, hal pertama yang harus kalian ketahui adalah cara kerja Blogger itu sendiri.
Mendesain atau mengembangkan suatu Template atau Tema Blogger membutuhkan skill atau pengalaman dalam Web Development. Maka dari itu, kalian harus menguasai atau memahami Web Desain. Setidaknya, kalian harus sudah mengerti mengenai HTML, CSS, JavaScript dan XML dasar.
Daftar Isi
Cara Kerja Tema Blogger
Ketika kita meng-Upload atau memasang Template baru pada Blogger. Template tersebut akan masuk kedalam Server Blogger. Ketika Blog kita dikunjungi oleh seseorang, maka Browser akan mengirim Request dan Blogger akan memberikan Output kepada Browser.
Layout Dasar pada Tema Blogger
<?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>
<title>
<data:blog.pageTitle />
</title>
</head>
<body>
<!-- KONTEN -->
</body>
</html>Layout Dasar pada 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 tersebut antara lain seperti xmlns:b, xmlns:data, xmlns:expr berfungsi untuk memberikan kita data dari database Blogger.
Sebelum kita masuk ke tahap selanjutnya, disini saya memiliki sedikit penjelasan tentang Layout serta bagaimana Layout itu terlihat.
Untuk mendesain Layout, kalian dapat membuat gambaran atau membuat sketsa.
Berikut adalah beberapa hal dasar untuk membuat Layout:
- Tentukan dimana letak Menu dan bagaimana Menu tersebut dapat terlihat.
- Tentukan bagaimana dan dimana Postingan akan tampil, apakah terdiri dari 2 kolom atau 3 kolom.
- Tentukan dimana Widget dapat ditampilkan.
Section pada Blogger
Layout pada Template Blogger dapat dibuat dengan menggunakan Section. Section merupakan salah satu lokasi untuk meletakkan elemen Gadget/Widget seperti Header, Footer, Sidebar, dll.
Contoh Penulisan Section
Membuat Section pada Blogger sangatlah mudah. Kita bisa memasukkan Widget kedalam Section, tetapi kita tidak bisa memasukkan elemen HTML lain kedalam Section.
Untuk memasukkan konten pada Section, kita harus menggunakan elemen Widget.
<b:section id='' class='' maxwidgets='' showaddelement=''>
</b:section>Penulisan Section hampir sama dengan penulisan HTML yang memilki atribut. Setiap atribut memilki arti yang berbeda-beda.
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>Atribut pada Section
id(Diperlukan) - Isi dengan ID unik yang hanya diperbolehkan berupa huruf atau angka.class(Opsional) - Isi dengan nama class seperti "navbar", "header", "sidebar", dll.maxwidgets(Opsional) - Jumlah Widget atau Gadget yang ingin ditambahkan pada Section.showaddelement(Opsional) - Kalian hanya dapat mengisinya dengan "Yes" atau "No". Secara Default, niali dari atribut ini adalah "Yes".
Section dapat memilki Widget didalamnya. Tetapi, kita tidak dapat menambahkan Section didalam Section.
Widget pada Blogger
Section merupakan letak dimana Widget itu berasal. Section hanya sebuah elemen Layout dan 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='' title='' type='' />Atribut pada Widget
id(Diperlukan) - Isi dengan ID unik 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.
- LinkList.
- List.
- Logo.
- dll.
locked(Opsional) - Dapat diisi dengan nilai "Yes" atau "No". Secara default "No". Jika kalian mengisi dengan "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.
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>
Penjelasanya sangat runut dan mudah untuk dipahami