Cara Membuat Blank Template Blogger

Cara Membuat Template Kosong ( Blank Template) di Blogspot

Blank Template atau template kosong!!...ya tutorial Blogger kali ini rada unik, entah ada yang membutuhkanya atau tidak..who knows? Blogger Blank Template kedengarannya memang aneh, karena template yang di-adopsi dari Simple Blogger template ini benar-benar dibuat atau di-convert menjadi kosong, blank, polos, bersih tanpa widget apapun. Dari hasil utak-atik - ga da kerjaan :)- proBlogiz akhirnya menemukan cara membuat blank template pada Blogger ( ala proBlogiz )

Template Blogspot atau Blogger umumnya menggunakan code Type XHTML 1.0 Strict Document. Ini dikembangkan oleh konsorsium world wide web pada tanggal 26 Januari 2000. Tidak seperti PHP atau ASP.net aturan XML yang ketat dan tak kenal ampun. Sebuah kesalahan kecil saja pada proses coding akan direspon dengan pesan kesalahan atau peringatan keras, ini sering Anda temui ketika mengedit template blog Anda.

Saya akan berbagi kode sederhana yang akan mengubah struktur XML menjadi blank template, polos kosong tanpa widget. Template blogger terdiri dari widget yang dioperasikan dan dikelola dengan menggunakan nama class dan ID.

Mari kita sedikit berepksperimen membuat halaman HTML kosong, sedikit keluar pakem untuk Template Blogger dan kemudian juga mencoba menambahkan widget dengan cara-cara baru yang menarik untuk menyesuaikan tampilan blog.

Halaman atau HTML Page sederhana memiliki gambaran jenis dokumen yang diikuti oleh tag HTML, HEAD and BODY. Meta tag, JavaScripts dan style sheet selalu ditambahkan di dalam bagian HEAD dan DIV section dalam bagian BODY. Di Blogger karena template diprogram secara otomatis melalui bagian b:section tag maka kita harus terlebih dahulu menghapus semua bagian tersebut dan meninggalkan hanya satu tag saja karena markup XML memerlukan kehadiran setidaknya satu tag pada bagian tersebut. Untuk lebih menyederhanakan proses saya telah menciptakan sebuah tema yaitu "Clean HTML Theme" sebagai contoh project ini. Anda dapat menggunakan tema ini atau template "Clean HTML Theme" untuk bermain dan bereksperimen sendiri dengan mecoba beberapa tool menarik, Fancy CSS3 tweak, dan melatih keterampilan desain Anda.

Blank Blogger Template Template >>>>> DEMO

Langkah Membuat Blogger Blank Template ( "Clean HTML Theme" )

Masuk Blogger

Buat Blog Baru dan Beri Nama dan Alamat ( test blog, coba blog - beri nama blog terserah Anda)

Pilih Simple Template ( Mudah ) bukan Dynamic Views

Selanjutnya pergi ke Template > Edit HTML

Hapus semua kode dalam template editor dan ganti dengan kode berikut :

Buat Blog baru


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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[/*
-----------------------------------------------
////////////////////////CLEAN HTML THEME////////////////////////
///////////////////CODED BY : Riza-problogiz.blogspot.com///////////////////
///////////////////DOWNLOAD FROM: http://problogiz.blogspot.com  ///////////
----------------------------------------------- */
#navbar-iframe {   height:0px;   visibility:hidden;   display:none   }
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)  margin: 0;
    padding: 0;
}

]]></b:skin>
  
  </head>
  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div style='margin-top:400px; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://problogiz.blogspot.com'>proBlogiz Clean HTML </a>&#169; 2012.</p></center>
</div>
  </body>
</html>

Kemudian klik Save

Jika ada pesan seperti berikut :

Maka pilih Hapus Widget ( jangan pertahankan )

Selesai

Anda telah membuat Blank Template - well done

Yang Perlu Diperhatikan !!

1. Untuk membuat widget baru maka penempatan kode JavaScript harus berada antara <head> .... </head>

Untuk penempatan kode CSS harus berada antara <b:skin><![CDATA[/*......]]></b:skin>

3. Dan untuk perintah kode HTML akan berada antara <body>.....</body>

Anda mengunjungi atau cek di bagian Tata Letak Blogger. Anda akan menemukan sebuah area kosong dengan hanya ada Widget Favicon saja. Jika Anda membuat sebuah posting baru atau halaman, mereka tidak akan muncul di blog Anda, karena memang tidak ada widget postingan pada blog ini.

So, mau mencoba membuat atau memasang Widget Posting sekarang ?

Untuk memberikan gambaran tentang bagaimana dengan mudahnya template blogger dapat dirancang dari awal hanya menambahkan kode berikut tepat di atas </ body> - sebagai contoh untuk membuat fungsi Pos Widget pada Tema Clean HTML Template ini

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

Save Template

Kemudian kunjungi halaman Tata Letak Blogger sekali lagi. Anda akan dapat melihat Widget Pos dan kini Anda dapat dengan mudah mengedit pilihan format nya. Selamat! Anda telah membuat satu widget pertama Anda pada template blogger. Cobalah bereskperimen dengan cara ini dan tambahkan beberapa widget baru yang menarik dan mecoba mencari tahu sendiri seberapa kreatif Anda.

Selamat bermain-main dengan Clean HTML Template Anda

Salaam

Bersih itu Indah

hehe.....??

15 komentar

Anonim

25 November 2012 pukul 12.24

terima kasih banyak, gan..
banyak artikel yang menurut saya bermanfaat..
Semoga Allah membalas dengan banyak kebaikan buat agan,,

Salam,

Unknown Author

7 Desember 2012 pukul 15.23

thanks juga
senang bisa membantu

totobet.biz

10 Desember 2012 pukul 05.06

welcome mantaaap gan

blitari

14 Desember 2012 pukul 21.29

keren juga gan...kkkkk
thanks za..

15 Desember 2012 pukul 00.15

ok sama2
thanks udah berkunjung:)

26 Desember 2012 pukul 02.15

keren boss,

Liana

26 Desember 2012 pukul 23.37

makasih banyak.. sgt bermanfaat.. aku akan coba ya..

27 Desember 2012 pukul 00.47

sama2 :)
silahkan dan thanks udh mampir

Fauzi Blog

18 Januari 2013 pukul 14.57

Mantap panduannya,mas. Terimakasih

18 Februari 2013 pukul 09.17

thanks banget gan, akhirnya dapat juga buat template blog dari dasar....mantap.....

Cecep Budiman

27 Februari 2013 pukul 20.09

Ini bisa di pakai buat redirect gk ?

Blog Komunitas Anak TKJ

29 Maret 2013 pukul 23.48

om mau tanya ni, gmn sih cara nya membuat halaman demo template ?? saya sudah capek ni om dari mulai nyoba yang css, sampai yang pakai iframe... tolong donk kasih tutorial nya ke ane om.. kirim ke fernan.situmorang@gmail.com ya om please banget