Tutorial 3 dalam 1

Assalamualaikum . Macam mana raya ? Best ? Untunglah . Raya tahun ni bagi aku memang tak meriah :( Duit raya sikit weh , hahaa . Macam mana nak beli Dslr mcam ni . Harhar . Eh jangan rasa bersalah sebab tak dapat bg duit raya . Hikhik . macam korang terasa bersalah pulak kan . Err . Korang boleh click link kt bawah ni untuk menyumbang bagi memantap kan perpaduan dan ekonomi Diarikoyak .


Okay bagus . Sayang korang ketat-2 . ==' . Haha aku ikhlas okay . Err . Pasal raya ? Next entri aku bagitahu la ye . Ni sekarang aku nak buat tutorial . Actually mood nak buat tutorial dah takda pun . Haha pemalas gila . Tapi takpa . Demi orang yang bertanya aku buat gak . 

Tukar warna scroll bar


Ada orang tanya macam mana nak buat scroll bar macam ni . Okay ni gambar curi . Malas nak printscreen =,= So benda ni boleh nampak kt Google Chrome je . Mozilla takboleh kot . Jom belajar ..

Korang pergi Edit html . Dan paste kan code ni atas ]]></b:skin>

::-webkit-scrollbar {
height:12px;
width: 12px;
background: #6FC143;
}
::-webkit-scrollbar-thumb {
background-color: #ffffff;
-moz-border-radius: 10px;
border-radius: 10px;
}


Okay ini code scroll bar aku . Korang tukar warna merah . Itu untuk warna yang kelabu tu ,
And yang warna biru untuk yang warna kelabu pekat sikit tu . Lagi satu . kadang-2 aku edit blog orang . Aku cuba buat tak jadi . Kalau tak jadi , korang try paste code kat atas tu bawah body { okay ! Lepas tu save

Link hover background

Korang try click sini . Nampak kan perubahan dia ? Ada warna bulatan warna hijau ? Okay ada orang cakap benda tu ohsem xD Haha  memang pun . Okay nak buat ? Jom .

Korang pergi Edit html then cari code a:hover {
Lepas tu paste code ni bawah dia

background: #6FC143;
border-radius:8px;
text-decoration:none;
color: #ffffff;


Okay warna merah tu boleh tukar dengan gambar atau backround kalau nak . Just tukar kan code tu dengan

background:url(URL GMBAR);

Nak buat background tu melengkung perlahan-2 untuk nampak lebih ohsem ? Just tampal kan
code ni bawah code kat atas tadi tu . Paste paling bawah tau !

-webkit-transition: 1s;

Ikut suka korang nak berapa second . Tu code aku .Lepas tu

Scroll box 

Okay yang ni aku baru dapat comment ada orang tanya . So alang-2 baik aku buat kan ? Allright .Jom belajar


<center><div style="border: 1px solid #FFF; height: 215px; overflow: auto; width: 200px;">
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
<img src="Url gmbar" width="200" />
</div></center>


Okay ini code scroll box untuk gambar . Tukar "Url gmbar" . Boleh paste kat entry , sidebar . Kalau untuk text atau link boleh tengok kat bawah ni


<div class="widget-content">
<ul style="height:150px;width:200px; overflow:auto; ">
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
<li><a href="http://www.blogaddress.com">Your Text</a></li>
</ul></div>


Tukar lah mana yang patut ;) Tu je la . Kepala aku pun dah pening ni . Haha . Jadi ? Like laa Takjadi ? Comment tutorial mana yang takjadi ;D OKBAI

creds; muazz . edriana . akma

11 comments:

bdakkacamata said...

terbaek!!!!!!!!!!

fatin nabila said...

Thanks for the tuto :)

Yeen said...

Thanks utk tuto kedue tuh , mmg ohsem !

Yeen said...

Thanks tuk tuto ke 2 tuh , mmg ohsem !

sabella mohamad said...

perghh terbaik la tokpit kiteww . hihok

Mohd Amin Aizuddin said...

Weii aku klik hang nye heartbeat dekat 10000 kali dah...takde nak belanja ke?

Wanaa Nana said...

thank you untuk tuto yg ke-2 tu. nice! cuma, macam mana nak buat header like apit, tu, kena cursor tapi tak ada hover. O.o faham ke?

N.A.R.I.F said...

tak fahamlah part yang cari kod a:hover{ . nak cari kat mana ?

syera areys said...

mekasih banyakbanyak untuk tuto hebat nie . lagilagi link hover bg tu . sungguh awesome .

masz said...

tengz A P I T..!

Fyda Moshimoshi said...

menjadi la..thnkz ea apit 4 the tutor :)

Subscribe