Layout Struktur Dasar Theme

cara membuat theme blogger

Hai hai, setelah sukses membuat sketsa pada sesi sebelumnya kita akan lanjut pada tahap membuat layout dasar theme. Pada dasarnya yang dimaksud dengan layouting pada sesi ini adalah menyusun elemen atau struktur dasar yang sebelumnya sudah kita buat dalam sketsa menjadi struktur HTML.

Sebelum kita melanjutkannya saya akan memberikan sedikit gambaran tentang HTML dasar yang akan kita gunakan.

HTML terdiri dari berbagai macam tag.

Tag adalah markah—markup yang diapit dengan tanda kurung buka < dan kurung tutup >.  Umumnya sebuah tag terdiri tag pembuka dan penutup, contohnya <tag> sebagai pembuka dan </tag> penutup.

Jelas terlihat bahwa pada tag penutup kita harus menambahkan sebuah garis miring /.

Dalam standar HTML ada berbagai macam tag, nah dari seabreg tag yang ada berikut beberapa diantaranya yang akan kita gunakan dalam membuat layout dasar:

  • <html> tag yang menyatakan sebuah dokumen HTML
  • <head> tag yang berisi informasi metadata sebuah blog atau website
  • <body> tag yang menyatakan sebuah badan dari dokumen HTML
  • <header> tag yang mendefinisikan sebuah elemen header
  • <nav> tag yang menyataan sebuah elemen menu navigasi
  • <article> tag yang menyatakan elemen artikel atau post
  • <aside> tag yang mendefinisikan elemen sidebar
  • <footer> tag  yang menyatakan sebuah footer
  • <div>  tag yang mendefinisikan sebuah bagian tertentu yang ada pada dokumen HTML

Dalam tag sendiri biasanya memerlukan sebuah attributeatribut, yaitu informasi tambahan mengenai tag tersebut.

Nah dalam tutorial ini ada dua buah atribut yang akan sering kita gunakan pada sebagian tag, yaitu atribut id dan class. Kedua atribut tersebut harus memiliki valuenilai.

Adapun format penulisannya adalah <tag atribut='nilai'>

Khusus atribut class dan id, tidak ada ketentuan khusus mengenai nilainya. Biasanya nilai yang ada pada atribut tersebut adalah nama elemen yang akan kita buat. Contoh:

<header id='dodol'>, <nav class='rendang'> dan seterusnya

Jadi pada dasarnya nilai tersebut hanyalah nama sebuah elemen.

Saya rasa kita sudah siap untuk segera mempraktekan cara membuat layout dasar theme secara langsung di dashboard Blogger.

Yuk kita mulai masukan elemen yang ada pada gambar sketsa ke dalam theme…

Perhatian

Buat sebuah blog baru pada akun Blogger untuk mempraktekan sesi ini.

Masuk ke dalam akun Blogger kamu, lalu pilih dashboard blog yang dibuat khusus untuk latihan ini.

Blank Theme

  1. Pilih bilah Theme » Edit HTML.
  2. Setelah itu hapus seluruh kode yang ada didalamnya, dengan cara menyeleksi semua kode yang ada di dalam editor mengunakan CTRL+A pada keyboard, lalu delete.

Pastikan jangan sampai ada yang tersisa ya…

Layouting Struktur Dasar Theme 1

Doc Info

Copy kode dibawah ini, lalu paste di dalam kode editor template yang baru saja kamu kosongkan…

<?xml version="1.0" encoding="UTF-8" ?>
<html>
</html>

Dengan memasukan tag pembuka <html> beserta penutupnya </html> maka theme ini sudah menjadi sebuah dokumen HTML.

Head

Langkah pertama yang akan kita lakukan adalah memasukan tag head.

Copy kode berikut dan letakan tepat dibawah <html> atau tepat sebelum </html>.

<head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
     <b:if cond='data:blog.isMobile'> 
        <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
        <b:else/> 
        <meta content='width=1100' name='viewport'/> 
     </b:if> 
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/>
    </title>
    <b:skin>
    </b:skin>
</head>

Seperti yang terlihat di atas, diantara <head> dan </head> terdapat beberapa baris kode lain. Nah kode tersebut adalah tag HTML yang berbentuk metadata blog.

Metadata blog adalah sekumpulan informasi tentang blog yang akan dibaca oleh peramban atau robot penelusur.

Body & Main-Wrapper

Masih ingat kan dengan sketsa yang dibuat pada sesi sebelumnya? Kalau ingat pasti tahu elemen apa yang selanjutnya kita masukan. Yup, betul sekali. Body dan dan main-wrapper

