Di blogger ada beberapa elemen dengan kata kunci title.
Title berarti judul... kita tahu bahwa judul adalah elemen penting yang biasanya berada di paling awal atau paling atas.
Judul di Blogger meliputi judul blog dan judul halaman.
Yang akan dibahas kali ini adalah cara menampilkan judul pada tab browser.
Di sesi sebelumnya kita telah berhasil membuat kerangka dasar template blogger yang memiliki output kurang lebih seperti gambar di bawah.
Bagi yang belum tahu, artikel ini adalah sesi lanjutan dari tutorial membuat template blog sendiri.
Seperti yang sudah kami katakan, bahwa kita akan mengerjakan dari elemen paling atas.
Fokus pada tulisan di tab browser:
Pada tab browser tersebut tampil tulisan berupa alamat blog seperti blablabla.blogspot.com.
Terasa aneh bukan?
Yap... karena seharusnya yang tampil adalah judul baik judul blog ataupun judul halaman.
Untuk itu kali ini kita akan mencoba menampilkan judul pada tab browser sesuai halaman yang sedang dibuka.
Tag Title
Di struktur elemen HTML ada tag khusus yang berfungsi menampilkan judul. Kodenya seperti berikut:
<title> JUDUL </title>Tag title tersebut diletakkan di dalam elemen head.
Dan perlu kalian tahu, selain tampil di tab browser, judul yang ada di dalam tag <title>...</title> juga akan muncul di mesin pencarian seperti Google.
Maka dari itu, bagian ini juga termasuk ke dalam SEO (Search Engine Optimization).
Cara Menampilkan Judul Blog di Browser
Jika hanya menampilkan saja sebenarnya cukup dengan tag title di atas diisi dengan judul blog kamu.
Contoh:
<title>Starting Template</title>Coba tambahkan tepat di bawah tag <head> lalu simpan template.
Buka blog-mu dan lihat perubahannya pada tab browser.
Gimana jika ubah nama blog-nya? misal saya ubah nama blognya jadi "template baru" melalui pengaturan blogger.
Coba refresh blognya dan ternyata judul yang ada di tab browser masih sama seperti sebelumnya.
Hal tersebut karena kita baru menambahkan judul secara statis.
Untuk mengubahnya menjadi dinamis kita perlu mengambil data judul dari blogger menggunakan XML.
Ada beberapa kode untuk memanggil judul secara dinamis. Karena tutorial ini hanya ingin menampilkan secara sederhana maka kita bahas 1 cara saja.
Di template blogger versi 3 (terbaru) secara default kodenya seperti berikut:
<title><data:view.title.escaped/></title>Kode di atas asal menghasilan tampilan judul dinamis seperti di bawah.
- Halaman beranda: Judul Blog
- Halaman artikel: Judul Artikel
- Halaman statis: Judul Halaman Statis
Buka kode editormu dan tambahkan kode di atas tadi di dalam tag head, menggantikan judul statis yang sudah kamu tambahkan sebelumnya.
Copaskan ke edit HTML template blogger lalu save dan lihat perubahan pada blog-mu.
Sekarang judul pada tab mengikuti nama blognya.
Coba saya kembalikan nama blog menjadi "Starting Template".
Dan hasilnya menjadi seperti ini.
Materi lanjut tentang tag title pada blogger akan kami bahas di artikel lain.
Untuk pogress membuat template blog dari nol cukup sampai segini dulu.
Silahkan lanjut di sesi berikutnya.