05.28.00
Danij
Dalam pembuatan template, sebenarnya kita hanya merubah template yang ada menjadi template yang kita inginkan. Baik dari warna, background maupun tataletaknya.
Ehm... ehm... langsung ke TKP gan.
Secara umum, template blogger seperti gambar di bawah ini :
Keterangan :
Body : adalah seluruh komponen yang akan ditampilkan di layar monitor.
Header : tempat judul blog (bisa diberi gambar sesuka kita). Pada bagian ini lebar header harus sama dengan lebar outer-wrapper
Main : di sinilah postingan kita akan ditampilkan.
Sidebar : adalah tempat elemen-elemen tambahan
Footer : mungkin fungsinya sama dengan sidebar. Lebarnya diusahakan sama dengan outer-wrapper.
Secara garis besar, lebar header = lebar main + lebar sidebar = lebar footer = outer-wrapper
Dah ngerti lom? Kalau sudah kita lanjut ke script. Silahkan login ke blogger à tataletakà edit HTML.
Sebaiknya kopi dulu tuh script ke notepad atau dreamweaver atau frontpage. Supaya lebih kelihatan aja, gitu loooo.
Jika sudah, Anda lihat script yang berada antara [CDATA[… sampai dengan ]] ></b:skin>
Contoh :
[CDATA[…………………
…………………
…………………
#outer-wrapper {
width:960px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
}
…………………
…………………
…………………
]] ></b:skin>
Nah... yang di atas tadi disebut CSS Code
Sekarang Anda lihat code antara <body> dan </body>
Contoh :
<body>
……………
……………
……………
<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>
……………
……………
……………
</body>
Nah yang itu disebut HTML Code
truss... apa sih fungsi dari masing-masing. yap, sedikit saya jelaskan. Kalau saya salah ngartiin mohon maaf ya. :)
begini... jika kita ingin merubah warna, lebar, tinggi, masukkan gambar, dll, maka di CSS Code-lah tempatnya. Dan untuk HTML Code adalah pengejawantahan dari CSS Code agar setingan yang berada di CSS Code dapat ditampilkan di browser. Walaupun sebenarnya HTML Code bisa juga ditampilkan tanpa ada kaitan dengan CSS Code. Mungkin gitu................
Secara umum template blogger seperti berikut :
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*<!-- SKIN CONTENTS -->
]]></b:skin>
</head><body>
<!-- BODY CONTENTS –>
</body>
</html>
Di SKIN CONTENTS dan di BODY CONTENTS –lah kita akan berkreasi.
Waduh... g terasa dah pegel nih jari... insyaAllah dalam waktu dekat akan saya posting lagi kelanjutannya
Bersambung…
0 komentar:
Posting Komentar