DASHBOARD HOME TUTORIAL TEMPAHAN MY DESIGN

Bahagian footer pulak

Step pertama: Pergi ke Layout > Edit HTML. Tekan Ctrl+f untuk memudahkan korang mencari code yang aku nak suruh cari ni. Paste kan code kat bawah ni dalam kotak find:
#footer {
korang akan jumpa code macam ni:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Kita boleh tengok yang width footer kita adalah 660px(tulisan merah) sedangkan kita dah tukar width header dan body jadi 1000px dalam tutorial sebelum-sebelum ni. Jadi sekarang kita akan ubah width footer supaya ngam dengan bahagian body. Tak payah pening-peningkan kepala korang. Highlight seluruh code tu dan gantikan dengan code kat bawah ni:
#footer {
clear:both;
margin:0 0 0 0;
padding-bottom:70px;
padding-top: 20px;
line-height: 1.6em;
text-transform:normal;
letter-spacing:.1em;
text-align: center;
background: url(Masukkan URL Footer Anda Disini) no-repeat bottom center;
height: auto;
}
Ok, setel . Pada tulisan merah tu nanti kita akan masukkan URL footer kita. Tapi, sebelum tu, kita kenalah buat footer kita dulu. It's Photoshop time!
Step kedua: Create new file di Photoshop dengan width 1000px dan height ikut suka hati. Aku akan buat footer dengan height 92px. Gunakan ke-kreatif-an dan segala bakat terpendam untuk buat footer belog korang. Aku buat simple macam ni:

Click untuk gambar yang lebih jelas.

Step ketiga: Upload footer yang korang dah buat tu dalam Imgur untuk dapatkan direct link. Copy direct link dan paste-kan dalam code HTML yang aku suruh tadi. Selepas dah siap paste, preview dulu belog korang sebelum save template. Belog korang sepatutnya dah jadi macam ni:


Pemandangan daerah footer.

kalau dah puas hati, tekan SAVE TEMPLATE. Semoga tutorial ni mudah untuk difahami dan dipraktikkan.

Kredit By:Belog Cap Ayam
TERIMA KASIH SUDI BACA DAN KOMEN

Bahagian Header Untuk Template Whita Part 2

Dalam Tutorial Part I, kita dah belajar macam mana nak buat bahagian body untuk layout kita.Sekarang kita belajar   cara simple untuk customize bahagian header/banner.

Pergi ke Layout > Page Elements > Tekan ' Edit ' pada bahagian header > Browse header korang > Save! Cara ni semua orang pun dah tahu kan? Dengan menggunakan function Edit ni, korang tak payah susah-susah nak upload header korang di Photobucket untuk dapatkan direct link dan juga tak perlu nak resize gambar yang nak dibuat header. Cukup dengan tick pada kotak macam dalam gambar di bawah SEBELUM korang browse gambar yang nak diupload sebagai header tu:


Sebelum customize header, korang mungkin nak tukar width header korang supaya sama dengan outer-wrapper (area dimana entry dan sidebar korang berada). Kalau tak, header korang akan jadi kecik dan tak ngam dengan bahagian entry dan sidebar. Dalam tutorial Part I, aku dah ajar macam mana nak ubah width belog korang, jadi hari ni kita belajar macam mana nak ubah width header pulak.

Step pertama: Pergi ke Layout > Edit HTML. Tekan Ctrl+f untuk memudahkan kerja-kerja pencarian.
Step kedua: Untuk pengguna template Minima, korang boleh tengok dekat title belog korang tu ada 2 border. Sekarang kita akan hilangkan border tu. Paste code ni dalam kotak find: 

#header-wrapper {

korang akan jumpa something macam ni:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;

}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
Erase seluruh code tu.

Step ketiga: Di bawah code yang korang dah erase tu korang akan jumpa code ni:
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0; padding:15px 20px .25em;line-height:1.2em;
text-transform:uppercase;letter-spacing:.2em;
font: $pagetitlefont;
}
Untuk memudahkan korang (dan aku, sebab aku malas nak ajar satu2, bahaha), highlight seluruh code tu, dan paste code dibawah ni:
#header {
width: 1000px; height: 300px;
border:0px solid $bordercolor;
color: $pagetitlecolor;

text-align: center;
}

#header h1 {
margin:0px 0px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Sekarang width header korang dah jadi 1000px, sama dengan width outer-wrapper yang kita dah ubah dalam Tutorial Part I. Height tu terserah pada korang nak buat berapa. Sebagai contoh, aku buat header dengan height 300px je. Kali ni aku taknak banner aku ada border, sebab tu aku set-kan border kepada 0px (tulisan biru). Jangan lupa SAVE template. Selepas tu, korang boleh edit layout seperti biasa di Layout > Page Element. Korang boleh cari gambar yang sesuai dekat internet untuk dibuat header, ataupun buat header korang sendiri. Kalau nak buat header sendiri, kita teruskan ke step ketiga.
Step keempat: Create new file di Photoshop dengan Width: 1000px dan Height: 300px. Design header menggunakan ke-kreatif-an korang. Aku buat simple-pimple macam ni je untuk tutorial kali ni:
Click untuk pembesaran rajah.
Kalau korang nak buat header macam contoh aku bagi ni, pastikan background belakang header tu sama dengan warna background belog korang. Kalau nak tukar warna background belog, cari code ni:
body {
Nanti korang akan jumpa code macam ni:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;font-size: /**/small;
text-align: center;
}
Pada $bgcolor tu, gantikan dengan code warna yang korang nak, contohnya #000000 untuk warna hitam. Mana nak cari code warna? Dekat Photoshop ada, dekat SINI pun ada. Kalau dah pilih warna yang berkenan di hati, tekan SAVE.

