Struktur Dasar Template Blogger 1

Yo sekarang kita mengurai Stuktur atau Bagian Dasar Template Blogger . Postingan ini masih sekitar penjelasan tentang bagian apa saja yang ada didalam Template Blogger. Hal ini mungkin dperlukan bagi sobat yang mau merubah tampilan atau tampil beda sehingga perlu mengedit CSS ( Cascading Style Sheet ) dari termplate itu.

Struktur Template
Artikel ini juga masih sekitar Belajar Tutorial Blog atau Web lanjutan dari kemarin tentang Struktur atau Bagian Dasar Template Blogger, hanya sekarang dilengkapi dengan contoh CSS nya. .. sbb. :
1. Deklarasi XML
XML ( eXtensible Markup Language ) ada di paling atas sebagai pembuka, ini menunjukan definisi dari XML Template.:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns='http://www.w3.org/1999/xhtml'xmlns:b=' http://www.google.com/2005/gml/b'xmlns .. dst ……

2. Header ( <head> Judul, Meta tag ,……, dll </head> )
Disini tempat Title blog, metatag deskripsi, dan meta tag keyword , bisa juga meletakkan metatag Alexa, Google analytic, Robots atau metatag lainnya. contoh :

<head>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>
<meta content='Belajar Tutorial Blog Dan Bisnis Online' name='description'/>
<meta content='Belajar, Tutorial, Blog, Dan, Bisnis ,Online, Tips, Trik, Blogger, Tutor, Website, Web, Business, Usaha, Internet, Dunia, Maya, Info, SEO,Template, Templates, Theme, Themes, Berbagi, Info…' name=’keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

3. Variable Definition ( <b:skin>Variable Definitions…..]]</b:skin> )
Tempat setting klasifikasi,nilai dan warna . contohnya merubah bentuk font , warna judul blog, Postingan blog, widget ,dll. dengan catatan kita perhatikan terlebih dahulu keterangan dari masing-maisng variable.

<b:skin><![CDATA[
/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Background Color"
             type="color" default="#E1D4C0" value="#E1D4C0">
   <Variable name="headbgcolor" description="Header Background Color"
             type="color" default="#002255" value="#002255">
   <Variable name="contentbgcolor" description="Content Background Color"
             type="color" default="#f8f1e8" value="transparent">
   <Variable name="footerbgcolor" description="Footer Background Color"
             type="color" default="#e1d6c6" value="#e1d6c6">
Dan seterusnya, sampai tanda penutup tag ……*/

4. Body ( <body> kode html ….</body> )
Dibagian ini terdapat seluruh unsur berisi semua isi dari sebuah dokumen HTML, seperti teks, hyperlink, gambar, tabel, daftar, copyright,dll. contoh penampakan:

<body>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial Dan Bisnis (Header)' type='Header'/>
</b:section>
</div>
<div id='horizontal-navigasi'>
<div id='menu-nav'>
<ul class='menu-nav'>
<li><a href='/'>home</a></li>
<div id='nav-right'> …dst….
<div id='search'> --- dst
<div id='outer-wrapper'><div id='wrap2'>

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='content-wrapper'> …. dst… s/d …</body>

Itulah Struktur dasar dari batang tubuh template Blogger khususnya Template Minima.
Selanjutnya bagian-bagian lainnya mulai dari paling atas sampai bawah :

Navbar.
Ini adalah Navigation Bar , fungsinya sebagai menu tombol cepat antara lain menu untuk log in, log out, setting, menuju dashbor dll. namun ada juga yang sengaja di hidden/ disembunyikan , tentu punya alasan untuk itu..
Header (h1 title)
Biasanya dibawah navbar. untuk meletakan Judul/title dan deskripsi blog. berikut bagian-bagian dari header:
Title-wrapper :
    Header-inner (deskripsi blog)
    Header-section (berlaku untuk template yang headernya ada 2 kolom)
    Header-wrapper (luas keseluruhan header)
    Header1.(widget dibawah header) biasanya untuk template bawaan blogger disini kita bisa meletakkan script menu horizontal.
Outer-wrapper
Area ini merupakan garis luar keseluruhan area mulai dari header, Content-wrapper, post.body dan sidebar.
Content-wrapper : Area garis luar dari main-wrapper/post.body dan sidebar.
Main-wrapper : Area garis luar dari main-section area.
Main-section : Area tempat posting berada. misalnya :

post-title/entry-title (h3). Area ini adalah judul postingan.
postmeta-primary : terdiri dari meta_date (waktu posting), meta_author (penulis postingan)
post.body/entry.content : Area tempat uraian posting berada.
Comments-form : Area tempat kolom komentar.
Sidebar (h2)
Area untuk meletakkan berbagai macam widget sesuai selera/ fungsinya
Footer-column-container
Area dibawah main-section , bisa juga diletakan berbagai widget . Seandainya footer template dibagi menjadi 2 atau 3 kolom, maka masing-masing kolom disebut footer-column-section.
Copyright dan credits.
Area paling bawah , biasanya untuk meletakan Copyright (hak paten author/pemilik blog) dan credits (pembuat template)

Kurang lebih itulah inti Struktur atau Bagian Dasar Template Blogger walaupun penempatan, istilah maupun jumlahnya mungkin beda karena semua tergantung selera pembuatnya.
Itulah yang saya baca dari blognya para pakar , karena banyak jadi gak bisa disebutkan satu persatu, mohon maaf ya.. dan masih sekitar Template Blogger dan CSS.. tunggu artikel selanjutnya.

Thanks telah mampir, yo kita saling vote dan comment..
Bila berkenan tolong share/bagikan dengan tombol share dibawah.
Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

Tutorial Dan Bisnis

Struktur Dasar Template Blogger 1

Related Post:

3 komentar:

Cari di Blog Ini

Daftar Isi

Recent Comment

My Donatur

Jaringan

Langganan Artikel

Label

Alexa

Pengikut

Backlink