Cara Membuat Template Kosong Blogger

Bagaimana cara membuat template kosong blogger? Mudah, ikuti saja tuorial ini, dijamin bisa dalam waktu tidak sampai 5 menit.

Bagaimana cara membuat template kosong Blogger? Pernahkah Anda terpikir ingin membuat sendiri template Blogger mulai dari awal, mulai dari nol? Saya yakin jawaban Anda adalah ya, terutama jika Anda sudah sering mengutak-atik template Blogger. Jika demikian maka Anda sebaiknya memulai dari template kosong dulu.

Jadi pada artikel kali ini saya akan berbagi bagaimana cara membuat template kosong Blogger. Sebelum itu sebaiknya Anda baca-baca juga artikel saya yang berjudul: Struktur dasar template blogger.

Untuk Apa Template Kosong?

Memulai dari template kosong merupakan awal yang bagus jika Anda ingin membuat sendiri template Anda. Perubahan-perubahan kecil dapat Anda lihat dan nikmati. Saya yakin Anda akan benar-benar menikmati prosesnya.

Anda juga dapat menggunakan template ini untuk kembali ke pengaturan awal (reset). Misalnya Anda mencoba sebuah tema lalu menggantinya dengan tema yang lain beberapa kali. Ini akan meninggalkan widget yang rusak. Anda dapat menghapusnya secara manual, namun menggunakan template kosong akan lebih mudah dan cepat.

Cara Membuat Template Kosong Blogger

Sebuah halaman situs-tanpa memandang platformnya-memiliki struktur HTML seperti berikut.

[<html> <head> <title>My Awesome Blank Blog</title> </head> <body> </body> </html>]

Situs Blogspot juga memiliki struktur seperti di atas. Tetapi jika Anda mengedit/menghapus template blog Anda dan menggantinya dengan struktur itu maka Anda akan mendapatkan pesan error saat menyimpannya. Dengan kata lain template tidak bisa disimpan atau diunggah.

Bagaimana solusinya? Anda harus menulis struktur yang cocok dengan platfor blogspot.

Ada beberapa kriteria untuk membuat sebuah template Blogspot), yaitu:

Harus ada tag skin (<b:skin></b:skin>) dalam template.
Sebuah template Blogger harus memiliki paling sedikit satu tag b:section.
Setiap section harus memiliki id unik (tidak boleh ada dua id yang sama).
Sintaks yang benar.

Jika kriteria di atas terpenuhi, Blogspot tidak akan menampilkan pesan error saat kita menyimpan template. Hal yang sama juga berlaku bila kita ingin membuat template kosong.

Unsur-unsur dari Template Kosong Blogger (Blogger Blank Template)

Seperti yang dijelaskan sebelumnya template Blogger harus memenuhi kriteria dari Blogger. Sebuah template kosong Blogger harus berisi hal-hal berikut :

Tag halaman HTML dasar (html, head, body) dan penutupnya.
Cukup satu tag <b:skin></b:skin>
Paling sedikit mengandung satu tag <b:section></b:section>.

Mulai Membuat Template

Masuk ke Dashboard Blogger > Template dan klik tombol Edit HTML. Hapus semua isi Template, gunakan Ctrl+A lalu tekan tombol Del di keyboard Anda. Selanjutnya salin dan tempel (copy - paste) kode HTML berikut untuk mengganti apa yang telah Anda hapus:

[ <?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
</head>
<body>
</body>
</html>]

Struktur dasarnya sudah jadi, ayo lanjutkan. Apa sudah selesai? Tentu saja belum.

Buat Judul Blog (Head)

Selanjutnya kita akan mengisi tag <head></head> dengan judul blog, skin dan elemn lain. Kita harus memasukkan kode dasar template Blogger sebagai awal:

<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'/>

Lalu tambahkan kode untuk title (judul) blog:

<title><data:blog.pageTitle/></title>

Selanjutnya, tambahkan tag Skin dan isi dengan CSS sederhana yang akan mengubah tampilan template. Saat ini cukup ini saja:

<b:skin>
 <![CDATA[/* 
   body { 
   font: Arial; 
   color: red; 
   background: grey; 
   margin: 0; 
   padding: 0; 
  }
 ]]>
</b:skin>

Tanpa memasukkan CSS di antara tag <b:skin> pun sudah cukup, misalnya seperti ini:

<b:skin>
 <![CDATA[/* 
  
 ]]>
</b:skin>

Buat Badan Blog (Body)

Tambahkan/sisipkan baris berikut di antara tag <body> dan </body>.

<b:section id='main' showaddelement='yes'/>

Sebuah template blogger setidaknya harus memiliki satu seksi (section), misalnya section yang ber-id "main". Ini adalah seksi utama yang menjadi "badan" blog. Nanti kita bisa menambahkan seksi jenis lainnya seperti post, sidebar, dan footer.

Kode lengkap Template Kosong Blogger

Sampai di sini template kosong Anda sudah jadi. Kode lengkapnya akan terlihat seperti berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:layoutsVersion='3' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<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><![CDATA[
      /* body { font: Arial; color: red; background: grey; margin: 0; padding: 0; }
    ]]></b:skin>
</head>
<body> <b:section class='main' id='main' showaddelement='yes'/>
</body>
</html>

Salin dan temple seluruh kode di atas ke dalam editor template Anda kemudian simpan. Lihat blog Anda! Tentu Anda tidak melihat apapun bukan?

Coba sekarang tambahkan ini di atas tag </body>:

[<center><a href="http://jelasinblog.blogspot.com/2015/06/cara-membuat-template-kosong-blogger.html">Blank Template By Jelasinblog | Kembali ke Tutorial</a></center>]

Simpan template lalu lihat hasilnya.

Jika Anda ingin menampilkan artikel, tambahkan kode berikut:

[<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>]

di dalam,

[<b:section></b:section>]

Lengkapnya seperti ini:

[<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>]

Simpan template dan periksa lagi blog Anda. Ada yang berubah?

Ingin melihat hasilnya, silahkan kunjungi tautan DEMO.

Sekarang Anda sudah bisa membuat template kosong Blogger.

Apakah Anda ingin melanjutkan membuat tema yang lebih kompleks? Saya yakin Anda pasti bisa. Kemahiran Anda dalam CSS, JavaScript, dan jQuery menentukan kebagusan template yang Anda buat.

Selamat mencoba, saya tunggu kabar template yang Anda buat!