Cara Membuat Template Kosong Blogger

Template Blogger menggabungkan elemen HTML dan CSS dalam satu tempat, termasuk CSS default. Pertama kali melihatnya mungkin Anda akan terkejut saking banyaknya kode-kode tersebut.

Pernahkah terpikir oleh Anda ingin membuat template sendiri 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, sebuah halaman HTML kosong.

Jadi pada artikel kali ini saya akan berbagi cara membuat template kosong kepada sobat Blogger semua. 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 stryktur seperti itu. Tetapi jika Anda mengedit/menghapus template blog Anda dan menggantinya dengan struktur itu maka Anda akan mendapatkan pesan error alias template tidak bisa diupload atau disimpan.There are certain criteria for making a template for Blogger Blog :
  1. Harus ada 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>.

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 ke dalam template menggantikan semua 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>

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>

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

<?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?

    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
    7. Permisi Numpang Promo Yah Min
      Buruan Gabung !!! Bersama © Pokerkiu.org GAME Poker Online Terbaik, Terpercaya Dan Tercepat...
      No BOT or ADMIN..
      - minimal deposit or Withdraw : Rp25.000,-
      * Bonus TurnOver 0.5% setiap minggunya
      * Bonus Referal 20% Seumur Hidup (Bebas Syarat)
      Mari Rasakan Ke SUKSESAN Anda Bersama Kami , Klik Disini ,,
      LiveChat Online ©24Jam


      Pokerkiu

      Agen DominoQQ

      SitusQQ Online Terbaik

      Agen DominoQQ Online

      Situs Judi Online Terpercaya

      Situs Judi Online Terlengkap

      Situs Judi Online Tercepat

      Judi Online Uang Asli Indonesia

      JudiQQ Uang Asli Indonesia

      Bandar Poker Terbaik Se'asia

      Poker Online Terbaik & Terlengkap

      http://pokerkiu.org/?ref=poker99kiukiu

      ReplyDelete

    Post a Comment

    Popular posts from this blog

    Cara Menggunakan :before dan :after

    Perbedaan JavaScript dan jQuery Beserta Contoh

    Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template