Tutorial : Blockquote Hover I

Sebelum Hover

Selepas Hover

Sebenarnya dulu, Kinah tak pandai buat blockquote*langsung tak pandai. Tapi selepas Kinah tengok tuto Kak Una, Kinah terus boleh buat.. Thank Kak Una! Sekarang, Kinah dah buat tuto sendiri dah.. tak copy orang lain punya code.. 

 Ok, sekarang Kinah nak tunjukkan cara-caraa untuk buat blockquote seperti gambar di atas..

1) Log in > Dashboard > Design > Edit Html

2) Search code ni..

/* Posts

3) Then, copy pulak code ni dan pastekan di bawah code yang korang cari tadi...

.post blockquote {

border-top: 2px dotted #D0A9F5;

border-left: 2px solid #D0A9F5;

border-right: 2px solid #D0A9F5;

border-bottom: 2px dotted #D0A9F5;

border-radius: 5px;

margin:1em 20px;

padding: 5px;

-webkit-transition-duration: 0.5s;

}

.post blockquote:hover {

border-left: 4px solid #D0A9F5;

border-right: 4px solid #D0A9F5;

-webkit-border-radius: 36px 12px;

-moz-border-radius: 36px / 12px;

-moz-box-shadow: 0 0 10px #D0A9F5;

-webkit-box-shadow: 0 0 18px #D0A9F5;

-webkit-transition: 0.5s;

}

4) Preview dulu, kalau tak ada error, terus save! 

Merah : Warna border blockquote sebelum hover

Biru : Warna border blockquote selepas hover

Pink : Warna shadow blockquote selepas hover

#Boleh cari kod warna di sini!