Assalamualaikum

Yoo , arini nak bagi freebies simple top button . okay , nama pon simple , so memang simple la aku buat . haha . okay , kalo nak amek bagi tau ! :D nahh  .

http://i.imgur.com/wrE8v.png

http://i.imgur.com/MOK7f.png

http://i.imgur.com/K1gwu.png

http://i.imgur.com/koscd.png

http://i.imgur.com/w4XKH.png

http://i.imgur.com/6pmUb.png

http://i.imgur.com/AmMoQ.png

http://i.imgur.com/QUC33.png

Free Header Part 4

Assalamualaikum & Salam Sejahtera

Another freebies simple header. Pleas take out with full proper credit. Thankyou.

http://i.imgur.com/Oau8n.png

http://i.imgur.com/syHvV.png

http://i.imgur.com/0gT74.png

http://i.imgur.com/xDz1f.png

http://i.imgur.com/3Z2NO.png

http://i.imgur.com/U27k4.png

http://i.imgur.com/Ywb8I.png

http://i.imgur.com/e0UgU.png

width header ni 800 x 200++ 

Tutorial : Transparentkan Header Using Photoshop

.Assalamualaikum.

haip korang . lame dah nak buat tutor ni . tapi malas . hee ~ oke . nak buat header transparent macam apis punye ? jomm . tapi make sure korang ade adobe photoshop . CS bape tak jadi masalah . yang penting ade . got it ? jomm .

1) klik file then pilih new.

2) Ubah Width and Height ikut kesesuaian blog korang . paling penting , background contents MESTI TRANSPARENT . kalau tak , tak jadi.

3) klik horizontal type tool , and drag dkat tempat yang korang nak buat header and tulis ape yang korang nak . pilih font , warna and size yang korang suka .

4) klik move tool supaya garis-garis hilang . then klik layer .

5) Right klik and klik convert to the smart object . pastu right klik lagi . pilih blending option pulak .

6) Tick mane yang apis tick . and ubah ikot cita rasa korang .

7) Dah siap . puas hati , cepat save . klik file , then pilih save As . pastuh dekat format tuh , jangan lupa tuka ke PNG tau . pastuh save . hasilnya ?

siap ! hehe . senang je kan ? oke , tutor ni apis buat sendiri . tapi apis nak bagitau apis belajar dari NANA . so bile dah reti buat , baru apis buat tutor ni . so terima kasih dekat tutor nana yang dah banyak membantu apis !

aja-aja hwaiting !!

Tutorial : Blockquote Hover Versi 5

.Assalamualaikum.

apis nak buat hover untuk blockquote lagi , sebab tutor ni paling senang . haha . oke , hover kali ni simple je . tapi dah ramai yang pakai . apis je kuno sebab baru nak buat tutor . haha . jomm mula ~

LIVE PREVIEW

1) Dashboard > Design > Edit HTML .

2) Ctrl + F code ni : blockquote {


3) Copy and Paste code bawah ni BAWAH code blockquote { yang korang carik tadi .

text-align:center;
border-left:20px solid #000000;
border-right:0px solid #000000;
background: #FFFFFF;
color:black;
padding:5px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
}
blockquote:hover{
text-align:center;
border-left:0px solid #000000;
border-right:20px solid #000000;
background: #736F6E;
color:white;
}

4) Preview and save .

p/s : mane-mane code yang apis bold , korang boleh tuka ikot suke korang  oke .

siap . hee , simple and nice kan ? so takde lah serabot sangat korang punye hover . apis suke yang simple - simple . tak suke serabot - serabot . haha . oke , tu je . k baii .

AJA-AJA HWAITING !!

Free Header Part 3

Assalamualaikum & Salam Sejahtera

Versi ketiga. Take out with full proper credit. Thankyou :D

size header ni : 800X200++

http://i.imgur.com/tQYFv.png

http://i.imgur.com/SYPeN.png

http://i.imgur.com/ROeZS.png

http://i.imgur.com/0UoNl.png

Tutorial : Blockquote Hover Versi 4

.Assalamualaikum.

selamat pagi ! before apis pegi kelas , sempat lagi mengodek code . nak buat tutor baru . haha ! sebab arini jadual kelas pack , so takde mase nak update blog , so update awal pagi . oke , kali ni apis nak share satu lagi hover blockquote . hurm , camne effect die ? mai sini apis tunjuk sikit .

sebelum

 selepas

oke , nak buat macam tu ? meh sini apis tunjukkan macam mana .

1) Dashboard > Design > Edit HTML 

