Cara Membuat Template Blog Sendiri Dengan Mudah Bagian 1


template design


Template merupakan salah satu bagian yang vital dari sebuah blog, apabila template dari blog kita baik maka pengunjung akan senang untuk berlama-lama di blog kita.

Banyak template untuk blog yang beredar dan bias di download secara gratis di internet, namun template-template tersebut terkadang ada saja bagian yang tidak cocok atau tidak kita senangi.

Oleh karena itu tidak ada salahnya jika kita mencoba untuk membuat template blog kita sendiri, sehingga kita bisa membuat desain sesuai dengan keinginan kita.

Pada kesempatan kali ini saya akan berbagi sedikit tutorial bagaimana  untuk membuat template sendiri pada platform Blogger.

Oke langsung saja, sebelumnya untuk membuat template blog sendiri setidaknya kita harus memahami apa saja tag - tag data dan layout yang ada pada blogger. Tentunya juga harus sedikit tau tentang HTML dan CSS.

Sebelum Memulai

Sebelum memulai desain template kita pahami dulu bagian-bagian yang akan menyusun template dari sebuah blog.

1. Section

Section merupakan kode yang membuat atau sebagai pembuka dari widget kita nantinya sebagai frame pada blog seperti header, Footer, Main, Sidebar.

Sintax / Code Section Blogger

Kode untuk membuat sebuah section pada blogger menggunakan kode dibawah ini.

<b:section id='' class='' maxwidgets='' showaddelement=''> 
</b:section>

Tiap atribut pada kode section memiliki fungsi yang berbeda:

- id : Sebagai nama dari atribut. id harus ditambahkan pada sebuah section

- class : Biasanya seperti 'navbar', 'header', 'sidebar', 'main', 'footer'. Fungsinya jika kita mengganti template nantinya, nama class tersebut membantu untuk proses transfer isi dari blog kita.

- maxwidget : Berfungsi sebagai penanda berapa banyak widget yang bisa kita tambahkan pada section.

- showaddelement : Isinya yes atau no. Apabila diset yes maka kita bisa menambahkan widget pada section tersebut, apabila diset no maka tidak bisa menambahkan widget pada section tersebut.


Contoh Syntax Section Sidebar:

<section id='sidebar' class='sidebar' maxwidget='' showaddelement='yes'>
<!--widget disini-->


Pada gambar diatas kita bisa melihat pembuuatan sebuah section dari sidebar, dimana atribut showaddelement diset jadi yes maka kita akan bisa menambahkan widget. Apabila diset no maka tidak akan bisa menambahkan widget.


Secara default pada kerangka template blogger setidaknya harus ada minimal 2 b:section tags agar tidak terjadi error saat disimpan.

2. Widget

Widget merupakan modul, atau isi dari section pada blogger. Berbeda dengan section yang berperan sebagai frame, widget merupakan data asli yang akan kita tampilkan pada blog nantinya.

Ada beberapa widget strandar yang tersedia pada blogger dan data dari widget tersebut sudah tersedia di blogger dan akan otomatis diakses saat kita menambahkan widgetnya.


Syntax Widget:

<b:widget id='' locked='' mobile='' title='' pageType='' type='' />

Tiap atribut pada kode widget memiliki fungsi yang berbeda:

- id : nama unik sebagai identifier

- locked: atribut ini bernilai true atau false, fungsinya unutk mengunci posisi dari widget, apabila bernilai true maka widget tidak bisa di pindah posisinya, apabila benilai false maka widget bisa dipindah posisinya.

atribut locked


Pada gambar diatas anda bisa melihat perbedaan widget yang atribut locked bernilai true dan false.


- mobile: atribut ini bernilai yes atau no, apabila diset menjadi yes maka widget akan ditampilkan pada mode mobile view atau saat blog dibuka melalui handphone, apabila bernilai no maka widget tidak akan ditampilkan saat blog dibuka dari handphone.

- title: Judul dari widget diisi bebas, biasanya kalau widget bawaan blogger akan terisi otomatis apabila ditambahkan.

- pageType: tipe dari widget, biasanya berupa archive, all, main, dll.

- type: merupakan tipe dari widget yang kita tambahkan. ada beberapa tipe yang ada pada blogger antara lain:






  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar



  • Pada atribut type siahkan gunakan salah satu tipe diatas untuk mengisi nilainya sesuai dengan jenis widget yang akan anda tambahkan.


    Contoh Syntax Widget:

    <b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes">
    <b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' />
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
    <b:widget id='Label1' type='Label' locked='false' />
    </b:section>

    Pada contoh syntax diatas kita membuat sebuah section sidebar dengan beberapa widget didalamnya.

    Setelah memahami bagaimana membuat dan menggunakan section dan widget sekarang saatnya kita belajar membuat sebuah template pada blogger pada Postingan Ini.


    0 Response to Cara Membuat Template Blog Sendiri Dengan Mudah Bagian 1

    Post a Comment