Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

19 August 2012

Tutorial : Design & Decorate Simple Template (Part 1)

Unknown | 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 !

ditaip oleh tepat kul 3 comments:

07 April 2012

Tutorial : Header Cute (termasuk cara mencari gambar)

Unknown | 5:21 PM | 5Comments |
Assalamualaikum !
Apo Khabor ??

Dear Diary ,

Yay !! 1st time orang suruh beri tunjuk ajar !! Hehe .. Jom tengok permintaan peminta bertuah ni :
 
Namanya , Tykah .

Jom Teruskan Tuto !!

Mencari Gambar Cute
  1. Buka Google 
  2. Taip chibi 
  3. Ambil mana-mana gambar yang anda suka !!
  4. Download gambar tersebut
Membuat Header
  1. Adobe Photoshop : tekan File > Place ... > Gambar
  2. Kecilkan mengikut saiz yang bersesuaian 
  3. Pada Toolbar , tekan huruf T 
  4. Tulis apa yang perlu 
  5. Sesedah menulis , tekan Move Selection 
  6. Kemudian , alihkan pointer ke arah Layers 
  7. Tekan huruf FX 
  8. Pilih Stroke
Untuk lebih jelas , KLIK SINI
ditaip oleh tepat kul 5 comments:

31 March 2012

Akhirnya Dapat Juga Buat Banner !! Letak Kat Sidebar Korunk Okay ?!

Unknown | 4:17 PM | 3Comments |
Assalamualaikum ...


Dear Diary ,


Selama ini , saya duk tengok banner orang lain ... Saya pun terfikir nak buat gak .. Tapi ?? Huhu !! Saya cari tutorial-nya di Google , harus guna PHOTOSCAPE !! *Maaf kalau ayat ini mensuspen-kan korunk . Dalam otak korunk , pasti duk tanya , "Photoscape ? Jadi , kenapa ??" . Bagi yang terfikir macam tuhh , comment , okay ?? 


Sebenarnya , saya guna laptop Mac OSX . Saya nak tanya korunk , boleh tak download photoscape kat laptop Mac OSX ?? Kalau boleh , tolong kasi link !!


"Kalau tak boleh download photoscape , macam mana boleh 'DIA' buat banner ? Atau , dia tempah kat orang ??" Terfikir tak ?? Ha .. Inilah yang saya nak kasitau ni ! Kepada sesiapa yang malas nak download Photoscape , korunk boleh guna cara saya !!


"Macam mana ?? Photoscape online ?" Hurmm .. Kurang Tepat ya !! Saya tak guna apa-apa PHOTOSCAPE pun !! Of coz la guna cara ONLINE !! Nak tahu macam mana ?? ~>


Step :



  1. Pergi ke LINK INI
  2. And Then , scroll ke bawah 
  3. Adjust saiz dan kelajuan 
  4. Upload gambar-gambar (banner) yang korunk dah buat menggunakan Adobe Photoshop (lihat gambar diatas . Tekan yang digaris dengan warna hitam dan merah untuk tambahkan gambar/letak gambar . Tekan yang digaris dengan biru selepas selesai tambahkan gambar/letak gambar)
  5. Tekan SUMBIT 
  6. Cari (CTRL + F) Download GIF dan tekan ia
  7. Pergi SINI untuk dapatkan URL-nya
Okay ! Dah terbuat tutorial dah ni ! Hihi .. :)

Letak Banner dibawah ya !!





Thank You !!


ditaip oleh tepat kul 3 comments:

18 March 2012

Tutorial : Cursor (Bertulisan) & Cursor Hover

Unknown | 3:46 PM | 0Comments |
Assalamualaikum ...


Dear Diary ,


Hye korunk ! Apa khabar ? Moga kalian sihat-sihat disana (kalau tak sihat , pastikan ke klinik segera) .
Hari ini , saya nak ajarkan cara untuk membuat cursor bertulisan . Tapi , korunk kena janji dengan saya sesuatu . Korunk kena comment entry ni taw ! Promise ?


First of all , saya nak beritahu kalian bahawa TUTO ini tidak diambil dari mana-mana pihak . So , baca setiap huruf yang saya tulis . Nanti korunk tak faham . Kalau dah jadi , kasitau saya ya !