Mari kita konversikan keduanya menjadi tag HTML.

Karena body merupakan tag standar, maka kita cukup merubahnya menjadi <body>, sedangkan main-wrapper akan kita rubah menjadi sebuah nilai atribut id  dari sebuah tag div, <div id='main-wrapper'>.

Karena main-wrapper berada didalam body maka struktur kodenya akan seperti berikut ini.

<body>
    <div id='main-wrapper'>
    </div>
</body>

Copy kode tersebut, lalu simpan tepat setelah </head> atau sebelum </html>.

Header & Nav

Selanjutnya kita akan memasukan header dan nav kedalam theme, dalam HTML keduanya termasuk kedalam tag standar, maka header akan menjadi tag <header> sedangkan nav menjadi <nav>.

Silahkan copy kode berikut lalu paste dibawah <div id='main-wrapper'> atau tepat sebelum penutupnya yaitu </div>.

<header>
</header>
<nav>
</nav>

Article, Aside & Footer

Dua bagian berikutnya kurang lebih sama, dalam HTML article, aside dan footer adalah tag standar.

Copy kode berikut dan simpan tepat dibawah </nav> atau tepat sebelum penutup div main-wrapper yaitu </div>.

<article>
</article>
<aside>
</aside>
<footer>
</footer>

Nah saat ini kamu sudah memiliki struktur dasar theme yang dibuat dari gambar sketsa pada sesi sebelumnya.

Untuk memastikan kode yang kamu buat tadi sudah benar mari kita review ulang dengan melihat gambar sketsa dan kode lengkapnya dibawah ini.

<?xml version="1.0" encoding="UTF-8" ?>
<html>
    <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 
     <b:if cond='data:blog.isMobile'> 
        <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 
        <b:else/> 
        <meta content='width=1100' name='viewport'/> 
     </b:if> 
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/>
    </title>
    <b:skin>
    </b:skin>
    </head>    
    <body>
        <div id='main-wrapper'>
            <header>
            </header>
            <nav>
            </nav>
            <article>
            </article>
            <aside>
            </aside>
            <footer>
            </footer>
        </div>
    </body>
</html>

Gimana sudah mulai terang benderang kan?

Meskipun sudah membentuk struktur dasarnya, theme ini belum bisa di save atau disimpan. Hal tersebut dikarenakan theme blogspot harus memiliki setidaknya  sebuah widget.

Nah supaya theme ini bisa kita save yuk kita tambahkan bagian widget pada struktur yang tadi dibuat.

Widget Section

Widget section adalah adalah sebuah bagian dari theme blogspot. Dengan memiliki widget section kita bisa menambahkan gadget pada bagian tertentu dalam theme, seperti header, post, sidebar dan footer.

Untuk menambahkan sebuah widget section kita hanya perlu menyisipkan teks dengan format penulisan seperti berikut

<b:section atribut='nilai'>
</b:section>

Dalam hubungannya dengan theme yang sedang kita buat, ada dua widget section yang harus kita tambahakan, yaitu widget section header (widget untuk menampilkan gadget header) dan widget section main (widget untuk menampilkan gadget post).

Oh ya, dalam theme blogspot dapat di save/disimpan, kita harus mempunyai satu elemen yang memiliki widget section, jika tidak maka kode-kode yang sudah kita buat tadi tidak bisa disave.

Nah supaya bisa di save yuk kita tambahkan dulu satu buah widget section yang akan kita simpan dalam header.

Untuk menambahkan widget section header silahkan copy kode berikut, lalu simpan diantara <header> dan </header>.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' type='Header' visible='true'>
    </b:widget>
</b:section>

Klik save theme jika kedua kode tersebut sudah tersimpan.

Penasaran kan dengan penampakannya? klik view blog dan lihat tampilan theme baru ini.

Seperti yang terlihat theme ini hanya berbentuk blok putih polos dengan beberapa baris teks di dalamnya.  Nah untuk membentuk theme ini seperti sketsa yang telah dibuat kita perlu menambahkan CSS, dan itu akan kita praktekan pada sesi berikutnya.

24 replies
  1. Rahma
    Rahma says:

    Masih intro… Aku tunggu kelanjutanya deh. Sebagai pengguna blogger, utak atik template itu emang seru. . . Sampai ada yang eror di tampilan blog baru deh gak seru. . . Delete and create blog lagi,, mulai dr awal hahaha

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *