struktur code template blogger lengkap.-saya ucapkan trima kasih atas kunjungannya! dan kali ini saya mau share struktur code yang terdapat pada template blog. struktur code ini adalah hal yang paling utama untuk mendesain template blog sebelum kalian menambahkan script web yang lain. sebenarnya struktur template ini sebuah bekal utama bagi seorang blogger untuk meraih kesuksesan dalam dunia bloging.
kenapa struktur code blog ini sangat penting?
karena code-code ini adalah standar yang digunakan dari blogger yang berisi perintah untuk menginclude semua data-data yang terdapat didalam sebuah blog.
ya kalau gak ada code ini dan hanya berisi syntax halaman website yang biasa dipakai maka isi dari data blog tidak akan pernah muncul.
berikut ini struktur dasar template blog:
lihat dibawah ini struktur template blog ini menggunakan html:
< html>
<head>
<title></title>
<meta.....>
<b:skin><![CDATA[ /* CSS Anda di sini */ ]]></b:skin>
</head>
<body>
</body>
</html>
Berikut penjelasan yang saya ketahui mengenai struktur HTML diatas :
1. <html></html>
- Sebuah template Blog/Website selalu diawali dengan tag pembuka <html> dan harus diakhiri tag penutup </html>
- Diantara tag inilah tag-tag atau struktur lainnya diletakkan yang akan menciptakan sebuah tampilan blog/website.
2. <head></head>
- Tepat setelah <head> biasanya diletakkan kode tag pengenal mulai dari tag title/judul, deskripsi, keywords dan tag-tag pengenal lainnya.
- Diantara kode ini harus diletakkan sebuah kode CSS yang akan menampilkan sebuah tampilan model atau karakter dari template itu sendiri.
- Sebelum kode tag penutup </head> biasanya ditambahkan sebuah kode Javascript untuk sekedar menambahkan fitur-fitur menggunakan kode Javascript.
3. <body></body>
- Tag body merupakan yang paling utama pada sebuah template Blog/Website karena ini akan menampung dan menampilkan semua konten blog/website itu sendiri.
- Pada bagian tag ini masih terbagi dalam 4 struktur penting lagi yaitu Header, Sidebar, Content dan juga Footer, di atas sudah saya jelaskan tentang struktur ini.
dibawah ini beberapa dasar contoh meta yang di gunakan di dalam 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=''/>
berikut beberapa dasar yang diletakan didalam tag body template lihat contoh dibawah:
1.Navbar
Pada bagian ini berfungsi sebagai navigasi bar. sangat kurang rasanya jika suatu halaman web tidak menggunakan navigasi bar perhatikan dibawah ini.
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
2.Header
bagian dibawah ini berfungsi untuk penempatan title blog, deskripsi blog untuk yang sudah ahli bisa dimanfaatkan sebagai promosi iklan dll.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
3.Main blog
fungsi ini sudah jelas berisi semua content sebuah blog contohnya:judul posting, artikel postingan, comment, dll. ya kalo diuraikan akan sangat panjang sekalli.
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
4.footer
yang terakhir adalah footer, footer adalah elemen yang diletakan paling bawah di dalam sebuah halaman web biasanya sih footer berisi tentang credit suatu website.
<b:section class='sidebar' id='sidebar' preferred='yes'/><b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
Dan kemudian kalau digabungkan code-code dari atas hingga bawah menjadi seperti ini menjadi sebuah template blog cuma belum di isi dengan design yang kita inginkan bisa coba code dibawah ini:
<?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'>
<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'>
<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>
<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<b:section class='footer' id='footer' showaddelement='no'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
</body>
</html>
code diatas ini bisa langsung kita terapkan di blog kita tapi tampilannya belum disain.
0 comments:
Post a Comment