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 == &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.
  7. Sidebar (h2)
    Area untuk meletakkan berbagai macam widget sesuai selera/ fungsinya
  8. 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.
  9. 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.
Tutorial Dan Bisnis


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

Sobat sedang membaca artikel Struktur Dasar Template Blogger 1 dengan Url https://tutorialdanbisnis.blogspot.com/2012/06/struktur-dasar-template-blogger-1.html , bila berkenan silahkan bagikan dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, letakan link aktif artikel ini sebagai sumbernya dengan copy kode di bawah ini.


Related Post:

3 komentar:

Silahkan Comment disini, saya comment di sana..

Langganan Artikel

Enter your email address:

Delivered by FeedBurner

Label

  1. Bisnis (5)
  2. Daftar Isi (4)
  3. Info (4)
  4. Link (2)
  5. Olah Raga (1)
  6. SEO (5)
  7. Software (3)
  8. Template (14)
  9. Tips Dan Trik (2)
  10. Tutorial (16)

Alexa