Friday, 20 January 2012

Tutorial : Blockquote Berubah Bentuk Bila Cursor Menyentuh


Hamboih! kemain panjang lagi tajuk. Sebenarnya tak tau nak letak tajuk apa..heee, hentam saje lar labu. Contohnya macam kat bawah nie :



Saya nak makan eskremm!! pegi beli cepat! ^.-


Cuba letak cursor kat kotak tu. Dia mengembang kan? haa.. macam tu lar yang iqa nak ajar. Tutorial direquest oleh cik mama.. Dah 2 kali cik mama request, hari nie baru ada kesempatan nak buatkan. sorry yer kak :) Sesape yang teringin nak buat blockquote macam iqa bole ikut tuto nie yer^^





Jom kita mula, macam biasa sign in blog dulu.

1. Dashboard > Design > Edit html > tick expand widget

2. Cari code di bawah, supaya tak juling nak cari satu persatu.. ( Ctrl+F )



post blockquote {


ATAU kalau tak jumpa cari yang macam ini



/* Content
----------------------------------------------- */


psstt : Jangan masukkan ---- nie sekali tau kat kotak find tu. Nanti tak jumpa. Cuma masukkan /* Content jek bila nak cari. Yang kat atas tu contoh coding yang korang akan jumpa.

Bila dah jumpa salah 1 code kat atas.. paste code kat bawah nie, DIBAWAH code yang kita dah jumpa tadi.



.post blockquote {
text-align: center;
border-top: 3px solid #F5A9F2;
border-bottom: 8px double #F5A9F2;
background: #F8E0F7;
padding: 5px;
}
.post blockquote:hover {
border-left: 3px solid #F5A9F2;
border-right: 3px solid #F5A9F2;
margin: 5px;
border-top-left-radius: 105px 15px;
border-top-right-radius: 105px 15px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
-webkit-box-shadow: 0 0 3px 3px  #000000;
-webkit-transition-duration: 1s;


Note :
Hijau untuk warna border
Merah untuk warna background kotak
Biru untuk warna shadow

Code warna bole tengok kat SINI

Dah siap preview, kalau takde error boleh save terus. Done!! ^_^ Lepas tu cuba lar buat blockquote dalam entry. Then tengok.. Kalau tak puas atie adjust balik keyh.

Itu saja! Boleh faham kan? Macam biasa kalau tau faham tanya jek tau. OKBAI

iPhone 4s
Sloggi Girls’ Night


Cherita da abis...Sila tinggalkan komen pulak ye! TQ

12 komen jejari cumil:

bsyok said...

http://bsyokonline.blogspot.com/ terdapat Cannel online ASTRO ARENA ,ASTRO CERIA, ASTRO OASIS ,ASTRO PRIMA ,ASTRO RIA ,AXN ,DOCUMENTARY TV ,E-KOREA ,FOX MOVIE, HBO ,MALAYSIA YOUTH Tv .NTV 7, RTM TV 1 ,RTM TV2 ,TV 3 ,TV 8, TV 9.

EZAD AMIR said...

wahh..nice sharing...

Bobo said...

ni org panggil hover kot? hehe..

.: mama lynn :. said...

x ley buat la yang.. mama lynn x dpt cari kod tu. takpe la at least dpt gak ilmu sikit2

merpatisejoli45 said...

i like! :D

shida'R said...

nice tutor iqa ^_^

IntaNBerliaN said...

ooo yg ni.. apa pggil benda alah ni ek.. hihii

Cik mama said...

Thanks Yerr Laling, nanti cik mama buat.. huhuhu terharulaaa..
mekacih bebanyak tau for this tuto.

era kecik said...

nice tuto.. memang comel blockquote awk :)

aRa ❤ aFiq™ said...

nice sharing dear.. :)

suzie rahman said...

wah nnt boleh lh try.hihi

daK cOmOt said...

np sy wat xjd ppe pn ek??