Step 1 : Sediakan Cursor



  1. Pilih cursor pilihan anda DI SINI 
  2. Save GAMBAR cursor tu 
  3. Buka Paintbrush/Adobe Photoshop CS5/Photoscape
  4. Masukkan GAMBAR cursor yang korunk dah pilih 
  5. Letakkan APA-APA TULISAN di bahagian yang korunk nak 
  6. Apa-apa tambahan , ikut suka korunk-lahh 
  7. Jangan lupa transparent-kan background 
  8. Save !
Perkataan yang dimerahkan bermakna penting untuk dibaca .

Step 2 : Memasukkan Cursor Sekaligus Cursor Hover
  1. Copy kod di dalam scroll box







<style type="text/css">body, a, a:link{cursor:url(URL CURSOR), default;} a:hover {cursor:url(URL CURSOR),wait;}</style> 


     Merah = URL cursor yang korunk buat tadi . Upload di mana ? ~> SINI 
    Biru = URL cursor lain (cursor hover/apabila menyentuh link) . Cursor-nya boleh didapati DI SINI   

    2.  Dashboard ~> Design ~> Add A Gadget 
    3.  Paste kod di dalam ruangan yang diberi
    4.  Dah siap ? Save

Okay ? Jadi Tak ? Kalau tak reti nak buat , boleh order DI SINI .







    

ditaip oleh tepat kul No comments:

10 March 2012

Tutorial : Kelengkapan Utama (Template & Background)

Unknown | 4:44 PM | 0Comments |




Dear Diary ,


Tuto kedua saya ni dibuat kerana saya bosan , okay ?! Saya sarankan , kalau kalian dah complete kelengkapan utama blog anda , sila balik rumah (maaf kalau ini terlampau biadab) . For yang belum lengkap , kita teruskan okay >>> ?



  • Template
  1. Pergi ke sini atau sini untuk mendapatkan template
  2. Pilih template yang anda suka .
  3. Then , download template (cara untuk gunakannya ada di laman web template yang anda pilih)
  • Background
  1. Pergi ke sini untuk mendapatkan background
  2. Pilih background yang anda suka
  3. Copy kod yang diberi
  4. Dashboard ~> Design ~> Add A Gadget ~> HTML/JavaScript
  5. Paste-kan kod yang anda copy pada ruangan yang diberi
  6. Save !
Dah siap ? Okay , kita tengok hasil . Macam mana ? Memuaskan ? Hope you guys suka . 


Outlined Text Generator at TextSpace.net
ditaip oleh tepat kul No comments:

04 March 2012

Tutorial : Tukar Fonts (Isi Blog Dan Tulisan Menu Tab)

Unknown | 11:42 AM | 0Comments |













Dear Diary ,
Alhamdulillah . Inilah tuto pertama Aina . Setelah sekian lama berfikir , baru sekarang
nak adakan tuto ni . Kalian dah bersedia ? Oh , lupa pulakk . Kalian tak tahu yang mana
saya cakapkan ini ? Lihat sample dibawah :


Nampak ? Kalau rabun , maaflah yer . Font apa tu ? Aik ? Dulu Times saja .
Sekarang dah Lucida Handwriting ?


Ni pulak . Sidebar . Lucida Handwriting dah ? Biar benor ?
Okay , guys . Nak start tuto da ni . Ada apa-apa soalan ? Tanya
sat gi la .

  1. Dashboard ~> Design ~> Edit HTML 
  2. Cari Kod (Tekan command dan F serentak) Di Kotak Scroll 
  3. Kod tu ada berapa ? Kalau banyak sekalipun , ambil yang pertama ! (faham tak ?)
  4. Tepi kod , ia akan tertera font asal blog anda . Jangan padam !
  5. Sebelum font asal anda , tambahkan font yang anda suka . (Font boleh cari di sini)
  6. Then, Preview dulu !
  7. Dah puas , SAVE !















font-family:




      Enjoy ,


Outlined Text Generator at TextSpace.net
ditaip oleh tepat kul No comments:
Subscribe to: Posts (Atom)