Membangun template Blogger dari awal bukan suatu hal yang sulit. Saya
telah mencari di beberapa artikel dan melakukan banyak googling untuk
mencari tahu bagaimana membangun template blogger secara lengkap. Dan
ternyata itu semua cukup mudah untuk kita lakukan, namun sobat perlu
tahu beberapa hal sebelum melakukannya. Sobat perlu memahami bagaimana
cara kerja sistem blogger yang kita gunakan.
Sebenarnya template blog dengan platform blogger sudah tersedia banyak
sekali di internet. Nah, jika ndak percaya, coba saja lakukan pencarian
dengan kata kunci "template blogger" di Google.
Sobat pasti menemukan ribuan template blogger dengan desain dan fitur
yang berbeda satu sama lain, yang bisa sobat gunakan baik secara gratis
maupun berbayar.
Nah, Jika sudah ada sekian banyak template blog yang bertebaran di
internet dan bahkan dapat diperoleh secara gratis, lalu mengapa harus
susah-susah belajar membuat template blog sendiri? bukankah akan lebih
praktis jika kita menggunakan template yang sudah ada saja?
Iya emang bener. namun, dibandingkan menggunakan template blog orang
lain, saya lebih nyaman dan lebih konsisten melakukan update postingan
ketika menggunakan template blog yang saya buat sendiri.
Belajar secara otodidak memang akan memberikan sobat pengalaman yang luar biasa, tetapi mungkin akan menghabiskan lebih banyak waktu. Belajar kepada seseorang yang memiliki keahlian dan pengalaman akan membuat sobat paham dengan lebih efektif.
Apakah saya harus menjadi master web design?
Pertanyaan diatas tergantung pada keterampilan web development sobat.
Sebenarnya sobat tidak perlu menjadi master dalam desain web. namun,
minimal sobat mengerti beberapa dasar tentang CSS, HTML, JavaScript
& XML. Sobat bisa mempelajari dasar-dasar teknologi tersebut di W3schools.com
Bagaimana sistem Blogger Bekerja?
Ketika
kita mengirimkan kode template XHTML untuk blogger langsung disimpan
dalam database blogger. Nah, Ketika blog tersebut dipanggil melalui
browser, Blogger akan memparsing kode dan mengirimkan kembali dari kode
XML menjadi HTML yang akan ditampilkan oleh browser.
XML
Blog dengan platform Blogger dibangun menggunakan XML. XML merupakan
bahasa markup yang disarankan oleh W3C untuk keperluan pertukran data
antar sistem yang beraneka ragam. sehingga dapat dijalankan pada multi
platform OS seperti windows, linux, macintosh, android, de el el.
Berikut merupakan 2 baris script paling atas pada template blogger yang menunjukan bahwa template tersebut menggunakan XML
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
Pemanggilan fungsi XML dalam template blogger dilakukan menggunakan HTML. Selain itu fungsi XML juga dapat diatur tampilannya menggunakan CSS.
HTML
Struktur HTML sendiri terdiri dari 2 bagian yaitu bagian head dan body.
<html>
<head>
//untuk meta, javascript, css
</head>
<body>
//untuk memanggil fungsi yang telah didefinisikan pada bagian head
</body>
</html>
Bagian head ini berisi pendeklarasian fungsi seperti meta, javascript
dan css. Fungsi ini hanya disimpan saja dalam memori head, dan belum
ditampilkan.
Untuk menampilkan fungsi-fungsi di dalam memori head, dilakukan pemanggilan terhadap fungsi-fungsi tersebut pada bagian body.
CSS
Pada dasarnya sebuah template blogger tersusun dari kumpulan
fungsi-fungsi XML. CSS berfungsi untuk mengatur desain atau tampilan
fungsi-fungsi tersebut.
Di dalam CSS tampilan template blog didefinisikan dalam bentuk nilai yang diapit dalam kurung kurawa "{..}" atau bracket.
Membuat Template Blog Sendiri
Sebaiknya sobat mengikuti langkah demi langkah sambil mempraktekkannya.
Buatlah blog baru yang khusus digunakan untuk belajar, jangan gunakan
blog utama sobat.
Silahkan dihapus dulu seluruh kode template sobat sebelumnya dengan cara
seleksi semua kode (Ctrl+A). lalu tekan delete tuk menghapusnya.
Struktur XML dan HTML
Ketikan kode di bawah ini ke dalam Template editor, kemudian pilih save theme untuk menyimpannyya.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Apa yang terjadi dengan code tersebut setelah di save?? Error!
Perhatikan notif yang muncul, terlihat ada kata skin. Nah, dalam kasus ini berarti tampilan. Sobat tahu kan siapa yang bertanggung jawab mengatur tampilan?
Yups, error yang muncul di sebabkan kita belum mengatur tampilan blog kita. CSS berperan sebagai pengatur tampilan. Jadi solusi untuk error di atas tentu saja adalah dengan menambahkan CSS.
Perhatikan notif yang muncul, terlihat ada kata skin. Nah, dalam kasus ini berarti tampilan. Sobat tahu kan siapa yang bertanggung jawab mengatur tampilan?
Yups, error yang muncul di sebabkan kita belum mengatur tampilan blog kita. CSS berperan sebagai pengatur tampilan. Jadi solusi untuk error di atas tentu saja adalah dengan menambahkan CSS.
Menambahkan CSS
Secara default CSS diletakkan diantara tag b:skin dan penutupnya.
Sekarang sobat letakkan CSS berikut pada bagian head, kemudian coba simpan.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[
body {background-color: #fafafa;}
]]></b:skin>
</head>
<body>
</body>
</html>
Nah, Error lagi kan...
Perhatikan kata section yang ada pada notif tersebut. Error tersebut muncul karena kita belum menampilkan apapun di dalam blog kita. CSS diatas hanya disimpan di dalam memori head, belum ditampilkan.
Ingat, untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Untuk memanggil fungsi salah satunya dilakukan menggunkan tag b:section.
Perhatikan kata section yang ada pada notif tersebut. Error tersebut muncul karena kita belum menampilkan apapun di dalam blog kita. CSS diatas hanya disimpan di dalam memori head, belum ditampilkan.
Ingat, untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Untuk memanggil fungsi salah satunya dilakukan menggunkan tag b:section.
Memanggil bagian Posting
Sekarang kita akan memasukkan tag b:section untuk postingan pada bagian body kemudian simpan.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<b:skin><![CDATA[
body {background-color: #fafafa;}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Content Blog' type='Blog'></b:widget>
</b:section>
</body>
</html>
Berhasill!! Kali ini kita tidak menemukan error yang muncul.
Pada bagian ini terdapat tag b:section dan b:widget, tag b:section sendiri merupakan element layout . di dalamnya terdapat beberapa atribut, nantinya akan diuraikan oleh sistem blogger untuk membuat element. berikut penjelasannya:
- Id - Sebuah nama yang unik, bisa menggunakan huruf dan angka saja,
- class - Nama Class pada umunya seperti 'navbar', 'header', 'main', 'sidebar', dan 'footer'. Jika sobat mengcustom template, nama-nama ini sangat membantu sobat.
- maxwidgets - Jumlah maksimum widget yang dapat ditambahkan di bagian ini.
- showaddelement - Menentukan apakah tab element halaman ada link ' Add a Page Element' pada bagian ini.
Begitu
juga dengan tag b:widget, merupakan data yang akan ditampilkan dari
database. Di dalamnya terdapat beberapa attribut, berikut penjelasannya:
- Id (Required) - masing-maisng widget ID pada template blogger wajib unik dan biasanya berisi huruf dan angka.
- Type (Required) - Ragam type widget sebagai berikut :
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- Linklist
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
- Locked (Optional) - widget yang terkunci tidak dapat dipindahkan atau dihapus dari tab Elemen Halaman. nilai attribut biasanya bernilai 'Yes' atau 'No', dengan nilai default adalah 'No'.
- Title (Optional) -Judul tampilan untuk widget. Jika tidak di tentukan, judul/title default yang akan digunakan seperti 'List1'.
- pageType (Optional) - Attribut bernilai 'All', 'Archive', 'Main', or 'item', dengan nilai default 'All'.
- mobile (Optional) - Atribut bernilai 'yes', 'no', atau 'only' dengan nilai default 'default'. digunakan jikan widget apakah akan ditampilkan pada ponsel atau tidak. Hanya Header, Blog, Profile, PagList, Adsense, Attribution yang tetap tampil untuk versi mobil dimana attribut ini bernilai default.
Seharusnya tampilan sementara blog sobat akan seperti gambar di bawah ini.
Dan perhatikan bagian tab browser yang sobat gunakan untuk membuka blog. Disitu tertera alamat blog sobat kan? padahal seharusnya judul blog.
Menambahkan Tag Title
Cara membuat jugul blog kita agar muncul pada tab browser adalah dengan menyisipkan tag title berikut.
<title><data:blog.title/></title>
Masukkan tag title ke bagian head, kemudian simpan.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.title/></title>
<b:skin><![CDATA[
body {background-color: #fafafa;}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Content Blog' type='Blog'></b:widget>
</b:section>
</body>
</html><
Lihat kembali blog sobat, dan seharusnya sudah tampil judul blog sobat.
Oke, sampai disini apakah sobat sudah siap untuk membuat template blog sendiri? Jika sudah, yuk kita lanjutkan lagi panduan membuat template ini :
Berikutnya : Cara Membuat Blog Valid HTML5
Oke, sampai disini apakah sobat sudah siap untuk membuat template blog sendiri? Jika sudah, yuk kita lanjutkan lagi panduan membuat template ini :
Berikutnya : Cara Membuat Blog Valid HTML5