Pengetahuan wacana struktur dasar template blog ini sanggup kita jadikan bekal untuk memodifikasi tampilan-tampilan blog yang kita miliki biar sanggup lebih user friendly.
Pada dasarnya sebuah template yang diusung blogger semuanya merupakan kumpulan dari beberapa widget. Untuk membuktikannya silahkan anda membuka blogger anda, lalu 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 lalu dikembangkan hingga terbentuklah sebuah website. Oke kini kita eksklusif 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 ialah kita harus mendeklarasikan XML (eXtensible Markup Language). Untuk deklarasi XML pada blogger sanggup kita lihat pada bab 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 ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' 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 menggunakan tag meta otomatis. Jika kita urai lagi tag meta tersebut akan jadi mirip ini :
<meta content='blogger' name='generator' /> <link href='http://www.arlinadzgn.com/favicon.ico' rel='icon' type='image/x-icon' /> <link href='http://www.arlinadzgn.com/' rel='canonical' /> <link rel="alternate" type="application/atom+xml" title="Struktur Dasar Template Blogger" href="http://www.arlinadzgn.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Struktur Dasar Template Blogger" href="http://www.arlinadzgn.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Struktur Dasar Template Blogger" 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.arlinadzgn.com/" />Wah banyak juga ya, hehe. Untuk pengoptimalan tag meta insyaallah nanti akan aku 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 hukum untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman berdasarkan wikipedia.org. Secara gampangnya CSS merupakan daging yang membentuk tubuh, jadi kurus maupun gemuk yang mengatur ialah CSS. Berikut teladan 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 daerah untuk meletakkan javascript. Berikut salah satu teladan 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 dipakai untuk menjalankan back to top, dropdown sajian dll. Sebenarnya kita sanggup meletakkan script pada body, namun ada script – script tertentu yang tidak sanggup 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 berbagai element – elemet yang ada didalam body. Seperti kerangka insan pada umumnya, struktur yang membangun body antara lain :
1. Header
Header merupakan komponen paling atas dari sebuah template. Disinilah daerah untuk menaruh judul blog maupun deskripsi blog. Untuk desainer template tingkat lanjut mereka sanggup 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 jikalau agan lihat pada tata letak header tidak sanggup dihapus dikarenakan telah dikunci.
2. Navbar
Sebenarnya navbar ini terdapat pada bab atas juga. Bahkan letaknya diatasnya header, navbar sendiri berfungsi untuk mempermudah kita log out dari blogger maupun dikala mau mengedit ulang template. Namun untuk template yang sudah dimodifikasi biasanya navbar sudah di hidden. Berikut srtuktur navbar yang aku 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 klarifikasi singkat saja sudah terang disini daerah dimana postingan kita akan ditamplkan :D. Kerangka pembangun Main (blog posting) sangat banyak mulai dari judul posting, tanggal posting, hingga 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 niscaya berbagai element pembangun blog post ini.
4. Sidebar
Sidebar itu menyerupai 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>Demikian uraian wacana Struktur Dasar Template Blogger, semoga bermanfaat sebagai pelengkap pengetahuan.