Cara Dasar Membuat Template Blogspot Sendiri

11/26/2016
Selamat malam rekan-rekan blogger, kali ini saya ingin berbagi sedikit mengenai dasar dari cara membuat template blog sendiri. Mungkin yang langsung tergambar dalam pikiran kalian, mengapa harus ribet dengan bikin template blogspot sendiri, padahal tinggal search google kita bisa menemukan banyak template gratis premium yang seo friendly, ready adsense, tema blogspot yang responsive dan ringan untuk banyak device atau bahkan banyak pula yang membagikan template premium blogspot secara gratis walau hal tersebut merupakan tindakan ilegal.

Nah, alasan yang utama adalah agar blog kita terlihat fresh, dapat mengoptimalkan SEO onpage pada blog sendiri, dan tentunya ada kebanggaan tersendiri ketika kita menggunakan template blog karya sendiri.

Disini saya akan membagikan apa yang saya dapat dari mencari cara membuat template blog sendiri, saya penasaran dengan caranya yang terbilang rumit, sehingga agar tidak lupa mengenai cara nya, saya menuliskan disini sebagai note buat saya untuk terus berusaha belajar dan saya harap cara ini juga bermanfaat bagi rekan rekan yang membutuhkan. oke langsung saja menuju langkah mudah membagun template blogspot sendiri.

1. Bikin Blog Baru

membuat template blog
Hapus Seluruh Barisan kode
Tujuan dari membuat blog baru ini adalah untuk dijadikan kelinci percobaan, hehe, dan ketika membuat blog, gunakan template standar dari blogspot untuk kita bongkar. sudah tau kan cara bikin blog sendiri? jika sudah jadi, langsung menuju setting Template > Edt HTML kemudian hapus seluruh baris kode pada kolom edit HTML tadi tanpa terkecuali.

2. Mulai Membangun Template

Pada dasarnya, template blogspot terdiri dari susunan kode biasa, seperti ini:
Nah struktur dasarnya adalah seperti diatas, namun ketika di simpan akan terjadi error, seperti gambar berikut:
cara membuat template blog keren
Error Tanpa Tag Skin

Artinya sebuah template blogspot harus ada kode <b:skin>, letaknya berada dalam <head> </head>, letakkan saja dibawah tag title. langsung kita tambahkan pada baris kode:
Coba lagi klik simpan dan lihat hasilnya, masih ada error seperti gambar berikut :
membuat template blog sendiri online
Error Tanpa Tag Section
Arti dari error pada gambar di atas adalah, sebuah template blogspot harus memiliki setidaknya 1 tag <b:section>  letaknya di dalam tag <body> </body> jadi langsung kita tambahkan saja.
Ketika di save, maka akan terlihat lagi error seperti gambar di bawah ini, ini menunjukkan bahwa setiap tag section, harus memiliki id unik, karena nantinya dalam setiap template akan ada beberapa tag section. Langsung saja kita tambahkan id seperti berikut:
membuat template blogspot sendiri
Error Tanpa id pada Tag Section
kemudian simpan. Kali ini pembuatan struktur dasar template kita sudah lengkap, sehingga berhasil menyimpan tanpa error. Coba kita refresh browser kita, akan terlihat perubahan otomatis pada barisan coding template seperti berikut:
cara membuat template pada blog
Berhasil Menyimpan Tanpa Error
Struktur yang terlihat pada awal koding merupakan struktur ciptaan blogger otomatis. Jika sudah berhasil seperti hasil pada gambar di atas, silakkan teman-teman menuju tata letak blog. akan terlihat seperti gambar dibawah ini.
membuat template blog sendiri gratis
Tampikan Tata Letak
Terdapat 1 tampilan tata letak dari hasil pembuatan b:section dengan id='header'. Nah kembali lagi ke bagian Edit HTML template blog, ada satu elemen penting yang sebaiknya diletakkan pada tag b:section, yaitu 'showaddelement'. Struktur dari penulisan kodingnya adalah sebagai berikut:
Fungsi dari showaddelement='yes' artinya menampilkan tambah gadget pada tata letak template blog, jika kita beri showaddelement='no' maka tampilan tata letak untuk bagian header tidak bisa ditambah. Untuk melihat hasilnya, masuk ke tata letak blogspot, kemudian refresh kembali browser teman-teman. seperti penampakan pada gambar berikut:
bikin template blog
Tata letak dengan showaddelement='no'

