19 August 2012

Tutorial : Design & Decorate Simple Template (Part 1)

Aina Sofea | 12:22 PM | 3Comments |
Assalamualaikum !
Apo Khabor ??
Bismillahirrahmanirrahim ,

Pada hari ni , saya nak kongsi cara saya edit blog yang tak seberapa ni . Tapi , cute kan ? (Mulalah tu)
Saya nak kongsi tuto ni , supaya korang boleh nikmati belog cute jugak .
Lagipun , korang nak hias blog korang jadi kemas dan cute , kan ? Ha .. jom deco !

First , korang kena tukarkan template korang kepada Simple Template (lebih baik download full dulu) . Then , korang fikirkan tema untuk blog korang.
Contoh :

  • Warna biru muda campur dengan putih krim
  • Nak ada gambar pari-pari comel
  • Nak ada ekspresi dalam dunia kayangan
Da fikir ? Oraitt , jom start !

Header
*Header pula , korang kenalah buat ikut tema yang korang fikirkan tadi
  1. Buka software korang (cth:Photoshop , Photoscape)
  2. Design header mengikut kretiviti
Extra !!

Kalau korang guna Photoshop , bagi menambahkan kretiviti header , boleh ikut tutorial Iyra ni .
Kalau tak nak buat clipping mask , boleh ikut step yang sy bagi :

  1. Tulis text korang dengan warna-warna menarik (cth:pelangi , turquoise+hitam)
  2. Klik gambar 'fx' . Kemudian , klik Bevel & Emboss
  3. Tukar warna shadow dia (hitam ke kelabu)
  4. Kemudian , tanda tick kat Stroke .
  5. Tukar warna stroke tu (hitam ke putih)
Warnakan content
*Maksud warnakan content ni adalah bagi ada border kat content tu
  1. Design > Edit HTML
  2. Cari (Command + F) "content-wrapper {"
  3. Jumpa ? Orait . Scroll kebawah dan copy kod yang ada .
  4. Paste kod-kod tu dibawah kod yang korang cari (content-wrapper {)
  5. Edit kod tu mengikut panduan yang diberi
  6. Preview dan Save
border: 3px solid #000000;
border-radius: 20px;
PANDUAN :
Purple : Ketebalan border
Merah : Jenis border (solid , dashed , double)
Biru : Kod warna border
Maroon : Kelengkungan border

Tukar font dan warna
Credit to : SHE
*Korang mesti nak font cute mcm lemons can fly , short stack , kan ? Jomla kita buad !

  1. Design > Edit HTML
  2. Cari (Command + F) "<head>"
  3. Scroll kebawah dan copy kod yang ada
  4. Paste kod tersebut dibawah kod yang korang cari tadi (<head>)
  5. Save (sekiranya tidak menjadi , ia tidak akan memberi sebarang kesan yang buruk)
<link href='http://fonts.googleapis.com/css?family=short stack' rel='stylesheet' type='text/css'/><base target='_blank'/>
PANDUAN :
Magenta : nama font yang korang suka

Bila korang view , mesti tak jadi apa-apa ,kan ? yep ! Sebabnya , kite kena ikut pulak step satu lagi !


  1. Scroll kebawah . Cari (Command + F) kod-kod yang ada (Design > Edit HTML)
  2. Gantikan Arial dengan nama font yang korang letak kat step atas tadi
  3. Preview and save
              default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial">;
Background (Sekali dengan freebies)
* Huh , mesti korang da rimas dengan background biru dia tu , kan ?

  1. Design > Page Elements > Add A Gadget > HTML/Java Script
  2. Jangan letak tajuk !
  3. Isikan kotak tu dengan kod dibawah
 <style>body{background:white url(
URL Background) fixed;}</style> 



"URL Background" tu gantikan dengan url background yang korang suka .
Korang boleh ambik freebies dibawah . Cari URL dia sendiri ya:








Background tu , sy yg buat ! Jadi , kalu nak re-freebies , kasitau dulu .
Cukuplah setakat ni utk part 1 . Insya Allah nanti sy sambung part 2 pula ! Nantikan yer !

3 comments:

  1. salam, aina. Nak tanya. mcm mna aina buat button yg ada gambar home, facebook, instagram, email dan like tu?

    ReplyDelete
    Replies
    1. http://www.thedarlingblog.com/2012/10/free-scalloped-border-social-media-icons.html :)

      Delete

Tinggalkan komen , jom ?? LIKE SINI dan FOLLOW SITU lah juga yaa ?? ^_^



"Budi Bahasa Budaya Kita"