7/9/12

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 == &quot;index&quot;'>
    <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…&apos; 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'>
<!-- skip links for text browsers -->
<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 :

  1. 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..
  2. 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.
  3. Outer-wrapper
    Area ini merupakan garis luar keseluruhan area mulai dari header, Content-wrapper, post.body dan sidebar.
  4. Content-wrapper : Area garis luar dari main-wrapper/post.body dan sidebar.
  5. Main-wrapper :  Area garis luar dari main-section area.
  6. 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.
    1. Sidebar (h2)
      Area untuk meletakkan berbagai macam widget sesuai selera/ fungsinya
    2. 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.
    3. 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


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

Sobat sedang membaca artikel Struktur Dasar Template Blogger, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

17 comments:

  1. Hi keluarga blogger ku...

    sungguh aku merindu kamu....

    Seorang indigo lagi buntu karena otak terlalu kacau...
    Nggak bisa berkisah di rumah moody dulu...
    Sedang mencoba berkisah dengan cara yang lebih ringan..

    kunjungi rumahku yang lain yaaaa...

    yang berminat sama urusan kecantikan:
    plumblush

    yang berminat sama urusan fotografi:
    mofoto


    -N-

    ReplyDelete
  2. dari dulu sampai sekarang tetep aja nggak bisa diandelin deh aku kao urusan template blog. semuanya pakai yang stadard dari blogger

    ReplyDelete
  3. owh,,ini yang dicari,,,sering bingung bagaimana menyimpan script..thank ya

    ReplyDelete
  4. Sangat membantu sekali , thanks .

    ReplyDelete
  5. terima kasih banyak atas infonya gan, tapi saya pake WP gan?

    ReplyDelete
  6. Baru tahu dalemannya templatew kayak gitu

    ReplyDelete
  7. Info bagus ni Gan buat newbie
    Makasih.....

    ReplyDelete
  8. Beberapa hari ini kakek juga lagi belajar html dasar, nih Contoh hasil belajar kakek...

    ReplyDelete
  9. bermanfaat banget nie buat aku,, maksaih ya gan

    ReplyDelete
  10. Lengkap banget penjelasannya, ini memudahkan pemula seperti saya untuk bisa memahami tentang desain template blogger
    terima kasih

    ReplyDelete
  11. masih dan terus belajar nih saya tentang struktur blogger beserta kode lainnya :)

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger