0 Cara membuat blockquote efek hover

Pada entri sebelum ini aku sudah menuliskan tentang cara membuat blockquote pada blog dan sekarang aku akan menuliskan tutorial cara membuat blockquote efek hover apabila anak panah cursor menuju text yang ditandai blockquote terjadi hover caranya sebagai berikut:

1.Login > Dashboard > Template > edit HTML

2.Expand template widget dan tekan F3 atau CTRL + F serentak dan cari kode berikut:

/*  Headings

----------------------------------------------- * /

Di bawah kode di atas terdapat kode berikut (lanjutan posting sebelum ini):

 .post blockquote {
background:#ECFFFF;
padding: 5px;
border: 1px dashed #FFC1E0;
border-left: 5px solid #FFCBB3;
colour:#FFFFFF;
}

Tambahkan kode di bawah ini, atau seperti kode yang aku tandai warna merah di bawah nanti itu kodenya:

 blockquote:hover { border: 1px dashed #eeeeee;
border-left: 10px solid #FF95CA;
box-shadow: inset 0px 0 800px 0 #FFD9EC;
padding: 2px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

Jadinya seperti di bawah ini (lanjutan artikel sebelum ini) letakkan di bawah kode /*  Headings :

.post blockquote {

background:#ECFFFF;

padding: 5px;

border: 1px dashed #FFC1E0;

border-left: 5px solid #FFCBB3;

colour:#FFFFFF;

} 

blockquote:hover {

border: 1px dashed #eeeeee;

border-left: 10px solid #FF95CA;

box-shadow: inset 0px 0 800px 0 #FFD9EC;

padding: 2px;

-webkit-transition-duration: 1.5s;

border-radius: 10px;

}

Contoh gambar:

 

sebelum

sesudah