Posting ini akan menuturkan tentang beberapa bagian dalam struktur pengkodean dasar template Blogger™, dimana obyek template adalah template Blogger™ yang diakses melalui “Edit HTML”, sehingga opsi Customize dapat diabaikan. Mungkin diterjemahkan dalam bahasa sederhana artinya apabila ingin merubah sesuatu berkenaan struktur pengkodean, maka dilakukan secara manual. Bentuk sederhana HTML pada sebuah situs web atau blog adalah sebagai berikut.
<html>
<head>
<title>Format Sederhana HTML</title>
</head>
<body>
</body>
</html>Ketika kode di atas diaplikasikan pada peramban, maka akan terlihat layar kosong & tab peramban akan menampilkan title. Lebih lanjut, tambahkan baris teks dalam body, contoh: Aku adalah tubuh HTML. Layar peramban akan menambahkan sebuah baris teks sesuai dengan apa yang kita tulis di antara <body> … </body>.
Deklarasi xml (eXtensible Markup Language)
<?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'>Ketika kita ingin memasukkan daerah geografi atau bahasa yang didukung oleh konten dalam tubuh HTML — tidak perlu menambahkan meta — cukup sisipkan tag lang, contoh: lang='id', lang='en', lang='en-us', lang='fr', dan sebagainya.
<html lang='id' 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'>Elemen Head
Head HTML berisi sejumlah markah yang meliputi script, instruksi kepada peramban untuk menemukan stylesheets, memberikan informasi meta, dan lain-lain.
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<data:blog.title/>
<b:else/>
<data:blog.pageName/> | <data:blog.title/>
</b:if>
</title>
<meta content='' name=''/>
<link href='' rel='' type=''/>
<script src='' type=''/>
<b:skin><![CDATA[ /* CSS Anda di sini */
body {
background: #fff;
color: #000;
font: .875em/1.7143em Georgia, Times, "Times New Roman", serif;
text-align: left;
word-spacing: .075em;
}
… dan seterusnya …
]]></b:skin>
</head>Elemen Body
Body HTML merupakan tubuh dari HTML (HyperText Markup Language) yang akan menampilkan bentuk pengkodean pada layar peramban. Sedangkan beberapa elemen yang melingkupinya dapat kita uraikan sebagai berikut.
<body expr:class='"loading" + data:blog.mobileClass'>Navbar
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>Header
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>Main (Posting Blog)
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>Sidebar
<b:section class='sidebar' id='sidebar' preferred='yes'/>Footer
<b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>Dari beberapa markah elemen di atas, biasanya untuk menampilkan halaman posting atau halaman statis pada blog, minimal harus ada elemen widget main (posting blog). Sedangkan yang lain dapat dikustomisasi manual, seperti header dapat saja berisi title serta tagline, fungsi fitur navbar dapat kita matikan, dan lain-lain.
Simpulan
Dengan beberapa ringkasan sederhana di atas, mungkin kita telah dapat menggambarkan bagaimana sebuah blog pada Blogger™ dibentuk. Tinggal menambahkan beberapa selector (id dan/atau class) atau elemen-elemen dalam HTML5 (header, article, aside, footer, dan sebagainya) untuk mengapit elemen widget tersebut serta konfigurasi CSS (Cascading Style Sheets) yang dibutuhkan. Sedangkan isi konten kita upayakan agar tetap memberikan tanda, sehingga lebih bermakna bagi pembacanya.
sepertinya memang saya yang ditakdirkan mengisi komentar pertama,hehe..
BalasHapussepertinya bisa berlanjut ke tutorial membuat template blog sendiri, atau sudah pernah ditulis?
ijin berlangganan artikelnya ya..
@Lizwana — ea… seandainya mereka tahu, kalau saya juga butuh hiburan dan seandainya tahu pula bahwa hampir semua taut komentator pasti saya kunjungi dari kosmetik sampai iklan baris, jual produk kesehatan sampai jual tanah, dari situs web ataublog dengan isi konten sejenis sampai tidak ada hubungannya. Tetapi lebih suka sebagai pembaca yang diam. “Ups,…”
HapusUntuk posting khusus tentang membuat template tidak ada, mungkin nanti pasti akan menuju kesana. Yah, setelah beberapa posting yang terkait dengan pengkodean template, seperti posting ini, responsif desain, dan microdata.
Kebetulan Optimasi Blog memiliki rencana untuk membundel beberapa trik blogger, tips blogging, dan tips seo dalam bentuk ebook, khusus untuk pelanggan (newsletter). Tapi jangan terlalu berharap dulu, nanti malah kecewa. :)
kalau memang dalam bentu ebook ada dan terstruktur dengan rapi untuk belajar, tolong saya juga dikirimi ya :-)
Hapus@ali Febriyanto — Jika email berada dalam daftar subcriber, insyaAllah dapat. Mungkin caranya saya tidak memaksa dengan cara mengirimkan langsung ke email, tetapi pengguna dapat mengunduh melalui fasilitas “google drive“ yang hanya dishare dengan akun email yang terdaftar sampai tanggal penerbitan ebook.
HapusKalau saya tahu anda butuh "hiburan" mungkin nanti saya akan sedikit memberikan humor di kotak komentar, hehe..
BalasHapusKalau saya pribadi lebih suka pembaca yang cerewet, dengan begitu saya tahu ada pembaca yang datang ke blog saya dengan kebutuhannya, dan kecewa dengan "pelayanan" saya yang kurang untuk kemudian saya benahi.
Saya tunggu e-book nya, tapi jangan pake strategi setengah gratis, setengah beli ya..
hehe..
@Liz Wana — :D Versinya nanti full. Intinya ebook khusus untuk pelanggan yang resmi terdaftar sebagai subcriber melalui email. Rencananya berkas akan diupload ke “Google Drive”, sistem sharing. Proyeknya masih digarap, tanpa iklan dan tanpa kata sandi. InsyaAllah.
Hapusinsya Allah kan janji seorang muslim, jadi pasti dibuatin, kecuali Allah tidak menghendaki,hehe..
Hapusganbatte kudasai!!
saya tunggu infonya, goshinsetsu ni arigatou.
Ganbattemasu!! you're welcome :)
HapusHmm.. kalo untuk website resmi gimana ya gan?
BalasHapus@Vendor Tas — Untuk HTML secara umum, mungkin sama. Tinggal memperhatikan markah yang dimasukkan dalam head, elemen-elemen apa saja yang dibentuk dalam tubuh HTML (<body>), sidebar dan footer serta bahasa yang didukungnya.
Hapusinformasi yang sangat menarik,
BalasHapustapi menimbulkan pertanyaan khususnya bagi saya yang masih newbie...
Bagaimana dengan pengaruh terhadap search engine result page ( SERP ) kita..
apakan akan merubah posisi lebih baik atau lebih buruk???
tolong jawabannya gan,
terima kasih
@Andie Shinigami — Posting ini tidak ada hubungannya dengan SERP, hanya sebagai pengetahuan tentang penyusunan dasar template di Blogger™.
Hapusgan, sangat mantap postngannya, apalagi bila telah tersedia ebooknnya, ya pastinya akan sangat membantu bagi para blogger . . .
BalasHapusbisa dijadikan referensi nih, terima kasih teman :)
BalasHapusbermanfaat sekali, disertai ebook jadi makin menarik aja nih
BalasHapuskalo ebook nya beneran gratis asik nih
BalasHapuswah makasih nih mas mau berbagi dengan blogger newbie kyak ane..:)
BalasHapusterima kasih mas skg saya baru tahu.... :)
BalasHapusnice post.... mau coba dulu gan
BalasHapussudah lama tidak berkunjung, blog ini memang mantap gan, isinya benar-benar berbobot, keep poting. :D
BalasHapusBlog ini bagus dan mudah dipahami
BalasHapus