Code warna di Photoshop.

Ok, sekarang kita dah ada header sendiri. Yeay!

Step keempat: Korang boleh terus upload header korang di Layout > Page Elements > Edit bahagian Header > Browse header korang > SAVE. (dah 2 kali ulang part ni T___T). View  belog tengok sama tak header gan body...kalau tak sama terus edit lagi okey...biar betul2 sama cam kat bawak...:

Nie baru bahagian header...tunggu bahagian Footer pulak...buat template nie memang pening sikit....kena banyak sabar...

Kredit By:Belog Cap Ayam



TERIMA KASIH SUDI BACA DAN KOMEN

Freebies: Template Minima White Part 1


Atas permintaan  fieda dan izan, dalam entry kali ini saya sertakan link untuk kau orang copypaste template Minima White yang saya pakai setiap kali mendesign blog. Semua tutorial saya boleh diaplikasikan pada template tersebut ^___^

First step: Apa-apa hal pun back up dulu current layout korang. Takut nanti tak berkenan dengan layout baru, ada yang frust menonggeng pulak. So, pergi dekat Layout > Edit HTML > Download Full Template > Save File. Jangan lupa kat mana korang save sudahlah T______T

Second step: Pick new template > pilih template Minima > save. Kenapa template Minima? Sebab template ni paling basic dan senang nak diedit2. Lepas tu Kita kena cari dulu berapa lebar layout yang kita nak kena buat. Tekan Ctrl+f untuk memudahkan kerja-kerja pencarian. Dalam kotak find dekat bawah tu, paste kode ni:
#outer-wrapper {
Kau orang akan lihat something macam ni:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
}
Ok, dekat situ kite boleh tengok yang width (lebar) template minima adalah 660px. Kalau korang nak tambah lebar belog, editkan pada bahagian width tu. Untuk tutorial ni, aku edit lebar belog tu jadi 1000px.

Third step: Kita pindah ke sesi photoshop untuk design bahagian body. Body ke apa ntah, tapi aku namakan je body. Haha. Dekat photoshop, tekan File > New dan masukkan width mengikut lebar belog masing-masing macam ni:
Height (tinggi) tu letak lah berapa pun yang korang nak. Tapi sebenarnya tak perlu pun besar-besar. 50px pun dah cukup sebab image tu kita akan buat kasi repeat sampai ke bahagian paling bawah belog tu nanti. Dekat photoshop, korang design lah macam mana korang nak untuk bahagian body belog korang. Contohnya aku buat macam ni:
Click untuk gambar lebih besar.
Gambar yang kau orang design tu akan jadi backgroud untuk entry dan sidebar. Contoh yang aku buat ni adalah sangat basic. Kau orang boleh buat yang jauh lebih-lebih-lebih bombastic.
Step Ke-empat: Sekarang uploadkan gambar tu dekat Sini. Selepas Upload, korang akan dapat direct link untuk link  gambar itu:
Step Ke-lima: Dekat code yang aku suruh korang cari tadi, highlight semuanya dan paste kan code kat bawah. Masukkan direct link gambar tu dekat tulisan berwarna merah macam dekat bawah ni:
#outer-wrapper {
width: 1000px;
margin:0 auto;
background: url(Masukkan DIRECT LINK gambar korang di sini) repeat-y;
padding:0px;
text-align:left;
font: $bodyfont;
}
Kemudian, tekan preview. Sekarang korang akan dapati ruangan entry dan sidebar korang macam dah sewel sikit. Jadi sekarang kita akan betulkan 2 bahagian tu. Dekat bawah code yang korang paste tadi korang boleh lihat ada code ni:
#main-wrapper {
width: 600px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Pada code tu, highlight kan semuanya dan paste-kan code ni:
#main-wrapper {
width: 600px;
margin-top: 0px;
margin-left:50px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Scroll bawah sikit dan korang akan jumpa code:
#sidebar-wrapper {
width: 290px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
sila highlight dan gantikan dengan code ini:
#sidebar-wrapper {
width: 290px;
float: right;
margin-top: 0px;
margin-right: 25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Apa sebenarnya yang korang dah buat dengan mengcopy-paste semua mende alah ni? Sebenarnya korang telah mengubah posisi untuk main-wrapper iaitu bahagian entry korang dan juga sidebar dengan menggunakan code margin-top dan margin-right/left.
Lepas dah copy-paste semua yang aku suruh tu, korang preview dulu dan blog korang akan jadi lebih kurang macam ni:
Ok, korang boleh tengok yang tulisan korang tak jelas lah bukan? Sila main-main sendiri dengan warna dan font (kalau nak tukar) di Layout > Fonts and Colors.

