Bila Cursor Menyentuh Blockquote, Cute Icon Muncul...=)

Thursday, June 14, 2012

Assalamualaikum semua...hehe, kali ni nak buat tutorial lagi...huhu, OK mostly ramai akan ADA PROBLEM dengan tutorial ni....SO, before korang try tutorial ni, korang WAJIB pergi ke tutorial CARA NAK BUAT BLOCKQUOTE COMEL dulu OK...Kalau tak menjadi jangan salah kan aku sebab aku dah beritahu awal2...hohohohoho...

POINT YOUR CURSOR HERE... =)

 heheh, tengok ada icon comel keluar kan, background blockquote pon bertukar...huhu, nak tahu macam mana?? Jom baca lagi...=)



1. Log in > Dashboard > Design > Edit Html
2. Tekan Ctrl +F serentak, then ada keluar box FIND kan kat bawah desktop korang ni...huhu, OK copy code bawah ni, paste kat box FIND tu:
.post blockquote {
OK, korang akan nampak lebih kurang macam ni:
3. Jumpa kan? =) OK tengok dulu pic bawah ni betol2...
 OK, code yang bakal korang copy, paste nanti akan jadi macam pic atas ni..JOM teruskan!!
4.copy code bawah ni  dan paste kan DI BAWAH code yang korang cari di step 2 tadi...

blockquote:hover {
background-color: #FFC8F2;
-webkit-transition-duration: 3.5s;
background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/barbiepink/pic003demoji_17348898decoojp.gif);
background-position:bottom right;
background-repeat:no-repeat;
 }

 OK, dapat tak?? huhu, sama tak macam pic yang aku tunjuk atas tadi?? TENGOK BETOL2 TAU..=) hehhe...

5. OK jom tukar:

Warnana Biru : Warna Background Selepas Cursor Menyentuh Blockquote [CODE WARNA]
Warna Merah : Link cute icon korang lah..nahh carik sendiri kat SINI
Extras: tambah kan code margin-left:50px; kalau nak efek macam aku punya!! hohoho, saja2 tambah code tu, jadi camni pulak:
CUBA POINT CURSOR KAT SINI!! 
tengok dia ke kiri skit, aikk gedik2 plak...hahha, so, FULL CODE macam ini!!
blockquote:hover {
background-color: #CCFF99;
-webkit-transition-duration: 3.5s;
background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/barbiepink/pic014demoji_12056299decoojp.gif);
background-position:bottom right;
margin-left:50px;
background-repeat:no-repeat;
 }
OK, sorilah panjang sikit tutor ni...hope korang faham...=D sElAmAt MeNcUba!! KALau guna dan menjadi tutor ni, jangan lupa komen kayhh =) TQ....
SUMBER TUTORIAL:lyssasecret
                          :Cik Nur Farah

Share This Story

Tags: ,

2 comments

  1. Unknown16 February 2013 at 01:48

    thanks! wanie buat jadik :D cume shape die tak same .... shape die jadie rectangle sbijik... cane nak buat senget2 mcm tu? huhuhu :D

    ReplyDelete
  2. Afifa Suib31 January 2014 at 10:21

    thanks akak... berjaye!

    ReplyDelete

Komen yang baik-baik ye ^^, kalau perlukan urgent respond, sila tinggalkan email anda