Posts Subscribe to Saung WebComments

7/9/12

» » Struktur Dasar Template Blogger

Struktur Dasar Template Blogger

9:34 AM Diposkan oleh Anonymous
Label:

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:

16 comments:

  1. Ninneta - MissPlumJuly 11, 2012 at 10:49 PM

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

    ReplyDelete
  2. Obat Maag Kronis Paling AmpuhJuly 12, 2012 at 9:30 AM

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

    ReplyDelete
  3. risfaniJuly 12, 2012 at 6:51 PM

    Sangat membantu sekali , thanks .

    ReplyDelete
  4. obat herbal radang paru paruJuly 13, 2012 at 9:45 AM

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

    ReplyDelete
  5. Didin Supriatna ( Tukang Potret )July 16, 2012 at 11:58 AM

    bagus nih.. bisa belajar..

    ReplyDelete
  6. Windows BlogJuly 16, 2012 at 7:14 PM

    wah, gk ngerti saya gan. wkwkwk

    ReplyDelete
  7. Bos Iklan BarisJuly 18, 2012 at 4:24 PM

    Info yang lumayan bermanfaat

    ReplyDelete
  8. Depot Iklan GratisJuly 18, 2012 at 4:26 PM

    Baru tahu dalemannya templatew kayak gitu

    ReplyDelete
  9. Saung Iklan GratisJuly 18, 2012 at 4:27 PM

    Belajar template ni yeee

    ReplyDelete
  10. RNAugust 20, 2012 at 9:44 AM

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

    ReplyDelete
  11. Bocah TuaAugust 31, 2012 at 1:10 PM

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

    ReplyDelete
  12. obat tradisional kanker payudaraSeptember 7, 2012 at 8:19 AM

    makasih gan informasinya

    ReplyDelete
  13. obat tradisional kanker prostatSeptember 7, 2012 at 8:20 AM

    bermanfaat banget nie buat aku,, maksaih ya gan

    ReplyDelete
  14. Terapi Ion ElektrikSeptember 12, 2012 at 3:18 PM

    Nice share broo.. :D
    Keep posting yaa..

    Terapi Ion Elektrik Rendam Kaki Detox
    Peluang Usaha Rumahan
    Terapi Ion
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil

    ReplyDelete
  15. RamziOctober 3, 2012 at 7:56 AM

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

    ReplyDelete
  16. supripitanMarch 17, 2014 at 10:45 PM

    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