03.08
Unknown
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.
Masuk Blogg
- 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[/*
#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>© 2012.</p></center>
</div>
</body>
</html>
6. Kemudian klik Save
7. Jika ada pesan seperti berikut :
Maka pilih Hapus Widget ( jangan pertahankan )
8. 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
Posted in:
Blogger Tutorial
0 komentar :
Posting Komentar