Cara Membuat Template Kosong Blogger

Bagaimana cara membuat template kosong Blogger? Pernahkah Anda terpikir ingin membuat sendiri template Blogger mulai dari awal, mulai dari nol? Anda mungkin menjawab ya, 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 cara membuat template kosong Blogger. Sebelum itu sebaiknya Anda baca-baca juga artikel saya yang berjudul: Struktur dasar template blogger.

Cara Membuat Template Kosong Blogger

Sebuah halaman situs memiliki struktur HTML seperti berikut.

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

Situs Blogger 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. Dengan kata lain template tidak bisa disimpan atau diupload. Ada beberapa kriteria untuk membuat sebuah template Blogger, yaitu:
  1. Harus ada tag skin (<b:skin></b:skin>) dalam template.
  2. Sebuah template Blogger harus memiliki paling sedikit tag b:section.
  3. Setiap section harus memiliki id unik (tidak boleh ada dua id yang sama).
  4. Sintaks yang benar.
Jika kriteria di atas terpenuhi, Blogger 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 :
  1. Tag halaman HTML dasar (html, head, body) dan penutupnya.
  2. Cukup satu tag <b:skin></b:skin>
  3. 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 tambahkan 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>

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 title (judul) blog:

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

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 postsidebar, 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" ?>
<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>
  <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>
    Copy lalu paste HTML di atas dalam 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 di dalam <b:section></b:section>:

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

    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?

    Sekarang Anda sudah bisa membuat template kosong Blogger. Selanjutnya kemahiran Anda dalam CSS, JavaScript, dan jQuery menentukan kebagusan template yang Anda buat.

    Selamat mencoba, saya tunggu kabar template yang Anda buat!

    DEMO

    Comments

    1. Thanks pak, berguna banget artikelnya terutama buat yang pertama kali mau nyoba buat template blogger sendiri

      ReplyDelete
    2. Mantap nih gan Tutorialnya :) aku udh coba buat templatenya, hehehe... oh iya dilanjutin dong Gan tutorialnya sampe buat template Blognya Jadi :D

      ReplyDelete
    3. Terimakasih Sobat Berguna untuk postingan saya

      ReplyDelete
    4. This comment has been removed by the author.

      ReplyDelete
    5. Thanks yaaa.. berkat artikel agan ini akhirnya saya bisa bikin template husus untuk memanggil file demo tertentu...

      ReplyDelete
    6. Mohon kunjungan baliknya yaaa.!!!!
      http://bulshitman.blogspot.com

      ReplyDelete

    Post a Comment

    Entri Populer

    Perbedaan JavaScript dan jQuery Beserta Contoh

    Cara Menggunakan :before dan :after

    Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template