Persiapan
- HTML
- CSS (Dasar)
- Javascript (Opsional)
Cara Membuat
Saya menganggap kamu sudah mengetahui dasar HTML dan CSS. Untuk membuat template blogger dari nol kamu akan mengikuti beberapa tahap, sedangkan untuk yang saya bahas kali ini masih hanya dasar.
Pengetahuan Dasar Tag Blogger
Sebelum mengetahui template Anda perlu mengetahui tag dasar terlebih dahulu, berikut yang akan kita pelajari.
Bagian Gaya
<style> /* CSS */ </style>
tetapi dengan <b:skin> /* CSS */ </b:skin>
.Bagian Bagian.
Bagian Bagian ini adalah bagian yang nantinya akan ditempatkan bagian Widget. Berikut adalah contohnya.
<b:section id='main'></b:section>
Mungkin Anda Mungkin Suka?
<b:section id='main'></b:section>
<b:section id='main'></b:section>
Contoh yang benar adalah seperti berikut.
<b:section id='head'></b:section>
<b:section id='main'></b:section>
Dalam bagian bagian kamu bisa menerapkan beberapa atribut dengan berbagai fungsi sebagai berikut.
Atribut | jenis | Fungsi |
id | rangkaian | ID dari bagian, harus unik (wajib) |
max-widgets | boolean | Jumlah widget maksimal yang akan tampil |
class | rangkaian | Kelas yang digunakan |
cond | rangkaian | Untuk menerapkan tag kondisional blogger |
locked | boolean | apakah bagian bisa menambahkan widget atau tidak |
tag | rangkaian | nama tag yang nantinya muncul saat render html |
name | rangkaian | Nama bagian yang akan muncul saat di tata letak |
Contoh penerapan kode
<b:section id='id-main' class='main' name='Main Section' tag='main></b:section>
Akan menghasilkan sebagai berikut.
<main id="id-main" class="main" name="Main Section"></main>
Bagian Widget
Bagian ini nantinya akan merender bagian penting, tipe yang tersedia sama dengan yang bisa kamu temukan di tata letak > tambah widget. Tipe yang tersedia adalah Blog, AdSense, Attribution, BlogArchive, BloggerButton, BlogList, BlogSearch, ContactForm, FeaturedPost, Feed, FollowByEmail, Followers, Header, HTML, Image, Label, LinkList, Navbar, PageList, PopularPosts dll. Bisa membaca dokumentasi lengkap di Blogger Code Gadget Introduction
Selain itu terdapat atribut juga seperti pada bagian Section.
Atribut | jenis | Fungsi |
id | rangkaian | Sebagai identitas , harus unik(wajib) |
type | rangkaian | Tipe yang akan ditampilkan (wajib) |
locked | boolean | apakah widget tidak terkunci atau tidak |
title | rangkaian | Judul widget |
visible | boolean | apakah widget ditampilkan atau ditampilkan |
Untuk menuliskanya sedikit berbeda dengan section pada atribut id, jika di bagian section kita bisa bebas menentukan id namun di bagian widget terbatas dengan tipe widget, contoh penerapan.
<b:widget id='Header1' type='Header'>...</b:widget>
<b:widget id='Header2' type='Header'>...</b:widget>
Dan bagian widget harus bersarang di dalam bagian section. Contoh
<b:section id='head'>
<b:widget id='Header1' type='Header'>...</b:widget>
</b:section>
Mengedit Template
Sekarang kamu masuk Blogger dan pindah menuju bagian tema lalu klk tanda panah ke bawah dan pilih edit html.
Tambah Kode
Setelah masuk ke bagian edit html, sekarang kamu bisa menambahkan tag html mu sendiri. Sekarang tambahkan deklarasi html 5 beserta tagnya.
<!DOCTYPE html>
<html lang='id' b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection'>
<head>
<meta charset="utf-8"/>
<title><data:view.title.escaped/></title>
</head>
<body>
</body>
</html>
</body>
</html>
Pada bagian tag <data:view.title.escaped/>
adalah bagian dari kode blogger yang berfungsi menampilkan judul secara otomatis, jika kamu mengatur judul blog kamu dengan "Template Blogger" maka halaman rumah atau beranda kamu juga berjudul Template Blogger. Ketika berada di halaman postingan maka judul akan berubah sesuai dengan judul postingan.
Disini saya mengatur widget template dan layout ke versi revisi 1.3.0, jadi beberapa tutorial di internet mungkin akan ada yang tidak berfungsi.
Kamu belum bisa menyimpan template karena template belum menerapkan skin, section dan widget apapun.
Sekarang tambahkan skin pada bagian kepala
<b:skin version='1.3.0'><![CDATA[/* CSS */</b:skin>
Sehingga hasil akhir seperti berikut.
Sekarang tambahkan bagian header, main dan side.
<header>
<b:section class='container' id='head'>
</b:section>
</header>
<div class='container'>
<main>
<b:section id='main-section'>
</b:section>
</main>
<aside>
<b:section id='aside'>
</b:section>
</aside>
</div>
Tambahkan widget didalam bagian seperti berikut.
<b:widget id='Header1' type='Header'/>
Tambahkan juga widget Blog pada bagian utama.
<b:widget id='Blog1' type='Blog'/>
Kamu juga bisa menambahkan widget pada bagian samping, dan jika kamu mengaktifkan tag widget dengan />
maka kode akan otomatis dilengkapi ketika kita menyimpan template. Kode akhir dari template sebagai berikut.
<!DOCTYPE html>
<html lang='id' b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection'>
<head>
<meta charset="utf-8"/>
<title><data:view.title.escaped/></title>
<b:skin><![CDATA[/*CSS*/]]></b:skin>
</head>
<body>
<header>
<b:section class='container' id='head'>
<b:widget id='Header1' type='Header'/>
</b:section>
</header>
<div class='container'>
<main>
<b:section id='main-section'>
<b:widget id='Blog1' type='Blog'/>
</b:section>
</main>
<aside>
<b:section id='aside'>
</b:section>
</aside>
</div>
</body>
</html>
Silahkan simpan template dan reload halaman untuk melihat kode yang sudah lengkap. Sekarang kamu bisa mengubahnya sesuka hati.
Akhir Kata
Sekarang kamu siap untuk membuat template sendiri, silahkan lakukan percobaan yang banyak karena biasanya cukup membuat pusing ketika memahami tag blogger. Sebagai referensi kamu bisa mengunjungi Blogger Code . Mohon maaf bila terdapat kesalahan, karena saya juga masih belajar.