Monday, 3 October 2016

Tutorial membuat template blog sendiri dari awal

blogger


Bagi para pengguna blogger (seperti saya), pasti tak asing dengan template. Bagi para pemula pasti menggunakan template standar bawaan dari blogger. Atau download dari penyedia template gratisan maupun berbayar. Namun pernah terpikir kan untuk mengetahui bagaimana cara membuat template-template tersebut. 

Kali ini saya akan membahas sedikit dasar template dan cara membuatnya. 

Langkah pertama tentunya kita buka blogger.com. Sekarang mari kita mulai cara membuat dasar template-nya. 

CATATAN : sebelum merubah/menghapus template yang ada dianjurkan menyimpan template yang sekarang. Atau jika lebih aman, buat blog baru untuk coba-coba buat template. 

Buka menu Template

Setelah membuka blogger pilih menu template. Seperti gambar dibawah

Tutorial membuat template blog sendiri dari awal

Klik Edit HTML

Tutorial membuat template blog sendiri dari awal

Karena kita akan membuat template dari awal lagi, maka hapus semua kode yang ada di dalam edit HTML tersebut. 

Tutorial membuat template blog sendiri dari awal

jadi akan seperti ini.

Tutorial membuat template blog sendiri dari awal

Baiklah, sekarang kita akan memulai membuat dasar template.

1. Ketik tag pembuka dan penutup HTML yaitu <html> dan </html>. Kode tag HTML ini adalah keseluruhan dari sebuah web. Semua tag yang ingin dan berpengaruh pada tampilan web harus berada diantara 2 kode diatas. 



Tutorial membuat template blog sendiri dari awal




2. Selanjutnya elemen yang harus ada adalah head dan body. Elemen head adalah tempat untuk menaruh kode untuk pengaturan tampilan yang ada pada elemen body. Elemen head tidak akan tampil pada website. Elemen body adalah tempat untuk mengatur posisi tampilan yang akan tampil pada website. Semua elemen yang ada pada tag body akan tampil pada website. Untuk membuat elemen tersebut ketik tag <head> dan </head> untuk elemen head, dan tag <body> dan </body> untuk elemen body.
Lihat gambar dibawah.




3. Jika kita coba menyimpan hasil diatas maka akan muncul teks There should be one and only one skin in the template, and we found: 0. Itu berarti template diatas harus mempunyai tag skin, tag ini berfungsi sebagai tempat kode CSS. Berarti kita ketik tag skin pada elemen head. Tag skin adalah <b:skin> dan </b:skin>.




4. Jika kita save lagi akan ada teks We did not find any section in your template. A template must have at least one b:section tag. Ini berarti harus ada tag b:section pada template tersebut. Tag ini adalah widget pada blogger. Jadi kita ketik tag ini diantara elemen body. Jadi ketik tag <b:section> dan </b:section> dibawah tag <body>.

5. Jika save lagi kali ini ada teks One of the sections is missing the required id attribute. Every section should have a unique id. Berarti tag b:section harus mempunyai id/nama unik. Sekarang kita beri nama header. Sekarang ketik id='header' setelah <b:section. Lihat gambar dibawah. 


Tutorial membuat template blog sendiri dari awal

6. Save. Berhasil !! itulah dasar dari sebuah template. Jika sudah seperti ini kita bisa membuat elemen header, artikel, sidebar, footer dan lain-lain pada elemen body. Dan untuk pengaturan tampilan dari elemen header, artikel, dan kawan-kawan diletakkan pada elemen head. 


Tutorial membuat template blog sendiri dari awal


Sebelum itu, coba kita reload hasil template diatas. Dan hasilnya akan seperti gambar dibawah. 




Pada gambar tersebut ada yang berubah. tag pembuka html ada kode baru yang diberikan oleh blogger. Sedang pada tag skin hanya ada tambahan kode <![CDATA[ ]]. Kode CSS biasanya akan diketikkan diantara kode CDATA tersebut yaitu diantara <![CDATA[ dan ]].


Tutorial membuat template blog sendiri dari awal


Untuk template sekarang hanya ada halaman kosong pada website tersebut. Karena belum ada elemen-elemen untuk tampilan web. Untuk mulai membuat template akan dibahas disini.


Selamat mencoba. 

5 comments:

  1. kalau bisa script disertakan dalam teks saja gan jangan gambar.

    ReplyDelete
    Replies
    1. Di bahasan ini script nya head, body, skin gan,,, untuk tingkat lanjutan baru akan di sertakan scriptnya,,,

      Delete
  2. Terima kasih tutorial membuat template blog sendiri dari awal, langkah - langkahnya mudah di mengerti dan dipahami.. sangat bermanfaat

    Kunjungi website kampus saya http://www.atmaluhur.ac.id/

    Kunjungi website saya https://hiko.mahasiswa.atmaluhur.ac.id

    ReplyDelete