Susunan Dasar Template Blogger

Susunan 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 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.

3 Responses to "Susunan Dasar Template Blogger"

  1. Makasih sob, udah berbagi...
    membantu banget, buat yang mau bikin template sendiri

    ReplyDelete
    Replies
    1. cepat kaya

      ,,.,KISAH NYATA ,
      Aslamu alaikum wr wb..Allahu Akbar, Allahu akbar, Allahu akbar
      Bismillahirrahamaninrahim,,senang sekali saya bisa menulis
      dan berbagi kepada teman2 melalui room ini,
      sebelumnya dulu saya adalah seorang pengusaha dibidang property rumah tangga
      dan mencapai kesuksesan yang luar biasa, mobil rumah dan fasilitas lain sudah saya miliki,
      namun namanya cobaan saya sangat percaya kepada semua orang,
      hingga suaatu saat saya ditipu dengan teman saya sendiri dan membawa semua yang saya punya,
      akhirnya saya menaggung utang ke pelanggan saya totalnya 470 juta dan di bank totalnya 800 juta ,
      saya stress dan hamper bunuh diri anak saya 2 orng masih sekolah di smp dan sma,
      istri saya pergi entah kemana dan meninggalkan saya dan anakanaknya ditengah tagihan utang yg menumpuk,
      demi makan sehari hari saya terpaksa jual nasi bungkus keliling dan kue,
      ditengah himpitan ekonomi seperti ini saya bertemu dengan seorang teman
      dan bercerita kepadanya, Alhamdulilah beliau memberikan saran kepada saya.
      dulu katanya dia juga seperti saya stelah bergabung dengan KI KUSUMO hidupnya kembali sukses,
      awalnya saya ragu dan tidak percaya tapi selama satu minggu saya berpikir
      dan melihat langsung hasilnya, `
      saya akhirnya bergabung dan menghubungi KI KUSUMO di No :)-0'8'2-3'3'5'-9'4'7'-8'8'8-:).
      Semua petunjuk AKI saya ikuti dan hanya 3 hari Astagfirullahallazim,
      Alhamdulilah Demi AllAH dan anak saya,
      akhirnya 5M yang saya minta benar benar ada di tangan saya,
      semua utang saya lunas dan sisanya buat modal usaha,
      kini saya kembali sukses terimaksih KI KUSUMO saya tidak akan melupakan jasa AKI.
      JIKA TEMAN TEMAN BERMINAT, YAKIN DAN PERCAYA INSYA ALLAH,
      SAYA SUDAH BUKTIKAN DEMI ALLAH SILAHKAN HUB KI KUSUMO DI :)-0'8'2-3'3'5'-9'4'7'-8'8'8-:)

      ((((((((((((DANA GHAIB)))))))))))))))))

      Pesugihan Instant 5 MILYAR
      Mulai bulan ini (oktober 2015) Kami dari padepokan mengadakan program pesugihan Instant tanpa tumbal,
      serta tanpa resiko. Program ini kami khususkan bagi para pasien yang membutuhan modal usaha yang cukup besar,
      Hutang yang menumpuk (diatas 1 Milyar), Adapun ketentuan mengikuti program ini adalah sebagai berikut :

      Mempunyai Hutang diatas 1 Milyar
      Ingin membuka usaha dengan Modal diatas 1 Milyar
      dll

      Syarat :

      Usia Minimal 21 Tahun
      Berani Ritual (apabila tidak berani, maka bisa diwakilkan kami dan tim)
      Belum pernah melakukan perjanjian pesugihan ditempat lain
      Suci lahir dan batin (wanita tidak boleh mengikuti program ini pada saat datang bulan)
      Harus memiliki Kamar Kosong di rumah anda

      Proses :

      Proses ritual selama 2 hari 2 malam di dalam gua
      Harus siap mental lahir dan batin
      Sanggup Puasa 2 hari 2 malam ( ngebleng)
      Pada malam hari tidak boleh tidur

      Biaya ritual Sebesar 10 Juta dengan rincian sebagai berikut :

      Pengganti tumbal Kambing kendit : 5jt
      Ayam cemani : 2jt
      Minyak Songolangit : 2jt
      bunga, candu, kemenyan, nasi tumpeng, kain kafan dll Sebesar : 1jt

      Prosedur Daftar Ritual ini :

      Kirim Foto anda
      Kirim Data sesuai KTP

      Format : Nama, Alamat, Umur, Nama ibu Kandung, Weton (Hari Lahir), PESUGIHAN 5 MILYAR

      Kirim ke nomor ini : -0'8'2'3'3'5'9'4'7'8'8'8-
      SMS Anda akan Kami balas secepatnya

      Maaf Program ini TERBATAS hanya untuk beberapa Orang saja..

      Delete
  2. terimakasih infonya bermanfaat

    ReplyDelete

Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas).