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!


3 comments:

  1. Nak jemput sakinah boleh ??


    Assalamualaikum.....tuan hamba datang sini dari empayar yang jauh semata-mata mahu menjemput saudara/saudari
    dalam "Segmen: Trademark Blog Saya"
    harap tuan blog dapat hadirkan diri dan dalam masa yang sama dapat menjadi rakan dan readers patik (^_^)

    Salam selamat dari FR , assalamualaikum dan senyum ceria dalam ranjau meniti kehidupan.

    Direct Link -- Segmen: Trademark Blog Saya

    ReplyDelete