loading...

Penyusunan Dasar Template Blogger.com

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.

21 komentar untuk “Penyusunan Dasar Template Blogger.com”

  1. sepertinya memang saya yang ditakdirkan mengisi komentar pertama,hehe..
    sepertinya bisa berlanjut ke tutorial membuat template blog sendiri, atau sudah pernah ditulis?
    ijin berlangganan artikelnya ya..

    BalasHapus
    Balasan
    1. @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,…”
      Untuk 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. :)

      Hapus
    2. kalau memang dalam bentu ebook ada dan terstruktur dengan rapi untuk belajar, tolong saya juga dikirimi ya :-)

      Hapus
    3. @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.

      Hapus
  2. Kalau saya tahu anda butuh "hiburan" mungkin nanti saya akan sedikit memberikan humor di kotak komentar, hehe..
    Kalau 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..

    BalasHapus
    Balasan
    1. @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.

      Hapus
    2. insya Allah kan janji seorang muslim, jadi pasti dibuatin, kecuali Allah tidak menghendaki,hehe..

      ganbatte kudasai!!
      saya tunggu infonya, goshinsetsu ni arigatou.

      Hapus
    3. Ganbattemasu!! you're welcome :)

      Hapus
  3. Hmm.. kalo untuk website resmi gimana ya gan?

    BalasHapus
    Balasan
    1. @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.

      Hapus
  4. informasi yang sangat menarik,

    tapi 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

    BalasHapus
    Balasan
    1. @Andie Shinigami — Posting ini tidak ada hubungannya dengan SERP, hanya sebagai pengetahuan tentang penyusunan dasar template di Blogger™.

      Hapus
  5. gan, sangat mantap postngannya, apalagi bila telah tersedia ebooknnya, ya pastinya akan sangat membantu bagi para blogger . . .

    BalasHapus
  6. bisa dijadikan referensi nih, terima kasih teman :)

    BalasHapus
  7. bermanfaat sekali, disertai ebook jadi makin menarik aja nih

    BalasHapus
  8. kalo ebook nya beneran gratis asik nih

    BalasHapus
  9. wah makasih nih mas mau berbagi dengan blogger newbie kyak ane..:)

    BalasHapus
  10. terima kasih mas skg saya baru tahu.... :)

    BalasHapus
  11. sudah lama tidak berkunjung, blog ini memang mantap gan, isinya benar-benar berbobot, keep poting. :D

    BalasHapus