logo blog
Selamat Datang Di Blog Info 01
Terima kasih atas kesediaan anda berkunjung di Blog Info 01 ini,
Semoga apa yang saya share dan tulis di sini dapat bermanfaat dan memberikan motivasi pada kita semua
untuk terus berkarya dan berbuat sesuatu yang dapat berguna bagi masyarakat, khususnya masyarakat Indonesia.

Pengetahuan Tentang Struktur Template Blog

Info Blog. Sebelum merancang atau mengedit template blog, kita harus tahu tentang struktur atau bagian-bagian dari template blog itu sendiri. Setiap template tidak harus memiliki struktur yang sama. Namun dengan mengetahui struktur dasarnya, diharapkan dapat dengan mudah mendapatkan ide untuk merancang template dan mungkin dapat mengubah dengan struktur yang berbeda sesuai selera kita. 

Beberapa bagian dari struktur template, yang jelas ada pada umumnya terdiri dari: header, navigasi, sidebar, footer, dan bagian posting (section). 

Untuk lebih jelasnya struktur dari template yang lebih kompleks dapat dilihat pada gambar di bawah:

Info Blog, Struktur Template

Bagian dari struktur template tersebut, dapat dijelaskan sebagai berikut:

1. Body : blok paling luar adalah Body dari template (pada dasarnya merupakan seluruh layar dari komputer).

2. Outer-wrapper : bagian ini adalah yang melingkupi template (bagian dari batas luar template). Secara umum, wrapper digunakan untuk menempatkan blok-blok yang lebih kecil yang ada di dalamnya. Blok yang paling umum di dalam Outer-wrapper adalah Header, Content, and Footer.

3. Header : blok ini adalah bagian paling atas dari blok. Di dalam Header dapat juga memiliki sub-blok, misalnya: Header Judul blok, Deskripsi blog, dan lain-lain seperti banner Adsense, menu bar, dan lain-lain. Di luar header atau untuk membungkus semua sub-blok di dalam header biasanya dinamakan Header-wrapper. 

4. Content : di bawah Header adalah Content-wrapper - Pada dasarnya merupakan bagian dari blok yang paling penting. Secara umum bagian wrapper ini di dalamnya terdiri dari blok Sidebar (bisa 1,2 atau lebih sidebar) dan blok Main (yang berisi hasil posting artikel, komentar, atau beberapa ads).

5. Footer : adalah bagian bawah dari template. Seperti di Header, dibutuhkan juga Footer-wrapper yang berisi bagian-bagian dari footer.

6. Main : Main-wrapper adalah bagian luar dari blok Main yang di dalamnya terdapat Content-wrapper. Di dalam Main-wrapper terdapat blok Post, blok Comment, Date Header, dan bagian lain yang dapat dibuat dari opsi Add Page Element.

7. Sidebar : adalah bagian yang dapat berisi semua widget dan biasanya terletak di bagian samping, seperti: About Me, Labels, Archive, Text, HTML, Adsense, etc. Di dalam standard template dari Blogger, biasanya ditemukan 1 sidebar, jika terdapat 1 sidebar maka template terdiri dari 2 kolom, yaitu Main dan Sidebar. Tetapi jumlah sidebar dapat ditambahkan dengan mudah. Yang paling umum adalah memiliki 2 sidebar atau berarti template memiliki 3 kolom. Dengan mengikuti seri tutorial ini diharapkan, nantinya kita dapat mengerti struktur dari template dan dengan mudah menambah atau memindah sidebar ke kiri atau kanan.

8. Blog Post : blok ini berisi bagian yang paling penting, seperti Posts Titles (judul artikel), Post (artikel), Post Author (Penulis artikel), Labels(label), dan lain-lain.


Pada dasarnya sebuah template yang diusung blogger semuanya merupakan kumpulan dari beberapa widget. Untuk membuktikannya silahkan anda membuka blogger anda, kemudian menuju tata letak. Itu semua merupakan kumpulan widget yang membangun sebuah blog dengan platform blogger. Mulai dari header, body, sidebar hingga footernya pun menggunakan sebuah widget.

Berikut ini merupakan kerangka kode-kode html yang membangun sebuah blog ataupun website :

        <html>
          <head>
            <title>Judul Blog</title>
          </head>
          <body>
          </body>
        </html>

Dari struktur html yang sederhana ini kemudian dikembangkan hingga terbentuklah sebuah website. Oke sekarang kita langsung menuju ke topik utama kita.


Struktur Template Blogger

Untuk menjelaskan struktur bogger kita akan memulainya dari struktur yang paling atas. Hal yang paling istimewa dari blogger adalah kita harus mendeklarasikan XML (eXtensible Markup Language). Untuk deklarasi XML pada blogger bisa kita lihat pada bagian template paling atas. Berikut deklarasi xml bawaan blogger.

<?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'>


Element Head

Pada element head terdapat 3 element penting yakni untuk penempatan tag meta, Javascript maupun CSS yang mepercantik template nantinya.


1. Tag Meta

Berikut bentuk tag meta bawaan template blogger.

        <meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>     <b:include data='blog' name='all-head-content'/>     <title><data:blog.pageTitle/></title>

