Membuat Template Blogspot Bagian 1 Pola
Sunday, July 22, 2012Membuat template sendiri, sulitkah? mungkin ini yang ditanyakan oleh temen-temen blogger semua, bahkan seperti saya pribadi sejak pertama kali mengenal dunia blogging. Akan tetapi setelah melihat dari berbagai refensi dari berbagai tutorial yang ada, Kang Onk mulai sedikit demi sedikit mengenali apa yang disebut CSS, HTML dan Javascript yang diterapkan dalam template blogger.
Kalau dipahami dan punya kemauan yang tinggi, pasti ada jalan untuk membuat template sendiri. Untuk model dan variasi yang diinginkan tergantung pada diri kita mengenali CSS, HTML dan JavaScript ini.
Pertama yang anda harus diingat ialah anda harus memahami struktur dasar template itu sendiri, setelah itu baru menginjak pada pembuatan template mulai dari nol. Pada kode struktur template yang akan dibagikan ini hasil karya dari salah satu seorang master blogging indonesia.
Langkah-langkahnya dalam pembuatan template sendiri ini adalah :
- Buat blog anda melalui blogger.com
- Klik blog yang sudah dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu.
- Hapus semua kode tersebut kemudian ganti dengan kode Struktur Dasar Template Blogger Versi XML dibawah ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/* <<---- start CSS / Skin ----
----------------------------------
My Style Template
Name : GoBlog
Designer : KOD Tutor
URL : http://kang-onk.blogspot.com/
----------------------------------------------- */
body { /*code CSS body*/
}
/* Header
---------------------------------------- */
#header-wrapper { /*code CSS header*/
}
/* Outer-Wrapper
---------------------------------------- */
#outer-wrapper { /*code CSS outer-wrapper*/
}
/* Headings
---------------------------------------- */
h2 {
}
/* Posts
---------------------------------------- */
.post { /*code CSS post*/
}
/* Sidebar Content
---------------------------------------- */
.left-sidebar-wrapper { /*code CSS Sidebar Left*/
}
.right-sidebar-wrapper { /*code CSS Sidebar Right*/
}
/* Profile
---------------------------------------- */
.profile {
}
/* Footer
---------------------------------------- */
#footer { /*code CSS footer*/
}
]]></b:skin> <!-- finish CSS / Skin -->
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- start header-wrapper -->
<div id='header-wrapper'>
<!-- widget header, description blogger-->
</div>
<!-- end header-wrapper -->
<!-- start content-wrapper -->
<div id='content-wrapper'>
<!-- start left-sidebar-wrapper -->
<div class='sidebar' id='left-sidebar-wrapper'>
<!-- widget Sidebar Left-->
</div>
<!-- end left-sidebar-wrapper -->
<!-- start main-wrapper -->
<div class='post-wrapper' id='main-wrapper'>
<!-- widget main-wrapper, post, comment and content-->
</div>
<!-- end main-wrapper -->
<!-- start right-sidebar-wrapper -->
<div class='sidebar' id='right-sidebar-wrapper'>
<!-- widget Sidebar Right-->
</div>
<!-- end right-sidebar-wrapper -->
<div class='clear'> </div> <!-- do not remove -->
</div>
<!-- end content-wrapper -->
<!-- start footer-wrapper -->
<div id='footer-wrapper'>
<!-- content footer-->
</div>
<!-- end footer-wrapper -->
</div></div>
<!-- end outer-wrapper -->
</body>
</html>
- Simpan Template dan lihat blog (untuk keterangan lanjut dari kode tag diatas bisa dibaca di sini)
- Hasilnya masih kosong karena belum ada isi tunggu artikel berikutnya....!!!
Dalam setiap penambahan sebuah element juga harus disertai dengan kode CSS untuk mengkonfigurasi tampilannya, jadi ketika menambahkan widget baru harus ada pasangannya masing-masing antara Widget HTML dengan CSS. Dari kode diatas bisa dilihat bahwa :
- <div id='header-wrapper'> memiliki pasangan pada kode CSS yaitu #header-wrapper { }
- <div id='left-sidebar-wrapper'> memiliki pasangan pada kode CSS yaitu #'left-sidebar-wrapper' { } begitu juga yang lainnya.
Bagaimana mengerti bukan?
Continued on the next article (2 Outer Wrapper)
0 komentar:
Speak up your mind
Tell us what you're thinking... !