Persiapan
Sebelum kita mulai ada beberapa hal yang harus anda perhatikan, yaitu:
- Artikel ini panjang banget, jadi mohon bersabar. Ini ujian. :D
- Kita butuh koneksi internet yang stabil buat Trial-Error template blogger yang udah kita bikin
- Blog baru untuk eksperimen. Jangan pake blog utama anda yah. Waspadalah!
- Pengatahuan dasar HTML, CSS, dan Javascript saya pikir mutlak untuk kita pahami
Dan berikut ini beberapa link penting yang bisa kita jadikan panduan untuk mengembangkan template lebih lanjut nantinya.
Pengembangan Layout dan Struktur Dasar
Gambar diatas adalah layout yang akan kita gunakan. Sederhana banget yah. Dan ada beberapa hal yang juga harus diperhatikan dalam struktur dasar template blogger, diantaranya:
- XHTML declaration tag diawal file.
- Element seperti:
<html>,<head>, dan<body>wajib digunakan - Dalam satu template, harus memiliki minimal satu tag
<b:skin>untuk menyimpan kode CSS. - Dalam tag
<body>harus memiliki minimal satu tag<b:section>untuk menampung konten (content-wrapper) seperti header, widget, atau postingan.
Sebelum lanjut, silahkan login ke Blogger. Lalu klik Tema > Edit HTML, lalu hapus semua kode yang ada di halaman tersebut.
Bagian <head>
Kita akan membuat kode untuk tag
Penjelasan kodenya sebagai berikut:Bagian <head>
Kita akan membuat kode untuk tag
<head> yang berisi title, meta, dan hal lain yang dibutuhkan oleh blog kita nantinya. Kodenya sebagai berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Halaman tidak ditemukan loh! | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin>
<![CDATA[
/** CSS **/
]]>
</b:skin>
</head>
- Kode yang diberi warna hijau adalah kode XML declaration tag, pembuka HTML, dan namespace
xmlns:'url', xmlns:b, xmlns:data, dan xmlns:expryang digunakan untuk memanggil fungsi pada server Blogger - Kode yang berwarna biru kita gunakan untuk membuat title yang 'SEO Friendly'
- Kode yang berwarna orange adalah kode untuk memasukan beberapa meta yang ada di blogger, seperti meta description, favicon, dsb.
- Kode yang berwarna merah adalah tempat kita akan menyimpan CSS
Sampai disini bagian kita sudah menyelesaikan bagian
Bagian <header>
<head>. Nanti anda bisa menambahkan meta lain yang anda perlukan. Untuk sekarang kita akan melanjutkan ke bagian <header> terlebih dahulu.Bagian <header>
Dibagian header ini kita akan membuat sebuah section. Section ini akan berisi informasi mengenai judul blog dan deskripsinya. Masukan kode berikut ini dibawah kode sebelumnya.
<body>
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>Bagian <nav>
Untuk navigasi, kita cuman bikin sebuah kolom yang berisi satu section. Nanti pada pengaturan tata letak, kita baru menambahkn widget untuk membuat navigasinya. Dan berikut ini kodenya:
<b:section class='tabs'
id='crosscol' maxwidgets='1'
name='Cross-Column' showaddelement='yes'>
</b:section>Bagian <main>
Sekarang kita akan langsung masuk dulu ke area konten. Anda bisa menambahkan tag
<article> maupun <div> untuk ngebungkus konten dari postingannya. Contoh kodenya sebagai berikut. Dan jangan lupa letakan kode ini dibawah kode sebelumnya.<main>
<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>
</main>Bagian <aside>
Aside atau sidebar akan berisi widget yang akan kita gunakan. Untuk namepsace maxwidgets dikosongkan saja, supaya nanti kita bisa menambahkan widget lebih dari satu. Dan berikut ini kodenya:
<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>Bagian <footer>
Bagian ini biasanya kita isi dengan atribusi maupun kredit. Anda bisa berkreasi lebih jauh nanti disini. Berikut ini contoh kodenya:
<footer>
<div class="copyrights" style="clear: both;">
<div><strong><</strong> coded <strong>></strong> with
<span style="color:#b71c1c;">❤</span>
by <strong>Ganti Dengan Nama Anda</strong></div>
</div>
</footer>
</body>
</html>
Setelah semua bagian kita selesaikan selanjutnya kita akan bermain CSS. Kali ini kita hanya menggunakan vanila CSS alias CSS biasa.
Oh iya jangan di save yah template yang kita bikin tadi. Kalau berhasil nanti tampilannya kurang lebih kayak gini:
