Struktur Dasar Template Blogger

Kali ini coba posting untuk mengurai Stuktur atau Bagian Dasar 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.

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.

Source : Tutorial Dan Bisnis

Saung Web

7/9/12

Struktur Dasar Template Blogger

Related Post:

16 comments:

Popular Posts

Donatur

Langganan Artikel

Labels / Category

Total Kunjungan

Follower

Tinggalkan Jempolnya ya..

Alexa