Tutorial - Tukar Warna Background (Sidebar)

Salam, Bonjour.

So tutorial ni di request oleh Ain Mushroom ..

* Try to make this tuto as easy and simple as I can *

Firstly,
- Dashboard > Design > Edit HTML
- tkn button 'f3' dekat keyboard korang.
- search .sidebar .widget {

then kalau ade jumpe, gantikan perkataan tu dgn ini ;

.sidebar .widget {
background: #000;
}

Ok, nampak tak ade code yg aku kalerkan dgn warna merah? Itu korang boleh tukar ikut warna yg korang nak. Boleh cari code colour dekat google : HTML Code Colour .

then tekan PREVIEW dulu. Kalau dah OK baru SAVE . SIAP!

Semoga berjaya!
Salam Maulidur Rasul ;)

Tutorial - Membuat Transparent Header Ver.2

Annyeonghaseyo, monthly update :P quick tuto from opie piece.

so, first bukak photoshop (tak kisah 'version' apa2 pun).

a) ctrl + N
b) width dan height tukar ikut size content blog korang

c) tekan "U" dekat keyboard (lihat dalam gambar). Automatic dekat bahagian atas tu akan jadi mcm dlm gambar. (ayat aku mengelirukan ke?) tekan 'rounded rectangle tool' dan akan jadi mcm ni...

d) kalau korang perasan aku ade bulatkan kotak warna (kotak warna?). Renung gambar tu. Korang boleh tukar kaler header tu dengan kaler content blog korang.

e) tekan "V" dekat keyboard dan korang boleh adjust header tu.

f) tekan T dekat keyboard lagi, dan tulis name blog korang etc. Boleh tukar kaler kat atas sekali.

g) macam aku, aku letak gambar Jay Park. (OMG! arrrrggghhhh =.= dead) Korang boleh letak gambar apa2 yang korang suke. Just tekan ctrl + O .

h) save dan siap! yeyyy!
Korang boleh refer sini : wink

Selamat Mencuba! Annyeong!


psssssssssstttttttt: lupe nak bagi tau. Korang boleh tukar font. Tkn "T" then nanti kat atas tu ade name font yang korang sedang gune. Boleh change kat situ :D


Q? Comment :D

Tutorial - Menukar scroll bar kpd rounded

Salam, Quicky Quick Tutoo...

Dashboard > Design > Edit HTML

tekan button (dekat keyboard) F3 dan cari code ini ;

h a:hover {

Sudah jumpa?? Paste-kan code dibawah ini

::-webkit-scrollbar {
height:12px;
width: 12px;
background: #E6E6E6}
::-webkit-scrollbar-thumb {
background-color: #FAAFBE;
-moz-border-radius: 10px;
border-radius: 10px;
}

di bawah code tadi a:hover { tadi

Code yg diboldkan tu boleh tukar dengan kaler yg korang suke. SINI

Siap! curious? leave me a comment ;)

Tutorial - Menukar tittle "Comment"

Assalamualaikum. Quick tuto :) 

Request from : Alya

Dashboard > Design

Blog Post tekan Edit

Post Page Option : Baris yang ke tiga. Ada tulis 5 Comments. Delete perkataan comments dan gantikan dengan ayat korang

Tutorial - Tukar Background Blog

UPDATE : Tick 'Expand Widget Templates' kalau tak keluar gambar background.

annyeonghaseyo~ berite gembira! aku masuk kelas elit! wuhuuuu,, alhamdullilah~ ok, aku bukan nak cerita pasal ni =.= , ok, disebabkan kawanku Farhain tersilap langkah apa yg aku ajar, ayoyoo~ nah, tutorial *campak*

first2 perkara basic nak tukar background cute2 ialah click "dengan sekali klik" pada
#Design
#Edit HTML

tkn ctrl+F atau tkn F3 yg ade dekat bahagian atas keyboard..
cari kod ini

body {

ok, nampak tak ada perkataan background? highlight daripada background hingga } senang citer highlight je semua code body tu sampai jumpa } .
dan gantikan dengan code dibawah

