Buat Template Sendiri

Okeh.,.nah penasaran pingin ngeganti template blog kamu sendiri.. okeh, mungkin ini bisa mengobati rasa pensaran itu sedikit..huahahhaha..nah, sebenarnya kita tidak akan “membuat template” tapi, “mengedit template” jadi template blog lain akan kamu edit biar jadi buatan kamu.. okeh(lagi).. pertama, kamu download dulu file template.txt di sini..

Okeh..

Sesuai dengan judulnya.. jadi step pertama adaalaah..:

- Nah, lebih baik kalau kamu mau bikin template kamu harus tahu dulu bagian-bagiannya.. nah kukasih liat ya..

Jadi kamu untuk mengganti style nya, kamu siapin gambar-gambar (kamu bikin dulu design gambarnya) buat komponen-komponen tadi,..misalnya kalau template gw

Header nya:

**untuk header kali ini kamu buat ukurannya lebar >1000px tinggi> 300px

Inget ya.. ukurannya bukan di ukur dengan cm , tapi dengan px (pixel) kamu bisa edit ukurannya di Ms. Office Picture Manager >Edit Picture>Resize

Backround:

** nah untuk Backround, ukurannya terserah kamu..alias BEBAS

Main:

** buat gambar Main-nya ukurannya juga bebas,,

**Tapi di template ini gw gak masukin footer.. ok..

Lanjuut

Kalau kamu udah milih gambar-gambar buat komponen tadi (backround, main, header)

Nah upload file-file tadi ke webhosting atau layanan penyimpanan file lainya (misalnya photobucket, atau tinypic, atau lain-lain) sudah..nah jangan tutup jendela uploadan tadi..

Sekrang buka file template.txt tadii..

Dan cari text ini

body {

background:$bgcolor;

background-image:url(http://i36.tinypic.com/28tv1cl.jpg);background-position: top center;background-attachment: fixed;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

ganti tulisan ini > http://i36.tinypic.com/28tv1cl.jpg

dengan Direct Link gambar BACKROUND kamu..

trus cari lagi text ini

#header-wrapper {

width: 1000px;

height:300px;

background-image:url(http://i36.tinypic.com/2n0k9hv.png);

border-bottom: 0px solid $bordercolor;

margin-left: 0px;

ganti tulisan ini > http://i36.tinypic.com/2n0k9hv.png

Dengan Direct Link gambar HEADER kamu..

Lalu cari lagi text ini

#outer-wrapper {

width: 1000px;

margin: 0px auto;

padding:0px;

text-align:left;

font: $bodyfont;

background-image:url(http://i36.tinypic.com/2na5pic.jpg);background-position: top center;background-attachment: fixed;

border:0px solid $bordercolor;

ganti tulisan ini > ://i36.tinypic.com/2na5pic.jpg

http

dengan Direct Link gambar MAIN kamu..

nah ini bagian tambahan..

kalau di bawah suatu postingan pasti ada pembatasnya nah,, gambar pembatasnya ini bisa dengan gambar kamu sendiri..misalnya kalau di template gw sekarang gambarnya ini :

Kalau kamu mau ganti gambarnya bikin /design dulu gambarnya.. ukurannya untuk sekatang kita pakai lebar: 480px tinggi:46px ..nah upload gambarnya ke webhostingan tadi (photbucket,/ tinypic)

Cari kode dibawah ini (Ctrl+F):

.post-footer {

margin: .25em 0;

background: url(http://i38.tinypic.com/osvjx2.png);background-repeat:no-repeat;background-position: bottom center;

color:$bordercolor;

text-transform:uppercase;

letter-spacing:.1em;

font: $postfooterfont;

line-height: 1.4em;

padding-bottom:140px;

Ganti kode ini http://i38.tinypic.com/osvjx2.png

Dengan kode Direct Link gambar kamu..

nah bagian ini juga tambahan.. kalau yang ini, untuk mengganti gambar ini.. diatas “Gadget” misanya gadgetfollowers, pasti ada tulisan Folowersnya kan.. nah,, kamu bisa ganti gambar itu..

ukurannya untuk sekarang kita pakai lebar: 180px tinggi:70px (boleh kamu ganti, asal jangan kauh-jauh dari angka itu, nanti gambarnya kepotong)aku kasih contohya..

sudah buat gambarnya..

Upload juga gambar tadi ke webhostingan tadi (photobucket/tinypic)..

Cari kode berikut (Ctrl+F) :

.sidebar h2, .rsidebar h2, .lsidebar h2 {

background:$bgcolor1;

background: url(http://i1017.photobucket.com/albums/af298/fairuz_inhar/litte-1.png);background-repeat:no-repeat;background-position:center;

color:$sidebarcolor;

font: $headerfont;

height:55px;

margin: 0 0 0px;

padding: 15px 0px 0px 0px;

border-bottom:0px solid $bordercolor;

text-align:center;

Kalau udah ketemu ganti kode ini http://i1017.photobucket.com/albums/af298/fairuz_inhar/litte-1.png

Dengan Direct Link gambar kamu tadi..

Oh yaa.. satu lagi.. icon blog kamu.. nah kalau di blog gw kan iconnya ini…

nah kamu juga bisa ganti dengan icon kamu sendiri… caranya..

cari kode ini :

<link href='' rel='SHORTCUT ICON'/>

Trus ganti SHORTCUT ICON dengan Direct Link gambar kamu..

Kalau semuanya udah di edit..save file template.txt tadi..

Sudah…. OK, now this is the final step DON’T SKIP IT.!!

1. Nah masuk ke Blogger kamu > Ke Tata Letak > ke Edit HTML ..

2. Checklist kotak Expant Template Widget

3. Dan copas semua kode HTML yang udah kamu simpen di file template.txt tadi ke kotak yang besar ini..

Suksess..ataauuu belum berhasil??
Biasanya sih waktu ngeeditnya ada yang salah.. ingat jangan hapus sekecil apapun kodenya..okeh!!
Cobacobadancobalagi kalau belum berhasill..okeh..
Ada pertanyaan kirim ke paipai.paii@yahoo.com atau langsung comment ya..

KALAU SUDAH SELESAI KAMU WAJIB BACA YANG INI DULU...