Sebenarnya saya agak bingung juga nih menentukan pembahasan mana yang akan saya jelaskan lebih dulu hari ini. Setelah di episode sebelumnya kita udah ngebahas tentang Dua Elemen Utama dalam Template Blogger dan Penggunaan Elemen Head dan Body. Membuat Artikel #Tutorial begini memang tidak seenak-enaknya seperti ketika membuat Artikel #Cerita. Setidaknya saya harus paham betul bagaimana jika saya berada di posisi Anda sekarang.  Mungkin pun Anda sudah merasa tidak sabar untuk ingin cepat-cepat bisa menyelesaikan tutorial ini.  Nah, disisi itu jadinya saya perlu berpikir gimana supaya mempermudah dan mempersingkat langkah-langkahnya. Ada saran? -_-“

Pembahasan kali ini mungkin sudah lumayan banyak dan sering muncul dimana-mana (kalangan pecinta web). Makanya saya bingung apa perlu saya bahas lagi atau tidak? Tapi saya rasa topik ini memang lumayan penting juga untuk Anda ketahui. Uhm.. Kalau gitu untuk Anda yang tertarik mau mengetahuinya secara lengkap, saya referensikan baca di halaman ini saja Macam-macam Elemen Tag HTML dan Macam-macam Atribut Elemen HTML. Atau pendahuluannya baca Struktur Utama dalam HTML. Saya lebih percaya situs besar ketimbang nanti Anda malah kejebak di situs COPAS. Atau ada referensi lain?

Seperti yang juga saya tugaskan kemarin, yaitu mencari beberapa macam Tag yang terdapat pada Template Blogger Anda. Sudah dikerjakan? Yuuk langsung aja kita bahas sama-sama. Oh yaa, supaya lebih menarik saya akan membahas tentang Tag Blogger saja. Untuk yang macam-macam Tag HTML dasar bisa Anda pelajari sendiri. Gak usah banyak-banyak. Mana yang penting-penting saja dulu dikuasai. Yang perlu kita pahami adalah tag tersebut biasanya dipakai untuk apa. Seperti berikut ini:
tag heading mulai dari <h1>  <h2>  <h3>  <h4>  <h5>  <h6> ,
tag bentuk umum seperti <div>  <span>  <header>  <nav>  <footer>,
tag dalam table <table>  <td>  <tr>  <ul>  <ol>  <li> ,
tag dalam paragrap <p>  <br>  <i>  <u>  <b>  <pre>  <center>  <font> ,
tag formulir <form>  <input>  <button> ,
dsb.

Template Blogger dalam XML dan Hasil Tampilan dalam HTML

tag-html-oleh-browser

Pada prakteknya nanti mungkin kita pertama-tama akan menggunakan tag HTML untuk menyusun tampilan. Baru setelah dirasa pas sesuai dengan keinginan, akan kita rubah dengan menggunakan tag Blogger untuk menyesuaikan dengan database. Template Blogger tidak sama dengan Theme WordPress, kenapa? Karena Blogger memakai format XML dan hanya ada pada satu file saja. Sementara WordPress memakai format PHP dan theme berupa satu folder dengan beberapa file. File tersebut kita katakan sebagai Input lah misalnya.  Nanti ketika diterapkan, toh jadinya akan berupa bahasa HTML juga. Ini kita sebut saja sebagai Output.

Berdasarkan prinsipnya, template (Source Input) akan diterjemahkan dulu oleh CMS untuk menyesuaikan dengan database, baru kemudian diberikan ke browser untuk dibaca sebagai HTML (Source Output) dan ditampilkan menarik sesuai dengan perintah CSS. Kira-kira prosesnya kurang lebih begitu. Anda Paham? Jadi untuk menyusun tampilan dan membuat susunan elemen kita buat saja dulu source seperti output. Setelah itu agar template bisa diterjemahkan CMS kita buat menjadi bentuk Input dalam bahasa defaultnya.

tag-xml-oleh-

Oke, coba buka blog Anda. Lalu klik kanan – pilih Simpan sebagai – pilih Laman Web LengkapSave pada folder Anda. Disini Anda sudah memiliki output tampilan dari template yang Anda gunakan. Lihatlah pasti akan ada beberapa perbedaan jika dibandingkan dengan template sebelum diterapkan di blog.

Penggunaan Tag Blogger pada Template

membuat-tata-letak-dengan-widget-section-

<b:section  id=’sidebar’ class=’sidebar1′ showaddelement=’yes’>
Coba perhatikan gambar! Section ini akan membuat semacam ruang. Bisa kita letakkan sebagai Main dan Sidebar. Kalau mau bikin 3 kolom, buatlah section Sidebar_Left, Main, dan Sidebar_Right. Misal dibawah Anda mau bikin Footer? Silahkan. Dibawah footer ada anaknya Footer1, Footer2, Footer3 juga bisa. Penggunaan ID dan Class bebas. Atribut showaddelement bisa yes atau no. Kalau yes, nanti akan ada tulisan “Tambahkan Widget” di setiap section bar.

format-penulisa-tag-widget-