body
  background: url(link background korang);
  background-attachment: fixed;
  background-repeat: repeat;
   }

siap!
p/s: kalau nak dapat background yg korang nak tu, copy link gambar, aku lagi sekali lagi, copy link gambar sahaja. bukan code..

tak tahu ape tu link?

contoh :
link: http://dl3.glitter-graphics.net/pub/229/229043wc6ohwbobe.png
code: <a href="http://www.glitter-graphics.com"><img src="http://dl3.glitter-graphics.net/pub/229/229043wc6ohwbobe.png" width=99 height=98 border=0></a>

yg aku boldkan tu adalah link background.

selamat mencuba~ annyeong~comment~

Tutorial - Membuat Border Dashed Di Title Post

annyeonghaseyo! selamat petang! hohoho,, baru balik dari tusyen.. fuhh, penat~ =.=' so, tadi check shoutbox Miss Durian Runtuh ade request kat aku..

ok, so here how ;)

Dashboard > Design > Edit HTML

tkan ctrl+f dan cari code ini

.post h3 {

ok dah jumpa kan? pastekan code dibawah ini selepas code terakhir di .post h3 {

background-color: #BC00FF;

font-size: 100%;color: #000000;text-align:center;border: 3px dashed #000000;

save, siap!

tulisan yg dibold kan tu boleh pilih warna ikut kesukaan anda :D
so, thats all, renung2kan dan selamat mencuba! annyeong! kalau ada sebarang kemushkilan comment dekat bawah ye...

Tutorial - Music Player (YOUTBE)

annyeonghaseyo!! hari ni nak buat tuorial music player... ok first2 macam ini

follow this step!

first, pilih lagu yg korang nak,

second, EMBED then copy code di bwah 

contoh*

pergi Blogger>Design>Add New Gadget>HTML/Javascript

paste kan code tadi tu dekat HTML/Javascript

Macam mane nak buat music play macam ini?

ok, ini caranya ..

korang nampakkan width dgn height tu?

width : 640

height : 390

tukar kepada ini

width : 60

height : 25

click utk lebih jelas.

AUTOPLAY:

ok code tadi dah siap utk diletakkan , cume nak tambah code autoplay je. 

letak &autoplay=1 selepas fs . tak faham? tgok di bawah ni

ok, nampak tak ade nombor =1 ? ok yg aku bulatkan dgan warna merah tu sila padam.

ok dah siap! renung2kan dan selamat mencuba! annyeong!

ade ape2 masalah boleh comment dibawah ;)

Photoshop Tutorial - Tukar warna anak mata

annyeonghaseyo! how are you? fine? good. hari ni aku dapat request photoshop tutorial from hidayah ,

abaikan jawapan aku~

ok,, so here how's :

>First at all korang perlu ada Adobe Photoshop CS3, kalau takde boleh click sini

>File>Open pilih gambar yg hendak di-edit

source image: google

yg tu gambar yg aku nak edit.

ok, gambar akan jadi macam ni, bila korang tarik image tu ke phooshop

then, tekan zoom yg berada disebelah kiri image. 

ok, bila korang nak zoom tu, bukan kena klik sekali, tapi lebih kurang

macam korang nak crop gambar. 

lepas itu, tekan 'Polygonal Lasso Tool' korang kene tekan sekali then click 'Polygonal Lasso Tool'

kalau korang punye berbeza.

the best part is change your iris colour!

ok, bila korang dah select semua bola mata tu,

tekan Image>Adjustment>Hue/Saturation

then akan ade pop-up window, disitu korang boleh tukar warna anak mata korang..

so,, ini hasilnya..

before

after

so selamat mencuba! ada soalan? boleh comment dibwah :)

Tutorial - Membuat Transparent Header

hello! ok ok,, ni quick tutorial,, request from Aqilah Taller..

