CARA MEMBUAT TEMPLATE BLOG ~ Pelajaranku7

Sekarang 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>
1.
2.
3.
4.
5.
6.
7.
8.

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.

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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

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.

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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

Lihat kembali blog Anda, harusnya sudah seperti gambar di bawah ini.

Pelajaranku7

Sabtu, 24 November 2018