™[]Klik Judul postingan untuk melihat Isi selengkapnya!![]™

Monday, 12 November 2012

Cara Membuat Blank Template Blogger

Posted by petrus perdana Monday, November 12, 2012, under |

e992.jonggol



Cara Membuat Template Kosong ( Blank Template) di Blogspot

blank blogger templateBlank 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
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 :
pesan error
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>
2. Untuk penempatan kode CSS harus berada antara <b:skin><![CDATA[/*......]]></b:skin>
3. Dan untuk perintah kode HTML akan berada antara <body>.....</body>
Sekarang coba 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.....??