Kredit By: Belog Cap Ayam

TERIMA KASIH SUDI BACA DAN KOMEN

Tutorial Letak Background Cbox yg COMEL



tuto ni request by shera . okay tengok dulu background cbox tu macam mana . kat bawah ni


 copy code bawah ni

<center><div id="edited" style="width:250px; height:190px; background: url(BACKGROUND CBOX) no-repeat left top; padding-top:65px; padding-left:0px; position:relative" align="center">CBOX CODE</div></center> 

 yg bold tu gantikan dengan url background cbox . kat mana nak cari ?
      tengok kat freebies ni   . lepas tu pulak letak cbox code hampa nah .

 lepas tu nak paste kat ...

USER BLOGSKIN / SIMPLE TEMPLATE : hampa tau kan cbox code sebelum tu ada kat mana . so gantikan dengan code yg baru ni

USER DENIM & LAIN² : cuma add gadget then paste kat situ .

 adjust height dengan width tu . ni aku cuma suggestkan height dengan width yg aku guna
      width : 270px; height : 260px;

 boleh jugak kalau nak selitkan apa² ayat macam aku punya tu . tengok kat bawah ni . 
      kalau boleh jangan terlalu panjang lah . nanti tak kemas



 preview then save !
 
Kredit By:Fieza

TERIMA KASIH SUDI BACA DAN KOMEN

tutorial float status





aku nak share macam mana nak buat float status . ada kelainan sikit dari status yg biasa kita tengok . float status nie bila kita scroll ke bawah , dia statik kat situ kan ? kita still boleh tengok status kat blog orang tu . contoh tengok kat atas sebelah kanan tu ada tulis fieza's status . coding nie aku reka & olah sendiri dari coding status yang asal .

mula macam biasa pegi

dashboard > design > page element > add gadget > html/java script



<div style="display: scroll; position: fixed; right: 10px; top: 10px;">
<img border="0" src="url gambar" /></div>

<div style="display: scroll; position: fixed; right: 17px; top: 40px;">
<center><marquee marquee="" scrollamount="4" width="147">status anda </marquee>
<center></center></center></div>
<div>
</div>

untuk background status
biru : boleh tukar right / left / top / bottom
hijau : adjust mengikut kesesuaian
merah : letak url gambar

untuk ayat status
biru : boleh tukar right / left / top / bottom
hijau : adjust mengikut kesesuaian
kuning : kelajuan ayat
biru muda : kelebaran ayat (supaya tak terkeluar dari kotak status)
purple : status anda nak tulis




kalau dah malas nak buat sendiri boleh amik jea yang nie .

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYWOvgoerNAsON20rgGFS4wcCrDICo91ZwblVqyVaAphtSghNN13-PAA2nk73-9R5J1UV3mUl1iYlpqbiHcf_1vSgvjw5HAgrHWNxP1OvrXuVv3dkyV0Yj6pIydej-X0YZBHYtotyV4A58/s1600/fiezamirza_mystatus_red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpsi-I4Jz0m6_qRtgZHtpo4nHwEtZIOBCLzsi24uotAbaviqdxNqSlLqdY10WzNgKwsvgyFiDK-fe9OrkkXgNwrKwXqZwVUg3Vv8Cl0TWIoC8RlZbDaD6d9zQQtR2am47lZlufqZofh7H/s1600/fiezamirza_mystatus_purple.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iM1oOQcJt6NATftMHScweLIhqOgzUvcb6jbtQM458Vx99a9z6xa75fxRLHC1Za0djFIKHe7qnGvzef7XRgJ8ZBvPm6MBEMUCFflOOQZqziEGGS55H8mtUnXt3eD4cdO2GIYKrVZmBq3V/s1600/fiezamirza_mystatus_pink.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9dIMX5cK6AwWMxyh1EwMRxOKt7A3-DBrRubiFllHRi9Ydc7lGUYPm7shr1N4hVDukufpbe-2Xy_QZWUATOLSHucwHegBXVHvgYLJfV66eEHW1boQc7k8ur480kgjJY-aV4dU1zOzobzAi/s1600/fiezamirza_mystatus_green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlU8oBRyKG2MtEG5-jA-y1JoWTzVdsplSgF56X7TmDYDz81qVMQJVqCLt7qa96xNxJZ-7HM9C12O2Con3idQvau8jRFcrZx7otldD0WMCfYkHIp-5XHtKQ7tU-fsxvgrwo3hojHm0tkTR/s1600/fiezamirza_mystatus_blue.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbr1kX1K-nF2xXNPw_sb3tP3lbZVEjdzKYZ8w6AyMfM_O7FF7hvCZ2E8Dc5lHThSoJahkSPDAFaphCsGxXvQY5P2Jrh2MVVfqTf3vSS-knLtxl_JIzmbskqRBP7ryye6PJ8uePr1YTEHUw/s1600/fiezamirza_mystatus_black.png



Kredit By Fieza

TERIMA KASIH SUDI BACA DAN KOMEN