Monday, June 15, 2009

Home » » 161 Tutorial : buat background foto & label awan

161 Tutorial : buat background foto & label awan

Salam semua,

Harap semuanya sihat2 dan ceria2 belaka. Kali ni hanya nak berkongsi beberapa tutorial @ tips blog.

Iaitu cara nak membuat label awan dan membuat latarbelakang dengan foto sendiri.

1. Label awan

2. Emoticon yang 'cool'..

3. Membuat latarbelakang guna foto sendiri

  • 1st pastikan foto/image yang ingin digunakan dalam saiz 1200 x 900 @ 1600 x 1200
  • 2nd jika suka, buat lah editing ke atas photo.. kalo tak nak edit, guna original pun ok so tak perlu edit apa
  • 3rd untuk foto editing, boleh guna macam2 software contoh photoscape, adobe photoshop, kakyong guna nero photosnap viewer *masa beli laptop memang dah ade software ni, so guna ajer lah*
  • kemudian pergi ke website pyzam => http://www.pyzam.com/
  • kemudian klik pada backgroung uploader , (dalam foto dibawah, yang di kotakkan merah)

  • lepas klik situ, akan keluar sebegini

    klik pada yang ditanda anakpanah & upload foto yang dikehendaki
  • ini adalah contoh nya, bila anda sudah upload foto, pastikan anda tanda @ tick pada item yang dikotakkan merah itu, sebelum copy code.

  • kemudian copy code & pergi ke bahagian layout dan "add a gadget". Ini adalah contoh :

    jika begini background... hmm, akan jadi masalah bila buat entri, sebab latarfoto ini akan mengganggu pembacaan. Jadi masih perlu dibuat modifikasi. Maka perlu lah ruangan entri @ main post diedit @ diberi background berwarna, begitu juga dengan ruangan side-bar.

  • contoh yang kakyong gunakan ini, menggunakan template minima. Jadi pergi ke Layout & edit html.
    #main-wrapper { width: 410px; background: #FFFFFF; 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 */ }
    #sidebar-wrapper { width: 220px; background: #FFFFFF; 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 */ }
  • cari kod seperti yang diatas, untuk mudahkan carian klik shift-F3. dan taipkan kod yang dikehendaki. kemudian tambahkan kod yang berwarna merah. dan 'save'kan template.

  • hasilnya adalah seperti ini

  • jika berhajat untuk masukkan warna lain untuk main-wrapper & sidebar, boleh rujuk di sini => HTML Colors

note :

kakyong hanya belajar sendiri dan buat research sikit2 untuk belajar dan cuba-cuba untuk memahami kod html. Harap2 tutorial yang tidak seberapa ini dapat membantu.


kalo suka dengan n3 ni, sila tekan yer..!!

7 kawan ibu yang hebat:

Zuhaini said...

oh.. pakai pyzam.. :)

saya upload pakai google apatah.. pakai flickr pun bole juga..

rajinnya kak yong buat tutorial.. haha :)

Dj Epoi said...

Salam Walaweiiiiiiiiiiiiiiiiiiiiii......

Pening kepala Gua nak jadik benda nih siut!!!!!

Tak jadik2 ponk!!!

Hayatie said...

kak yong, kebetulan, ku dah buat label cloud 2-3 hari sebelum entri kak yong ni, jenuh ku mencari, akhirnya ku jumpa juga. Kak yong, cemana lak kalau ku nak tukar color font kat label cloud ni jadi hitam ke etc, takmo lah biru ni..ade idea tak?

wansteddy said...

thanks 4 da info k.yong... sngt2 berguna. dh lama wans cri cara nk wat cloud label tu kui3...

mirah said...

erk macam nak buat tapi tak reti. Nak godek2 pun tak sempat. Takpelah hold dulu tukar background nampaknya.. huhu

kakyong said...

zuhaini,
yg flickr tu tak reti lah... hahah.. tak sempat nak xplore lagi.. tak silap kena dl software nyer kan sblm guna utk dptkan kod..
mcm pyzam ni tak yah dl software.. just upload foto utk dptkan kod ajer

DJ Epoi,
buat yg mana tuh.. label awan tu ker... huhu..
make sure save dulu template...
memang perlu berhati2 & renyah sket...
sabor & cuba lagi.. :D

Hayatie @ Tha,
g ke wensite blogger widgets tu.. kat entri cloud label tu memang ade btahu bgmn nak tukor font & warna font..
kakyong tak sempat nak buat lagi.. actually memang nak tukor kaler lain..

wansteddy,
label cloud ni biasa jer.. la ni yg lebih canggih dah ade label cloud animated @ flash.. siap bleh pusing2 lagi..

mirah,
cuba2 lah, tp amik langkah berjaga2, save dulu template..

Yan said...

label awan tu ape kak yong?? tak paham..

erm yanpun bab coding2 ni belajar sendirik jek..
search dan belajar...wlupun tak paham coding2 tuh..
background gambo sendiri tu..
klu ms guna blogdrive dulu..
yan cume upload dlm photobucket..
then amik link.. dan buh dlm coding template..
tp blogspot tak tau la cemane.. kene tgk kat html template gak.. mesti ade codingnye then tukar jek ngan link image yg kite dah upload..

Disclaimer

Ini adalah blog peribadi. Semua catatan @ penulisan juga adalah hak milik peribadi dan pandangan penulis, kecuali dinyatakan sumbernya.

Tidak dibenarkan mengambil tulisan @ idea di sini tanpa kebenaran. Sila minta izin yer kalo nak amik idea @ tulisan di sini.. tapi tolong ler.. usah le amik keseluruhan n3.. penat tau teman memerah otak mencari idea.

Kalo kome main rembat jer n3 teman ni, memang teman tak halalkan.Jika sekiranya teman ade terjumpa mana-mana blog yang menampal tulisan dari blog ini tanpa pernah meminta kebenaran, tuan blog tidak akan teragak2 untuk request supaya n3 tersebut di'remove'.
. .