Namun untuk sementara kita kembalikan nilai dari showaddelement menjadi yes. Kemudian copas dari b:section menjadi 4 buah dan rubah masing-masing id nya seperti berikut, o ia jangan lupa tambahkan class dari masing-masing section, fungsinya akan terasa ketika kita mulai menggunakan css pada template:

Jika sudah, silakkan simpan temlate, masuk ke tata letak blog, kemudian refresh browser teman-teman. akan tampil seperti gambar berikut:
cara bikin template blogspot
Empat Section Sudah Berhasil di Buat

Nah sekarang mari kita coba tambah gadget pada bagian header, pilih tambah gadget > kemudian cari Header Halaman, sebelah kanan ada tanda tambah, klik.terlihat tampilan seperti berikut:
membuat template untuk blog
Tambah Gadget Header Halaman
Isi sesuai keinginan teman-teman, kemudian simpan. untuk melihat hasilnya, teman-teman harus kembali ke bagian edit HTML. Hasilnya seperti ini:
Coding Otomatis dari Tambah Gadget di Atas

dari gambar di atas menunjukka bahwa dengan kita menambahkan header halaman pada letak, blogspot otomatis menambahkan barisan kode pada bagian template. Kita sudah berhasil membuat header pada template baru kita. sekarang saatnya ngoprek bagian konten.
Copy bagian ini :
<b:widget id='Header1' locked='false' title='Belajar Bikin Tempalate Blogspot (Header)' type='Header' visible='true'>
masukkan baris kode di atas ke bagian section content, ubah id dan type nya seperti gambar berikut:
Copy dan Paste Untuk Membuat Gadget Posting Blog
Jangan lupa tanda penutup ( / ) pada bagian akhir agar tidak error, kemudian simpan template. Sebagai catatan antara id='Header1' dan Type='Header' bersifat case sensitive, artinya semua huruf harus sama, termasuk besar kecilnya cuma bedanya id ada angka 1 yang merupakan anak dari id section header, sedangkan type tidak ada angka 1 nya. Jika berhasil tanpa error, silakkan teman-teman refres browser, akan tampil barisan koding yang otomatis di generate oleh blogspot. seperti gambar berikut.
Hasil Section Body

Jika sudah, masuk kembali ke bagian tata letak, lihat penampakan yang tercipta dari barisan koding yang kita tambahkan sebelumnya seperti gambar berikut.
Tata Letak Bagian Body (Posting Artikel)

Nah untuk bagian sidebar dan footer saya rasa sama cara menambahkannya. Sekarang kita coba membuat postingan baru. kemudian lihat hasilnya. Jika hasil memperlihatkan seperti gambar dibawah ini, maka selamat kamu berhasil membuat dasar template blogspot.
Hasil Template
Memang hasilnya masih flat dan membosankan, namun kalian sudah tau, cara membuat dasar template, agar lebih manis tinggal kalian tambah CSS dan Jquery pada template. Kunjungi tuisan saya selanjutnya mengenai Pembuatan Template dengan CSS yang responsive Semoga cara dasar bikin template blogspot ini bisa bermanfaat dan mudah bukan cara membuat template sendiri?

Share this :

Previous
Next Post »
3 Komentar
avatar

maaf gan nanya .. itu kan contohnya posisi sidebar di bawah konten.. nah misalkan kita mau ubah di kiri atau kanan dari main-content nya itu gimana gan....??

Balas
avatar

lumayan rumit bagi orang awam, tapi tetap semangat.

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.