Setelah Anda mengetahui bahwa untuk Membuat Template Blogger itu kita membutuhkan dua elemen utama yaitu Head dan Body. Selanjutnya Anda juga harus memahami untuk apa mereka digunakan dan apa saja yang akan kita letakkan di dalam tag ini. Bagi Anda yang sudah mengerjakan PR di postingan sebelumnya, yuuk kita bahas sama-sama!

penggunaan-tag-head-body

Apa fungsi dari tag Head?

Pada elemen Head ini kita bisa meletakkan beberapa tag seperti berikut: 

       <title> Judul pada titlebar </title>

        <meta content='keyword blog' name='keyword'/>

        <link href='URL hosting external' rel='jenisnya' />

        <style type='text/css'> 
       berisikan CSS
       </style>

        <script type='text/javascript'>
       berisikan Javascript atau JQUERY
       </script>

Namun pada template (bawaan) bisa juga tidak ada <style> di bagian Head. Karna yang umumnya kita jumpai adalah <b:skin><![CDATA[ tanpa ini malah template tidak akan bisa dijalankan. Walaupun ada cara untuk mengakalinya. Intinya setiap barisan kode yang terdapat didalam tag head ini tidak akan muncul pada tampilan template nantinya. Paham?

Apa fungsi dari tag Body?

Sedangkan pada elemen body disinilah tempat kita menyusun setiap bagian-bagian yang ingin dimunculkan pada template. Untuk membuatnya Anda bisa menggunakan macam-macam tag HTML seperti <div> <span> <p> <ul> <li> <a> <img> <header> <footer> dll.

Tentunya masih banyak lagi yang bisa Anda gunakan.

Itu semua bisa kita atur letak dan susunannya sesuka hati. Juga untuk penamaan selektor ID maupun class nya. Misalnya, bisa saja kita membuat elemen dengan tag berikut: 

<div id='uwakbudi' class='rumah'>
 ....
</div>

Bagaimana cara kerja Template Blogger?

Sebelum berbicara banyak, Anda juga perlu tahu bahwa blogspot itu seperti hosting yang sekaligus sebagai CMS (Content Management System). Jadi setiap data blog kita akan tersimpan di sebuah database milik dengan akun berbeda-beda.

Jadi, setiap Anda menuliskan artikel lewat dashboard , itu datanya nanti akan tersimpan di hosting dan database mereka. Nah, tulisan itu ga akan muncul di blog kita kalau gak dipanggil. Disinilah fungsinya template yang akan mengatur apa-apa saja yang mau dimunculkan.

Bahasa HTML itu sifatnya permanen atau tetap. Jadi kalau kita hanya buat tulisan di bagian body template seperti ini: 

<body>
    <div id='uwakbudi' class='rumah'>
        <h2> JUDUL </h2>
        <p> Aku  lhoh </p>
    </div>
</body>

Selamanya bentuk seperti ini yaa ga akan berubah. (Kecuali Anda merubahnya dari template langsung)

Maka kita perlu menggunakan elemen yang sifatnya variabel. Sehingga konten yang ada nantinya dapat berubah dan bisa ditambahkan lewat menu Dashboard Blogger. Disini lah letak rumitnya membuat sebuah template. Tapi tenang saja, cara mudahnya kita bisa melihat tag variabel apa saja yang sudah ada pada template bawaan . Lalu nanti bisa kita atur di template baru yang mau kita buat.

Beberapa contoh tag Blogger adalah yang penulisannya seperti ini: 

<b:section> 
<b:widget> 
<b:includable> 
<data:post.body/> 
<data:post.title/> 
<data:content/> 
<b:if cond>

dll.
Di tulisan berikutnya nanti mungkin akan kita bahas lebih lanjut tentang ini.

Maka contoh format penulisan HTML yang diatas tadi, harus kita ubah menjadi: 

<body>
    <div id='uwakbudi' class='rumah'>
        <h2><data:post.title/></h2>
        <p><data:post.body/></p>
    </div>
</body>

Dengan bentuk seperti ini, nantinya template akan memanggil database yang ada pada hosting untuk menampilkan Judul dan Tulisan pada blog kita. Kurang lebih, iyaa kira-kira begitulah prosesnya.

Mudah-mudahan Anda sudah mulai semakin paham, bagaimana perbedaan dan penggunaan masing-masing tag diatas. Saya rasa cukup untuk sampai disini dulu pembahasan tentang Penggunaan Tag Head dan Body pada Template Blogger. Nah, tugas Anda sekarang adalah coba silahkan dibaca-baca lagi barisan kode Template Anda tadi. Coba lanjutkan cari tag yang serupa dengan yang udah saya disebutkan diatas. Mana yang Tag HTML umum dan mana yang Tag Blogger. Untuk memudahkan, tekan ctrl + F lalu ketikkan awalannya saja seperti <div atau <data: dst.

Untuk pembahasan berikutnya tentu akan lebih menarik.
Sampai Jumpa!

NEXT!! Episode ke-3
Pengenalan Macam-macam Tag HTML Dasar