Home Tutorial Blogger Mengenal Struktur dasar XML/HTML Template Blogger

Mengenal Struktur dasar XML/HTML Template Blogger

7 Komentar

Bagi para pemula blogger, mengenal dan memahami Kode Struktur dasar XML/HTML Template Blog/Website merupakan hal mutlak yang harus diketahui dan dipahami. Mengapa? karena dengan mengenal struktur dasar xml/html template blog akan bisa mempermudah dalam mengedit dan memodifikasi template. Contohnya seperti menambahkan header, kolom widget, footer dan lain sebagainya. 

Struktur dasar XML/XHTML template blogger terdiri dari beberapa bagian, diantaranya header, body outer, main, post body, sidebar dan footer. Semua element ini dibungkus oleh beberapa tag, mulai dari yang terluar sampai yang paling dalam. Untuk lebih jelasnya, perhatikan gambar dibawah ini.

Mengenal Struktur dasar XML/HTML Template Blogspot

Mengenal Struktur Dasar Kode XML/HTML Template Blogspot

<html>
<head>
Tempat untuk font script dan meta content
<b:skin><![CDATA[
Tempat CSS / Skin
]]></b:skin>
</head>
<body>
Tempat untuk content header, body, main, sidebar dan footer
</body>
</html>

Penjelasan Tags !

1. Tag HTML

    Tag pembuka <html> dan tag penutup </html> merupakan desain awal (standard) untuk membentuk atau menciptakan suatu template atau design website yang didalamnya berisi semua element xml/html

2. Tag Head

    Diantara tag pembuka <head> dan penutup </head> terdapat tag title, skin/css dan script. Isi tag head ini merupakan bagian penting untuk membangun blog atau website seperti peletakan font, script, meta content dan css/skin. Posisi peletakan font dan meta content, biasanya di letakkan tepat di bawah tag pembuka <head> sedangkan untuk CSS/Skin diletakkan di antara tag pembuka <b:skin><![CDATA[ dan tag penutup ]]></b:skin>.

3. Tag Body

    Tag body ini merupakan tempat untuk menampilkan atau memvisualisasikan semua aktifitas blog, dan biasanya terbagi dalam 4 element utama, header (menu navigation), main-wrapper (post body), side-wrapper (widgets) dan footer (copyright atau credits)
Untuk menguraikan secara keseluruhan dan menggabungkannya menjadi template yang utuh, berikut kerangkanya.
<html>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[
body {..............}
#header-wrapper {..............}
#content-wrapper {..............}
.post {..............}
.left-sidebar-wrapper  {..............}
.right-sidebar-wrapper  {..............}
#footer {..............}
]]></b:skin>

</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- start content-wrapper -->

<div id='header-wrapper'>
<!-- widget header, description blogger-->
</div>

<div id='content-wrapper'>
      <div class='sidebar' id='left-sidebar-wrapper'>
       <!-- widget Sidebar Left-->
       </div>     

       <div class='post-wrapper' id='main-wrapper'>
       <!-- widget main-wrapper, post, comment and content-->
        </div>    
       <div class='sidebar' id='right-sidebar-wrapper'>
       <!-- widget Sidebar Right-->
       </div>

<div class='clear'>&#160;</div>  <!-- do not remove -->
</div>

<!-- end content-wrapper -->

<!-- start footer-wrapper -->

<div id='footer-wrapper'>
<!-- content footer-->
</div>

<!-- end footer-wrapper -->

</div>

</body>
</html>
Demikianlan penjelasan singkat mengenai struktur dasar kode XML/HTML template blogspot, semoga dengan adanya penjelasan tersebut diatas, bisa menambah pengetahuan anda. Terima kasih !
Next Post
Previous Post

Artikel Terkait

Unknown
Unknown

7 comments:
Write comment
  1. Daniel ValentinoMay 30, 2013

    "Nice post, jangan lupa berkunjung balik ke ."
    danielvsirait.blogspot.com

    ReplyDelete
  2. UnknownJune 15, 2013

    Terimakasih, infonya sangat membantu blogger pemula seperti saya :)

    ReplyDelete
  3. AnonymousAugust 28, 2013

    Nice info sob. Mksh

    ReplyDelete
  4. AnonymousAugust 30, 2013

    Sangat bermanfaat, kunjung balik sob

    ReplyDelete
  5. septian surbaktiOctober 23, 2013

    Nice...untuk blog pemula seperti saya
    http://crazback.blogspot.com/

    ReplyDelete
  6. Nada SumbangJanuary 21, 2014

    gan mau tanya, itu kan struktur umum dan coding website, nah klo struktur yang terbaca oleh layout yang mana ya ? ketika kita mau edit layout kan ada add gadget, itu untuk menentukan ukuran maupun posisi letak di mana ya kode htmlnya ?

    Terima kasih gan.

    ReplyDelete
  7. supripitanMarch 17, 2014

    bermanfaat bagi saya yang baru mengenal blogger.

    ReplyDelete