2) Ctrl + F code bawah ni 

.post blockquote {

3) Copy code bawah ni , PASTE dekat BAWAH code .post blockquote { yang korang carik tadi .

text-align:center;
}
.post blockquote:hover{
text-align:center;
background:url(URL BACKGROUND);
padding-top:10px;
border-top:3px solid #FF0000;
border-bottom:3px solid #FF0000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-transition-duration: 1s;
}

4) Preview and Save .

p/s: mane-mane yang apis bold kan tu , ubah ikot suka korang oke ! :D

siap . mudahkan ? haha . harap bile korang cube menjadi . hehe , ok lah . out dulu , kelas dah memanggil ! baii :D kalo tak jadi or something tak kena , tanye k !

selamat men-TRY !

AJA-AJA HWAITING !!

Tutorial : Mini Mp3 Player

.Assalamualaikum.

yoo ! hari ni apis nak buat tutorial lagi . macam biasa . tadi ade orang tanye apis . camne nak buat Music Player macam apis punye tuh . actually apis pon baru je tahu nak buat benda tuh . apis dapat tau dari Ae-cha . thanks Ae-cha sebab ajar hyung ! blog Ae-cha ohsemm ! haha . oke . benda ni pulak ditanye oleh Haziq ,. blog Haziq ni pon ohsemm ! jelly ~ btw , thanks haziq sebab tanye camne nak buat ! berupdate juga blog burok apis ni haa . //alamak ! dah terlebih bebel dah ni ==' . Jom mula kan ! bace bismillah dulu , nanti tak jadi :D


1) Dashboard > Design > Add a Gadget > HTML/JavaScript


2) Copy code bawah ni . Then PASTE dekat HTML/JavaScript tadi

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#FFFFFF ;" /><param name="FlashVars" value="mp3=URL LAGU&amp;autoplay=1&amp;bgcolor=ffffff&amp;loadingcolor=585858&amp;buttoncolor=000000&amp;slidercolor=000000" /></object>

3) Preview and Save !



p/s: yang apis bold kan tu , korang boleh tukar ikut korang punye citarasa . code lagu , korang boleh dapatkan dekat SINI . oke , macam mana nak amek lagu yang kita nak ? follow picture dekat bawah ni .

search tajuk lagu

pilih lagu yang korang nak

copy code

oke . paham ? mesti paham punye . kalau tak paham , jangan malu nak tanye , tanye je . oke ?

selamat men-TRY!

AJA-AJA HWAITING !!

click here to know the new way to get ironDJ url 

Tutorial : Cara Guna Blockquote

Assalamualaikum & Salam Sejahtera

arini cuti . tak tau nak buat apa . so nak update tutorial . ok , tutorial ni special for newbie dalam dunia blogging. ok , blockquote tu ape benda ? korang nak tau blockquote tu ape die . tengok bawah ni 

ni namanya blockquote.

oke , nak tau macam mana nak buat macam tu ? follow step dekat gambar bawah ni ;

klik untuk tumbesaran

pastuh publish post . then tengok jadi ke tak . tapi , make sure la blog korang dah ade blockquote . kalau tak memang tak jadi . camne nak pasang blockquote ? klik SINI . oke , kalo ade ape-ape yang korang tak paham . tanye la ye . :D

Tutorial : Pasang Blockquote

Assalamualaikum & Salam Sejahtera
Okay , for those yang still takde blockquote , meh sini nak ajar camne nak pasang blockquote . ade certain template , takde blockquote. pakai simple template je . So , tutorial ni untuk simple template je yupp . jom mule !


1) Dashboard > Template > Edit HTML


2) Ctrl + F code dekat bawah ni .

]]></b:skin>

3) Then Copy code bawah ni . Paste dekat ATAS code ]]></b:skin> yang korang carik tadi .

.post blockquote {
background:url(URL IMAGE KORANG);
border: 2px solid #000000;
}
.post blockquote:hover{
background:url(URL IMAGE KORANG);
border:2px dashed #FF0000;
border-radius: 10px;
}

4) Preview and Save .

macam biasa , mane yang aku bold-kan tu , korang edit ikut korang suka . URL image tu , korang boleh carik dekat mane-mane web yang korang suke . oke . cukup sampai sini je . if korang tak tau macam mana nak gune blockquote ni , korang boleh klik sini . daa :D

Tutorial : Blockquote Hover Versi 3

.Assalamualaikum.