ikut step2 di bawah..

1. download Adobe Photoshop CS3 (CS5 dan lain2 pun tak ape..)

File>New atau ctrl N

dekat width tu letak lebar content blog korang.. height tu
ikut suke laahh,, mcm aku aku letak 300..


 
then, akan keluar gambar macam ni..

1. Font 
2. Size font
kalau nak letak kaler2 boleh tkan dekat kotak warna hitam tu..

then File>Save As> format tu, pilih PNG.. kalau pilih yg lain, 
tak boleh masuk dekat blogger, photobucket ect.

so sampai sini je,, ok bai bai,, ade orang da x tahan menuggu tu...

Tutorial - Energy Saving Mode

annyeonghaseyo! lame aku x buat post,, sempena cuti Tai Pusam ni aku nak buat tutorial,, plus! hari ni cuti,, boleh lerr bukak internet,, huahuahua,, cube korang tengok blog aku,, da tukar kan? wink-wink,, oke x? hehehe ok ok..

post kali ni aku nak buat tutorial Energy Saving Mode.. tak tahu ape itu Energy Saving Mode? Lihat gambar dibawah

click untuk besar

ape tujuan bende ni ade dekat blog kite?

Standby for a greener web
Our standby engine is the first of our products to deliver a fully functional and simple way to help your website run requiring less energy to generate. It hides heavy animations, covers the window in dark colors (as these, in many cases are less energy consuming) and pauses heavily running background processes.

soo ,, here is the step;

• Dashboard
• Design
• Add Gadget
• HTML/JavaScript

then, paste code ni

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>

then save! tunggu dalam beberape minit, dan korang akan dapat hasilnyee... annyeong!

Tutorial

* boleh copy tutorial disini,, tetapi sila linkkan credit ke blog ini ye...

 3 Column Layout

 Hide Shoutbox

 Sparkly Curcor

 Rainbow Link

 Favicon

 Title Bar Maker

 Exchange Font

 Flash Banner

Energy Saving Mode

Memebuat Transparent Header

Music Player (YOUTUBE)

Tukar Background Blog

Menukar tittle 'Comment'

  Tutorial - Membuat Transparent Header Ver.2

Tutorial - Tukar Warna Background (Sidebar)

Tutorial - Flash Banner

annyeonghaseyo! lame yer aku x buat post (padahal haritu da but ;p) hoho,, hari ni aku nak ajar korang mcm mane nak buat flash banner,, oke2 skrg bukak photoscape,, kalau x de,, boleh download dekat sini

 Bukak photoscape then tkn 'Editor'

 then, pilih gambar (untuk dijadikan b'ground)

  *click untuk lebih jelas*

 *click untuk lebih jelas*

lepas korang dah tulis, then tekan 'OK' 

lepas korang da 'OK', korang tekan save,

 then, dye akan keluar macam ni,, tekan 'SAVE AS'.

jgan pulak tekan save,, takut x jadi ;)

pilih file/folder untuk korang simpan gambar tu,

then, tekan "save"

then, tekan OK

buatlah berape banyak gambar yg korang nak buat,,

lepas da siap edit gambar tu,, tekan "Animated GIF"

tarik gambar yg korang da edit dekat kotak warne putih tuu..

tarik, tarik, tarik then tekan save,,

SIAP!

So,, inilah hasilnyerrr,,

BONUS!

oke,, selalunyer ramai blogger suke letak banner diorang dekat sidebar blog diorang,, aku buat ni besar just untuk korang buat tutorial ;P

size normal yg blogger's buat dekat sidebar tu 125x125

jadi bile korang nak tukar size tuu, jgan lupe untick "Preserve aspect ratio"..

oke,, soo sampai sini jerr,, ade ape2 soalan,, comment oke! annyeong!

ohhhh yeah! aku lupe! kalau nak dapat generator code boleh dapat dekat photobucket.com ,, kene sign up dulu! chauuuu dulu!