<b:widget  id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’>
Setelah kita membuat section bar, nanti kita tinggal tambahkan widget yang diinginkan. Kalau kita mau buat widget sendiri yaa gunakan saja HTML/JavaScript. Untuk ID biasanya akan otomatis diisi oleh saat kita menambah widget baru. Kalau Anda mau menambahkan atribut class sebagai kelompok CSS nantinya, iya silahkan. Locked disini berarti widgetnya tidak bisa di-drag (pindah posisi). Valuenya true atau false. Kalau Anda tidak mengisi atribut title, maka judul widget tidak akan muncul. Tag widget ini adalah child dari tag section, maka diluar section tidak bisa digunakan.

<b:includable id=’post’ var=’post’>
Tag ini biasanya akan otomatis muncul di dalam tag widget. Saya asumsikan beberapa tag includable ini berfungsi untuk membuat baris pengaturan pada widget tersebut. Coba Anda buka menu Tata Letak, klik edit pada widget Blog Posts. Maka akan terbuka seperti gambar dibawah ini, kan?

menu-edit-widget--includable-tag

Nah, lalu coba klik juga edit pada widget HTML. Pasti tampilan baris pengaturannya berbeda. Seperti contoh format widget HTML diatas, dapat kita lihat hanya terdapat satu tag includable main disana. Yang didalam tag includable main tersebut, ada <data:title/> dan ada <data:content/>. Kurang lebih seperti itu. Tag includable ini child dari tag widget, hanya bisa tampil setelah ada widget.

<b:include data=’top’ name=’status-message’/>
Tag include seperti ini bisa dikatakan sebagai pemanggil. Atribut name hampir mirip fungsinya seperti atribut href yang valuenya merupakan suatu alamat. Jadi tag ini memerintahkan untuk menambahkan data tertentu.  Value atribut yang digunakan, mestinya berhubungan dengan beberapa tag Blogger lain yang ada pada template atau yang dimengerti oleh sistem Blogger. Untuk beberapa tag include bisa juga tidak digunakan seperti misal <b:include name=’quickedit’/> lebih baik dihapus.

<b:loop values=’data:posts’ var=’post’>
Tag ini fungsinya untuk melakukan perintah pengulangan. Sebagai contoh pada halaman beranda biasa Anda akan melihat beberapa konten artikel sekaligus kan? Seperti pada Beranda Chaidir’s Web disana akan muncul 12 Artikel terbaru. Nah, di dalam source template sebenarnya kita hanya membuat satu kali susunan elemen saja. Lalu tinggal letakkan diantara tag looping ini.

<b:if cond=’data:post.url’>
Pada template Blogger kita akan banyak sekali menggunakan tag jenis ini nantinya. Kalau Anda lihat pada bagian elemen widget Blog saja, pasti banyak dijumpai tag conditional.  Untuk memahami bagaimana cara membacanya silahkan baca dulu Macam-macam Conditional Tag Blogger. Dengan adanya tag ini bisa saja kelihatan dalam satu template terdapat beberapa ID elemen yang sama. Kenapa bisa? Karena bisa jadi yang satu cuman tampil di halaman beranda dan satu lagi di halaman artikel.

<data:post.numComments/>
Kalau yang ini mungkin sudah tahu kan fungsinya untuk apa? Seperti di penjelasan widget diatas, setiap tag berawalan <data: umumnya akan menampilkan isi yang sudah ada di database Blogger. Inilah yang sifatnya variabel. Karena datanya tidak ada pada template kita. Seperti beberapa postingan yang sudah kita tulis, seberapa banyak jumlah komentar, isi dari komentar, dsb. Semua data tersebut mesti dipanggil dengan perintah tag ini.

<link expr:href=’data:blog.homepageUrl + &quot;feeds/posts/default&quot;’ expr:title=’data:blog.title + &quot; – Atom&quot;’ rel=’alternate’ type=’application/atom+xml’/>
Sebenarnya ini bentuk tag HTML biasa. Hanya saja untuk value dari atributnya menggunakan data: maka prinsipnya sama seperti tag data sebelumnya. Cuman lagi pada bagian atribut mesti ditambahkan expr: sebelum nama atributnya.

Contoh sebelum dan sesudah tag ini diterapkan pada template:
<a expr:href=’data:blog.homepageUrl + &quot;p/about.html&quot;’ title=’Profil Admin Selengkapnya’>
<a href=’http://www.chaidir.web.id/p/about.html’ title=’Profil Admin Selengkapnya’>
Dengan menggunakan tag jenis seperti ini, nantinya value atribut akan menyesuaikan dengan data yang ada pada blog.

*****

Oke, cukup sampai disini dulu pembahasan hari ini. Kalau ada penjelasan yang belum dimengerti jangan sungkan untuk meninggalkan pertanyaan di komentar yaa. Atau kalau ternyata ada pembahasan yang kurang pas silahkan ditambahkan saja. Belajar sambil diskusi sambil praktek, pasti lebih menyenangkan. 😀

Saya sarankan, Anda menggunakan satu blog percobaan. Disana silahkan Anda otak-atik templatenya. Cari tahu kalau misalkan pakek tag ini hasilnya gimana. Kalau tag ini dihilangkan gimana. Dan dicoba juga buat perbandingan seperti contoh gambar diatas. Antara source kode HTML yang Anda dapat dari Save As tampilan blog (format .htm .html) dengan source kode yang masih berupa template (format .xml).

Sampai Jumpa! Selamat Mencoba! ^_^