malam ni nak tido lambat sikit . huu . tadi apis dok godek-godek code blockquote hover . godek punye godek dapat buat hover baru ! yeepa ~ walaupon rase macam da familiar je hover ni , tapi apis buat sendiri tau yang ini ! camne hovernye ?

LIVE PREVIEW

oke , nak buat macam tu tak ? jomm mulee


1) Dashboard > Design > Edit HTML

2) Ctrl + F code bawah ni

.post blockquote {

3) Copy code bawah ni , PASTE dekat bawah code .post blockquote { ni .

-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
color:grey;
font:11px verdana;
padding:5px;
border:1px dashed #000000;
border-left:10px #000000 double;
text-align:center;
}
blockquote:hover{
text-align:center;
color:black;
border:1px solid #FF0000;
border-right:10px #FF0000 double;
} 

4) Preview and Save

mane-mane yang apis BOLD kan tu , korang tukar ikut kesesuaian blog korang oke ? mesti jadikan ? haha . takpe , insyaallah lepas ni try create hover baru lagi . ! :D

Free Header Part 2

Assalamualaikum & Salam Sejahtera

Freebies simple header bahagaian 2. Take out with a proper credit ya. Thankyou.

size header ni : 800X200++

http://i.imgur.com/EsUJx.png

http://i.imgur.com/zTLWH.png

http://i.imgur.com/zhNqf.png

http://i.imgur.com/p7EZp.png

Tutorial : Facebook Like Button For Blogskin

Assalamualaikum & Salam Sejahtera
Heyy peeps ! Tadi ade orang tanye aku ade tak tutorial button like fb untuk blogskin user . So aku cuba buat tutorial ni bedasarkan code blogskin aku sendiri. Mungkin menjadi dan mungkin juga tak menjadi. So do tell me kalau jadi and kalau tak jadi.


1) Dashboard > Template

2) Copy code bawah ni

<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true"></iframe>

3) Korang paste dekat ATAS code ni :- </blogger>


4) Save

Tutorial : Youtube Player Colour Version

.Assalamualaikum.

tadi apis try main-main code youtube punye tutorial . akhirnya menjadi . hoo , mase menjadi tu , melompat kejap . haha . sebab apis main edit , letak je code ikot suke apis . so , tak tau pulak boleh menjadi . HAHA . oke , jom mule !

1) Dashboard > Design > Add Gadget > HTML/JavaScript

2) Copy code dekat bawah ni . Paste dekat ruangan HTML/JavaScript .

<div style="POSITION: fixed; top: 2px; left:4px;"><div style="MARGIN-LEFT: .1em; MARGIN-RIGHT: .1em" class="linkopacity" href="#" rel="nofollow" target="_blank" imageanchor="1"><span style="background-color: transparent;  padding: 10px 6px; border: 2px dashed transparent; dashed;color:transparent;"><object width="60" height="25"><param name="movie" value="CODE YOUTUBE?fs=1&amp;hl=en_US&amp;color1=0xCODE COLOUR&amp;rel=0&autoplay=1&loop=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="CODE YOUTUBE?fs=1&amp;hl=en_US&amp;color1=0xCODE COLOUR&amp;rel=0&autoplay=1&loop=1" type="application/x-shockwave-flash" width="60" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></object></span></div></div>

3) Save

p/s : yang apis bold kan tu , korang boleh ubah ikut suke korang . code colour korang boleh dapatkan dekat SINI . tak tau mana nak dapat code youtube ? refer dekat SINI . 

ok , korang boleh lihat hasilnya . insyaallah menjadi , kalo tak jadi , inform dekat apis tau . kena coding semula la . hehe , tapi apis harap jadi :) oke .

Selamat Mencuba

AJA-AJA HWAITING !!

Free Header Part 1

Assalamualaikum & Salam Sejahtera

Freebies simple header edisi pertama dalam sejarah hidup. Take out with full proper credit. Thankyou.

header ni saiz die : 800 X 200

http://i.imgur.com/0Zpxp.png

http://i.imgur.com/9S9or.png

http://i.imgur.com/otMVw.png

http://i.imgur.com/qI4Z6.png

*klik pade gambar untuk tumbesaran*

TUTORIAL : Make Your Own Follow Button

Assalamualaikum dan Salam Sejahtera

First ever tutorial yang aku nak kongsikan dengan korang semua. For those yang dah bosan dengan widget followers yang disediakan oleh pihak blogspot, ataupun tumblr style punya button follow. Mohon google ataupun create your own button image then save and upload kat mana mana. Then follow step dibawah.

1. Layout >  Add a Gadget > HTML/Java Script.

