Wajib Pelajari Struktur Dasar Template Blogger - Marzep Design

Wajib Pelajari Struktur Dasar Template Blogger


Struktur Dasar Template Blogger – Perlu kita ketahui sebagai blogger, kita perlu paham betul mengenai Struktur Dasar Template Blogger, yang pada dasarnya merupakan pengetahuan fundamental bagi seorang blogger agar dapat sukses mengembangkan blognya di masa-masa yang akan datang.

Mungkin Masih banyak blogger yang tidak paham terhadap template blogger. Padaha itu adalah hal yang sering di perhatikan setiap blogger.

Wajib Pelajari Struktur Dasar Template Blogger

Struktur Dasar Template Blogger

Jika kita sebagai blogger paham betul terhadap struktur dasar template blog. Kita dapat jadikan bekal untuk memodifikasi tampilan-tampilan blog yang kita miliki agar dapat lebih user friendly, tanpak perlu menggunakan jasa redesign dari orang lain. Jika sangat paham terhada coding dan keseluruhan struktur template blog Kita dapat memodifikasi sesuai ke inginan kita atau bahkan kita dapat membuat template sendiri.

Pada dasarnya sebuah template blog semuanya merupakan kumpulan dari beberapa widget yang di gabungkan dengan trik khusus, seperti yang saya katahan di atas kita harus paham terhadap coding dan struktur template agar bisa memodif atau membuat sebuah template.

Beberapa widget tersebut bisa kita lihat di 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.

Jangan jauh jauh dulu kita memahami coding. Kita pahami terlebih dulu struktur dasar template blogger.

Baca Juga: Cara Menggunakan Sublime Text Untuk Belajar Coding

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 dasar html yang sederhana ini kita perlu mengembangkanya atau menambahkan kode kode coding hingga terbentuklah sebuah website. Untuk membentuk sebuah website, kita tidak bisa sembarang memasang karena kita perlu lebih baham tehadap HTML, CSS, JavaScript, PHP dan kode kode pemograman lainnya.

Mempelajari kode tersebut bukan lah hal yang bisa kita pahami dalam satu hari dua hari , tetapi kita bisa sedikit sedikit paham jika sering mengotak atiknya. Tapi sebelum mengotak ngatik perlu kita ketahui struktur dasar template agar bisa lebih paham dan lebih bisa hati hati dalam mengotak ngatik. 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 mempercantik 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 diatas 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://www.marzep.com/favicon.ico' rel='icon' type='image/x-icon' />
<link href='http://www.marzep.com/' rel='canonical' />
<link rel="alternate" type="application/atom+xml" title="titleblog - Atom" href="http://www.marzep.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="titleblog - RSS" href="http://www.marzep.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="sinau - Atom" href="http://www.blogger.com/feeds/12345678910/posts/default" />
<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="http://www.marzep.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. Kalo di ibaratkan CSS seperti daging di tubuh kita dan HTML tulang kita, sehingga dapat membentuk tubuh yang utuh, jadi peran CSS pun kurang lebih seperti ituh. Berikut contoh CSS pada template standard :
<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 di bentuk. Ibarat kata elemen ini yang membentuk rangka template. Ada banyak sekali element – elemet yang ada didalam body. Seperti kerangka manusia pada umumnya, struktur yang membangun body antara lain :

1. Header

Header, seperti yang sobat ketahui 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 dll. 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. 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'/>

Baca Juga: Cara Meningkatkan Trafik Organik Blog

5. Footer

Footer merupakan element yang paling bawah pada atau bisa juga dibilang kaki pada manusia, karena letaknya dibawah struktur tempate blogger. Disini 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>

Bagaimana, itulah Struktur Dasar Template blogger. Sekarang sudah di pahami kan? Baik lah untuk artikel selanjutnya ikuti terus info, tips & trik seputar blogger cuman di marzep.com!

Demikian. Seperti biasa, Semoga bermanfaat… dan Terim kasih…
Sumber Referensi: https://www.arlinadzgn.com/2014/11/struktur-dasar-template-blogger.html

0 Response to "Wajib Pelajari Struktur Dasar Template Blogger"

Post a Comment

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel