Tuesday, January 09, 2018

Belajar Memahami Struktur Template Blogger

Belajar Memahami Struktur Template Blogger

Tags

Bagian struktur template blogger
Template

Apa kabar sobat blogger kali ini kita akan mengulas tentang template. Sebagai blogger kita harus paham minimal tau tentang bagian dari template blog. Tujuanya supaya kita lebih mudah dalam mengedit atau redesign.

Menambahkan mengurangi bahkan merubah tampilan secara keseluruhan. Template merupakan bagian terpenting dari suatu blog (web log) atau website. Tanpa template tampilanya akan acak-acakan. Saya akan mengulas sesuai dengan pengalaman pribadi selama nge blog.

Sebelum ke pokok pembahasan perlu di ketahui dulu setiap penyedia layanan blog biasanya menggunakan kode yang berbeda beda. Misalnya antara layanan blogger dan wordpress secara teknis kodenya berbeda. Kali ini kita fokus saja membahas layanan blog dari google yaitu blogger.

Struktur dari blogger secara garis besar terdiri dari enam bagian.
  1. Body keseluruhan dari bagian template.
  2. Outher tempat terletaknya header, main wrapper, sidebar dan footer.
  3. Header tempat keberadaan judul yang mewakili blog kita.
  4. Main tempat tulisan blog kita di tampilkan.
  5. Sidebar merupakan tempat terdapatnya winget contoh winget sosial media.
  6. Footer tempat terdapatnya hak cipta dari blog atau template yang di pakai.

Lebih jelasnya lihat gambar dibawah

Memahami Struktur Template Blogger
Struktur Blogger

Sedangkang pada struktur file xml dari template juga terdapat 6 bagian penting. Struktur xml inilah yang akan jadi pedoman kita dalam redesign atau edit template nantinya. Untuk lebih jelasnya silahkan di simak paragraf berikut.

1. Bagian DOKUMENT baku dari xml bagian ini sudah menjadi ketetapan dari kode template. Posisinya biasanya berada paling atas dari kode xml template. Tidak boleh di rubah contoh kodenya sebagai berikut.

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

2. HEAD tempat menyimpan dan menampilkan informasi tertentu berupa desainer dan layout CSS template. Pada head terdapat tiga elemen penting yaitu javascript, css, dan kode meta tag. Contoh kode sebagai berikut.

<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.title/></title>
    .............
    .............
    .............
 </head>

3. Dokumen DESIGN template bagian ini berisi tentang hak cipta template dan tanggal pembuatan template. Contoh kode sebagai berikut.

/* ****************
Name              : Rancax Theme
Version           : 6.0
Designer          : Rancax
Published         : https://www.rancax.com
Theme Published   : 7-01-2018
Theme Update      : -
License           : Premium
*******************

4. Bagian LAYOUT template berada tepat di bawah dokumen design pada bagian ini kita boleh memodifikasi secara bebas. Bagian ini biasanya di tandai dengan kode sebagai berikut.

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/
****************
Name              : Rancax Theme
Version           : 6.0
Designer          : Rancax
Published         : https://www.rancax.com
Theme Published   : 7-01-2018
Theme Update      : -
License           : Premium
*******************
KODE LAYOUT TEMPLATE ADA DISINI

]]></b:skin>

5. Bagian TAG BODY fungsinya sebagai pembatas antara isi template dengan layout CSS template.

<body>
.........................
........................
    <!-- ISI TEMPLATE DISINI -->
........................
........................
    </body>

6. Bagian ISI dari template, pada bagian ini terdapat informasi HTML dari template. Contoh kodenya seperti berikut.

<body>
    <b:section class='header' id='header' maxwidgets='1' showaddelemenet='no'>
    <b:widget id='Header1' locked='true' title='titl blog (Header)' type='Header'/>
    </b:section>
    <b:section class='main' id='main'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </body>

Di saat mengedit template misalnya menambahkan winget relatedpost dengan label. Kita akan diminta menempatkan tiga jenis kode kedalam template blog. Posisi penempatan diantaranya.

1.Untuk kode CSS di tempatkan diatas kode
2. Untuk penempatan javascript biasanya ditempatkan sebelum kode
3. Untuk penempatan isi atau kode pemanggil CSS dan JavaScript biasanya pada sidebar warapper.

Berikut struktur dasar dari xml template blogger secara umum.

<html>
<head>
Tempat meletakan kode font script dan meta tag content di sini
<b:skin><![CDATA[
Tempat kode CSS / Skin di sini
]]></b:skin>
</head>
<body>
Tempat untuk meletakan content header, body, main, sidebar dan footer di sini
</body>
</html>

Begitulah beberapa pemahaman dasar dari template blogger. Memang terlihat agak rumit ya sobat blogger. Tapi kalo ada niat belajar sedikit demi sedikit kita akan mengerti. Yang penting di praktekan, jika ada yang kurang paham tanya pada yang lebih tau. Maka dari kesalahan itulah kita akan mengerti bahwa pengalaman adalah guru terbaik dalam hidup.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon