Template adalah komponen penting bagi seorang blogger. Template yang bagus adalah template yang layoutnya tersusun rapi, teksnya dapat dibaca dengan mudah dan jelas, serta hal-hal lainnya (silakan ditambahkan sendiri). Dalam kesempatan kali ini, kita akan belajar membuat template blogspot mulai dari nol. Sebelum membuat template-nya, ada beberapa hal yang diperlukan:
  • Peralatan:
    1. Web browser (harus ada)
    2. Akun Blogspot (harus ada)
  • Bahan:
    1. HTML (harus paham)
    2. CSS (sebaiknya paham)
Dalam membuat template blogspot, ada beberapa aturan dasar yang harus ditaati, dan jika aturan dasar tersebut diabaikan, maka yang akan terjadi adalah template error dan tidak bisa disimpan. Berikut ini adalah empat aturan dasar yang harus ditaati :
  1. Menggunakan tag XML
    Karena format template blogspot adalah XML, maka dalam koding template-nya harus ada tag XML. Tag XML berfungsi untuk memberitahu web browser bahwa koding template ini merupakan XML. Namun jika kamu tidak menyisipkan tag XML di dalam template, maka secara otomatis blogspot yang akan menyisipkannya. Berikut ini tag XML yang bisa dipakai :

    <?xml version="1.0" encoding="UTF-8" ?>

  2. Harus ada dan harus hanya ada satu tag skin
    Tag skin di sini berfungsi sebagai pengganti tag style (<style>). Tag style berguna untuk memberi tahu web browser bahwa koding CSS ada di dalamnya, di dalam tag style. Penyisipan tag skin sama seperti tag style, yaitu di dalam tag head (<head>). Tag skin yang digunakan di template blogspot harus seperti di bawah ini :

    <b:skin><![CDATA[ ]]></b:skin>

    3. Kesalahan yang muncul jika tag skin tidak disisipkan ke dalam template:
    There should be one and only one skin in the template, and we found: 0

  3. Harus ada minimal satu tag section
    4. Tag section hampir sama fungsinya dengan tag div (<div>). Di tag section ini, kamu bisa mengetik apa pun yang ingin kamu tampilkan di halaman blog kamu. Tag section ini disisipkan di dalam tag body (<body>). Tag section harus diketik seperti ini :

    <b:section/>

    Jika tidak ada satu tag section di template-nya, maka akan muncul pemberitahuan seperti ini:
    We did not find any section in your template. A template must have at least one b:section tag.

  4. Salah satu tag setion harus memiliki atribut id
    Masih berkaitan dengan tag section di atas. Atribut id (identitas) ini digunakan untuk memanggil style dan menerapkan style tersebut pada tag section. Dalam hal ini, minimal harus ada satu tag section yang memiliki atribut id. Untuk nama id terserah pada kamu, mau diberi nama apa. Contoh tag section yang beratribut id :

    <b:section id="nama_id" />

    Kesalahan karena tidak ada ada tag section yang ber-id, maka akan muncul pemberi tahuan seperti ini:
    One of the sections is missing the required id attribute. Every section should have a unique id.
Dengan mematuhi empat syarat ini, maka, template kamu sudah bisa disimpan dan dilihat di halaman awal blogmu. Aturan membuat template di atas dapat diringkas sebagai berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
   <b:skin><![CDATA[ ]]></b:skin>
</head>
<body>
   <b:section id='nama_id'/>
</body>
</html>

Gambar di bawah tersebut adalah koding dan tampilan yang muncul jika koding diatas disimpan sebagai template blogspot. Gambar blank page.


Belum percaya? cobalah.

Jadi, jika kamu sudah punya koding template dengan format html. Silakan masukkan ke dalam koding di atas. Masukkan style (CSS)-nya ke dalam <b:skin><![CDATA[ style (CSS) ]]></b:skin>dan kontennya ke dalam <body> konten </body>.

Di bawah ini adalah contoh sederhananya:

<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
  <b:skin><![CDATA[
    body {
    margin: 0 auto;
    background-image: linear-gradient(lightblue 10%, white 80%, darkgreen 4%);
    height: 100vh;
    }
  ]]></b:skin>
</head>
<body>
  <b:section id='nama_id'/>
</body>
</html>

Tampilan dari koding di atas:



Sekian, terima kasih.
Semoga bermanfaat.
eru hs

Tidak ada komentar:

Posting Komentar

Ini adalah pesan formulir komentar

Langganan: Posting Komentar (Atom)