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.

cara membuat template kosong blogger

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:
  1. Harus ada tag skin (<b:skin></b:skin>) dalam template.
  2. Sebuah template Blogger harus memiliki paling sedikit satu 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, 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 :
  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 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 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" ?>
<!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!

    COMMENTS

    BLOGGER: 9
    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. This comment has been removed by a blog administrator.

      ReplyDelete

    Name

    Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
    ltr
    item
    Jelas in Blog: Cara Membuat Template Kosong Blogger
    Cara Membuat Template Kosong Blogger
    Bagaimana cara membuat template kosong blogger? Mudah, ikuti saja tuorial ini, dijamin bisa dalam waktu tidak sampai 5 menit.
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgswS9tf41V8njbtBrZDME8FEQ2Ke58QftyON70qkFi1gtuk6nVz3wTN-qp5E6AMpygQ0E1tF4WT5-v0GZxm7BDtYs_kQrLECmfFgWiwPKQBzM7sWS6KHoCms7iPZwJvjiBtxemEHRQdfc/s1600/template_kosong_blogger.jpg
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgswS9tf41V8njbtBrZDME8FEQ2Ke58QftyON70qkFi1gtuk6nVz3wTN-qp5E6AMpygQ0E1tF4WT5-v0GZxm7BDtYs_kQrLECmfFgWiwPKQBzM7sWS6KHoCms7iPZwJvjiBtxemEHRQdfc/s72-c/template_kosong_blogger.jpg
    Jelas in Blog
    https://jelasinblog.blogspot.com/2015/06/cara-membuat-template-kosong-blogger.html
    https://jelasinblog.blogspot.com/
    https://jelasinblog.blogspot.com/
    https://jelasinblog.blogspot.com/2015/06/cara-membuat-template-kosong-blogger.html
    true
    2350744749749285503
    UTF-8
    Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content