2. Copy and paste code bawah nie .

<div style="display:scroll; position:fixed; bottom:5px; right:5px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID KORANG" target="_blank" rel="nofollow" title="Follow !" imageanchor="1""><img src="URL GAMBAR YANG KORANG NAK" /></a></div>

Code yang di-bold boleh diubah mengikut citarasa kalian. Okay pade sesiape yang tak tau mane nak dapat blog ID korang sendiri, boleh rujuk sini .


Sekian.

Tutorial : YouTube Player dalam Blog

.Assalamualaikum.

kali ni nak buat tutor youtube player dalam blog . korang tau tak macam mana youtube player tuh ? ala . macam apis punye tuh la . dekat atas , bawah button dashboard and button follow . ha , tuh la youtube player . hehehe . oke , ni care nak buat bende alah tuh .

1)Design > Page Element > Add a Gadget > HTML/Java Script

2)Copy and Paste code dekat bawah ni .

<div style="POSITION: fixed; top: 2px; left:4px;"><div style="MARGIN-LEFT: .1em; MARGIN-RIGHT: .1em" class="linkopacity" href="#" rel="nofollow" target="_blank" imageanchor="1"><span style="background-color: transparent;  padding: 10px 6px; border: 2px dashed transparent; dashed;color:transparent;"><object width="60" height="25"><param name="movie" value="YOUTUBE PUNYE CODEfs=1&amp;hl=en_US&amp;rel=0&autoplay=1&loop=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="YOUTUBE PUNYE CODEfs=1&amp;hl=en_US&amp;rel=0&autoplay=1&loop=1" type="application/x-shockwave-flash" width="60" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></object></span></div></div>

HIJAU korang boleh ganti dengan top or bottom .
MERAH korang ganti CODE YOUTUBE yang korang nak .
BIRU tuh korang boleh padam kalau taknak lagu tu repeat .

oke , kalo sape tak tau mane nak dapat youtube  punye code tuh . meh sini apis ajarkan .

first buka youtube . then taip video yang korang nak . then follow step bawah ni ;

klik untuk tumbesaran

pastuh save and preview . 

senang je kan ? hehehe . ok tuh je yang apis nak ajar dalam tutor kali ni .

tak paham , jangan malu nak tanye k !

tutor lain , coming soon .

bagi penguna tutor ni atau yang nak copy , silekan . tapi jangan lupe creditkan apis ok !

Tutorial : My Status dalam Blog

Assalamualaikum & Salam Sejahtera

Jarang dapat peluang update blog? Selalu online tapi takde idea nak update blog? Well this thing selalu terjadi pada aku. So dengan adanya My Status Box ni boleh lah korang sentiasa update status blog korang sekiranya korang kesempitan masa atau takde idea nak update. Macam mana contoh My Status Box ni?

Okay ini adalah contoh my status box

Okay preview ada slightly error. Berminat nak buat macam tu. Meh follow step dibawah ni.

1) Layout > Add a Gadget > HTML/Java Script

2) Copy and Paste code nie

<div style="display:fixed; position:fixed; top:5px; left:5px;"><fieldset><legend><img src="URL GAMBAR"/></legend><marquee style="background:white; color:black; font-family:verdana; font-size:8pt; width:250px; height:20px; " direction="left" behavior="scroll" scrollamount="5" >STATUS KORANG</marquee></fieldset></div>

Mana mana code bold tu sila ubah mengikut citarasa korang sendiri. Selamat mencuba o/

Sekian.

Tutorial : Cursor Sendiri

Assalamualaikum & Salam Sejahtera

Harini nak ajar korang semua macam mana nak tukar cursor korang kepada cursor kegemaran korang sendiri. Lepas ni macam macam cursor korang boleh pakai. Tak perlu pakai yang membosankan macam yang kita tengah pakai sekarang ni. Ok ayuh mula.

1) Template > Edit HTML

2) Cari code body {

3) Dah jumpa code body, kemudian copy and paste code bawah ni di BAWAH code body { tadi.

cursor:url(URL GAMBAR CURSOR),auto;

Yang bold sila tukar kepada korang punya url gambar tersendiri. Bawah ni aku ada sediakan beberapa cursor yang aku buat sendiri menggunakan photoscape. So boleh copy mana yang berkenan.

http://i.imgur.com/AoTZu.png

http://i.imgur.com/dSlyQ.png

http://i.imgur.com/xjWPQ.png

http://i.imgur.com/o7h8T.png

http://i.imgur.com/yS0a3.png