KomentarSekarang kita akan langsung praktek. Sebaiknya Anda mengikuti tutorial di bawah sambil mempraktekkannya. Buatlah blog baru yang khusus digunakan untuk belajar, jangan gunakan blog utama Anda.
Silahkan hapus seluruh kode template Anda sebelumnya dengan cara seleksi semua kode (Ctrl+A), kemudian tekan Delete atau Backspace untuk menghapusnya.
Membuat Struktur XML dan HTML
Silahkan copy dan paste kode di bawah ini ke dalam Template Editor, kemudian pilih Save Theme untuk menyimpannya.
<?xml
version="1.0" encoding="UTF-8" ?>
<!DOCTYPE
html>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
Apa yang terjadi? Error!
There should be one and only one skin in the theme, and we found: 0
Perhatikan kata skin yang saya cetak tebal. Jika diterjemahkan artinya kulit, tetapi dalam kasus ini berarti tampilan. Anda tahu kan siapa yang bertanggung jawab mengatur tampilan?
Error di atas muncul karena 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 di antara tag b:skin dan penutupnya.
<b:skin><![CDATA[
/*CSS
di sini...*/
]]></b:skin>
1.
2.
3.
2.
3.
Sekarang coba 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: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif;
font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a
{color: #3094db;}
]]></b:skin>
</head>
<body>
</body>
</HTML>
Apa yang terjadi? Error lagi!
We did not find any section in your theme. A theme must have at least one b:section tag.
Perhatikan kata section yang tercetak tebal. Error di atas muncul karena kita belum menampilkan apapun di dalam blog kita. CSS di atas hanya disimpan di dalam memori head, belum ditampilkan.
Ingat bahwa untuk menampilkan suatu fungsi, maka fungsi tersebut harus dipanggil terlebih dahulu. Untuk memanggil fungsi salah satunya dilakukan menggunakan tag b:section.
Memanggil Bagian Posting
Contoh tag b:section untuk menampilkan bagian posting.
<b:section
class='main' id='main'>
<b:widget
id='Blog1'
locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
1.
2.
3.
2.
3.
Sekarang masukkan 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: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif;
font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a
{color: #3094db;}
]]></b:skin>
</head>
<body>
<b:section
class='main' id='main'>
<b:widget
id='Blog1'
locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</body>
</HTML>
Berhasil! Kali ini tidak ada error yang muncul.
Sekarang coba lihat tampilan blog Anda dengan memilih View Blog.
Seharusnya tampilan sementara blog Anda akan seperti gambar di bawah ini.
Perhatikan bagian tab browser yang Anda gunakan untuk membuka blog Anda. Di situ tertera alamat blog Anda, bukan? Padahal seharusnya judul blog.
Menambah Tag Title
Cara membuat judul blog kita muncul pada tab browser adalah dengan menyisipkan tag title berikut.
<title><data:blog.title/></title>
1.
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: #cab894;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif;
font-size: 15px; color:#3094db;}
a:hover {color: #4d4544;}
a
{color: #3094db;}
]]></b:skin>
</head>
<body>
<b:section
class='main' id='main'>
<b:widget
id='Blog1'
locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</body>
</HTML>
Lihat kembali blog Anda, harusnya sudah seperti gambar di bawah ini.
Penggunaan tag b:skin ternyata telah diatur untuk memuat CSS dasar (bundle.css) yang dihosting di blogger.com (tidak ditanam langsung pada Template Editor), yang menyebabkan bertambah lamanya waktu loading blog.
Sampai disini apakah Anda sudah siap untuk membuat template blog Anda sendiri?
<HTML>
<head>
</head>
<body>
</body>
</HTML>