Tutorial Edit Template

Dah lama nak buat posting ni, kawan² pun dah ramai yang menunggu, kali ni aku akan buat tutorial request kawan² iaitu Cara Edit Template. Untuk mengedit sesuatu template, blogger perlu mengetahui tentang CSS dan HTML. Tahu Tak? Aku pun tak tahu heuheuheu... Aku tahu tapi serba sedikit saja dan sekarang ni masih dalam proses pembelajaran... Secara ringkasnya di sini aku terangkan cara mengedit template, walaupun ringkas tapi ianya mampu menghasilkan template yang menarik dan luar biasa .

Cara mudah dalam mengedit template blogger adalah dengan memuat turun / downmload sebuah template, anda boleh memulakan dengan template biasa / default seperti Minima Black, Kemudian membuatnya 3 Column ataupun download mana² template 3 column yang sedia ada. 2 Column pun boleh jugak laaa .

AMARAN : Jika ingin mencuba tutorial ini sila membuat backup terlebih dahulu atau buat satu blog baru!
Setiap template memiliki kompenen² utama seperti Background, Header, Main, Sidebar dan Footer seperti dibawah ini.

Untuk memiliki kesemua kompenen bergambar anda perlu menggunakan software image editor seperti Photoshop, Photosketch, Corel, Paint dan lain² untuk mencipta kompenen² tersebut, dan anda juga boleh menggunakan code warna sahaja jika tidak mahu ianya bergambar pada semua kompenen di atas. Bagi mereka yang mengingkan kompenen bergambar berikut adalah langkah-langkahnya.

1. Buat rekaan kompenen² seperti diatas contohnya seperti header dalam blog aku ni aku reka sendiri menggunakan Photoshop.

2. Pada bahagian Background pula kalau nak, letak gambar ciptaan sendiri dan jika inginkan ianya berbentu abtrak cipta satu lakaran abstrak kecil sahaja tidak perlu besar kerana background bersifat Tile/Pattern seperti desktop komputer.

3. Untuk bahagian Main dan Sidebar terdiri daripada bahagian utama Posting dan Gadget. Anda juga boleh meletak gambar pada bahagian ini tetapi biasanya dikosongkan untuk memudahkan bacaan kecuali anda inginkan keunikan citarasa anda sendiri.

4. Upload kompenen² tersebut pada laman webhosting, imagehosting seperti Geocities, Photobucket, Imageshack, Picasa Album dan sebagainya.

Beralih kepada coding pula, berikut adalah susunan kompenen² di dalam menu Edit HTML.
Login ke ID atau terus Dashboard > Layout > Edit HTML

BACKGROUND

body {
background: #FFFFFF url('http://i278.photobucket.com/albums/kk115/jiwangzz/Ima-115.jpg') no-repeat center center; }
margin: 0px;
padding: 0px;
text-align: left;
font:$bodyfont;
}

Coding di atas merupakan background untuk sebuah blog. code #D8AFD adalah code warna dan url di atas adalah gambar pada Background blog tersebut contoh seperti dibawah ini.

http://i278.photobucket.com/albums/kk115/jiwangzz/Ima-115.jpg

Rujukan Lain : Tutorial Background


HEADER

Sesetengah blog yang di download, header akan berada pada coding seperti dibawah ini dan ada juga yang tidak mempunyai gambar header tetapi masih dimasukkan melalui Gadget yang hanya perlu di Edit.

#header {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaRioT7louxNaIe0VuqdKDFycVNHni2p-bJBWkvZXPF_UrUboCa-oxYyoHSO2xRl8TfuBIvS6Np1BgPkgMj4U2U4ZOsSoMciXJyyv3p1APCq-nP7lgw914q2lxjiowG9sjtwCjcj0opaey/s1600-r/header-bg1+copy.jpg') no-repeat top center;
margin: 0px;
width:980;
color: $pagetitlecolor;
}


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaRioT7louxNaIe0VuqdKDFycVNHni2p-bJBWkvZXPF_UrUboCa-oxYyoHSO2xRl8TfuBIvS6Np1BgPkgMj4U2U4ZOsSoMciXJyyv3p1APCq-nP7lgw914q2lxjiowG9sjtwCjcj0opaey/s1600-r/header-bg1+copy.jpg


Rujukan Lain : Tutorial Header


MAIN

#outer-wrapper {
width: 980px;
margin: 0px auto 0;
text-align: justify;
}

Template biasa menggunakan #outer-wrapper dan di sesetengah template menggunakan #content-wrapper namun fungsinya sama sahaja. Bahagian coding ini adalah lebar keseluruhan blog yang memuatkan Main dan Sidebar. Code width: 980px; menunjukkan kelebaran sesebuah blog dan ianya boleh diubah tetapi mestilah mengikut kesesuain daripada Sidebar + margin + Main + margin + Sidebar = width pada # outer-wrapper. Jika kelebaran pada bahagian ini kurang, masalah Sidebar turun kebawah pada Posting akan berlaku, dan jika terlebih Sidebar pada sebelah kanan biasanya tidak akan sama jaraknya dengan Posting berbanding Sidebar sebelah kiri. (kerap terjadi semasa membuat 2 column kepada 3 column)

#main-wrapper {
float: left;
width: 445px;
margin: 5px;
padding: 0px 0px 0px 10px;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;
}

Coding diatas pula mewakili posting di dalam blog. Code width: 445px; adalah lebar Main yang berisikan Posting, ianya jugak boleh diubah mengikut kesesuaian.


SIDEBAR

#sidebar-wrapper {
float: right;
width: 200px;
font-size: 83%;
color: $sidebartextcolor;
line-height: 1.4em;
word-wrap: break-word;
overflow: hidden;
}

Code width: 200px; di atas adalah lebar Sidebar sebelah kanan, bagi yang mempunyai 3 column #left-sidebar-wrapper akan muncul pada bahagian bawah coding di atas serta mempunyai coding yang serupa tapi pada float: akan berubah kepada float:left; kerana berada di seblah kiri.

Rujukan Lain : Tutorial Sidebar


FOOTER

Footer biasanya kosong tetapi Add a Gadget disediakan jika anda ingin meletakkan gambar atau kata² keramat yang disukai. Anda boleh menambah code seperti dibawah ini untuk meletak gambar anda sendiri.

#footer {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij7REurR3erqAlXxnOzONT1d4Q2rLGWzSwsY6N4B2jcZhmuwFLegUugHJmhgdJUPrCEDjqTlI2AZrJurwscsZbGdaeKd9Ps1I6ktV2GvzBqMcJDO48YydhAeVevzOlF34xGxyJnfeqGH1Q/s974-r/footer-bg.jpg') no-repeat top center;
margin: 0;
width: 980px;
padding: 0px;
}


P/S : Setiap template mempunyai coding yang tersendiri dan berubah-ubah, tutorial ini hanyalah asas untuk panduan yang ingin mengenal coding yang berada di dalam template. Adess... Penat buat tutorial ni .

Semoga Berjaya