Nah terlihat pada element di atas bahwa kita mendeklarasikan tag meta all-head-content. Artinya disini kita memakai tag meta otomatis. Jika kita urai lagi tag meta tersebut akan jadi seperti ini :

        <meta content='blogger' name='generator'/>     <link href='http://sinaubvo.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>     <link href='http://sinaubvo.blogspot.com/' rel='canonical'/>     <link rel="alternate" type="application/atom+xml" title="titleblog - Atom" href="http://alamatblog.blogspot.com/feeds/posts/default" />     <link rel="alternate" type="application/rss+xml" title="titleblog - RSS" href="http://alamatblog.blogspot.com/feeds/posts/default?alt=rss" />     <link rel="service.post" type="application/atom+xml" title="sinau - Atom" href="http://www.blogger.com/feeds/2782597362504709953/posts/default" />     <link rel="openid.server" href="http://www.blogger.com/openid-server.g" />     <link rel="openid.delegate" href="http://alamatblog.blogspot.com/" />

Wah banyak juga ya, hehe. Untuk pengoptimalan tag meta insyaallah nanti akan saya bahas pada artikel selanjutnya.

Selain deklarasi all-head-content kita juga melihat deklarasi title blog kita. Inilah elemen yang mendeklarasikan judul blog : <title><data:blog.pageTitle/></title>


2. CSS (Cascading Style Sheet)

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman menurut wikipedia.org. Secara gampangnya CSS merupakan daging yang membentuk tubuh, jadi kurus maupun gemuk yang mengatur adalah CSS. Berikut contoh CSS pada template standart :

        <b:skin>     body {       font: $(body.font);       color: $(body.text.color);       background: $(body.background);       padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);       $(body.background.override)     }          html body $(page.width.selector) {       min-width: 0;       max-width: 100%;       width: $(page.width);     }     </b:skin>


3. Javascript

Nah selain CSS dan tag meta, biasanya pada element head juga dijadikan tempat untuk meletakkan javascript. Berikut salah satu contoh java script yang biasanya diletakkan diatas head.

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js?ver=1.0"></script>

Nah script diatas dinamakan jQuery dan biasanya digunakan untuk menjalankan back to top, dropdown menu dll. Sebenarnya kita bisa meletakkan script pada body, namun ada script – script tertentu yang tidak bisa kita masukkan kedalam element body dan mau tidak mau harus kita tempatkan pada element head.


Elemen Body

Pada element body inilah kerangka dan struktur template blog dibentuk. Ibarat kata elemen ini yang membentuk rangka template. Ada banyak sekali element – elemet yang ada di dalam body. Seperti kerangka manusia pada umumnya, struktur yang membangun body antara lain :


1. Header

Header merupakan komponen paling atas dari sebuah template. Disinilah tempat untuk menaruh judul blog maupun deskripsi blog. Untuk desainer template tingkat lanjut mereka bisa memanfaatkan lahan diheader untuk memasang iklan dan lain-lain. Berikut html sederhana pembangun 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>

Dari susunan html diatas terlihat bahwa header merupakan widget yang dikunci, jadi jika agan lihat pada tata letak header tidak bisa dihapus karena telah dikunci.


2. Navbar

Sebenarnya navbar ini terdapat pada bagian atas juga. Bahkan letaknya diatasnya header, navbar sendiri berfungsi untuk mempermudah kita log out dari blogger maupun ketika mau mengedit ulang template. Namun untuk template yang sudah dimodifikasi biasanya navbar sudah di hidden. Berikut srtuktur navbar yang saya maksudkan :

    <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
    <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
    </b:section>


3. Main Blog

Main atau biasanya kita sebut blog post. Dari penjelasan singkat saja sudah jelas disini tempat dimana postingan kita akan ditamplkan :D. Kerangka pembangun Main (blog posting) sangat banyak mulai dari judul posting, tanggal posting, sampai kotak komentar semuanya ada disini. Kode html pembangung Main blog/ blog posting :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Kalau agan lihat sendiri pasti banyak sekali element pembangun blog post ini.


4. Sidebar

Sidebar itu ibarat tangan manusia. Di element sidebar inilah biasanya orang menempatkan popular post, label, hingga iklan. Kode html pembangun sidebar yaitu :

<b:section class='sidebar' id='sidebar' preferred='yes'/>


5. Footer

Footer merupakan element yang paling bawah pada struktur tempate blogger. Disini orang biasanya menaruh credit templatenya. Kode html pembangun footer yaitu :
<b:section class='footer' id='footer' showaddelement='no'>
; <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

Demikianlah uraian tentang Pengetahuan Struktur Template sebuah blog, semoga bermanfaat sebagai tambahan pengetahuan.
Enter your email address to get update from Blog Info 01.
Print PDF
Next
« Prev Post
Previous
Next Post »

1 komentar:

Salam persahaban...blognya bagus mas.. semangat ngeBLOGnya...

Balas

Silahkan berkomentar demi perkembangan Blog Info 01 ini, berkomentarlah dengan sopan, jagalah sopan santun dan image Blogger yang Positif.
Mohon maaf bilamana terjadi keterlambatan balasan komentar anda.

Copyright © 2015. Blog Info | Blog Info 01 - All Rights Reserved | Template Created by Info Blog Proudly powered by Blogger