Cara membuat blockquote efek hover

Pada posting kali ini taukahbahwa.blogspot.com akan membahas artikel tentang Cara membuat blockquote efek hover. Semoga dengan artikel Cara membuat blockquote efek hover akan menambah wacana untuk anda pembaca setia taukahbahwa.blogspot.com

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 merahdi 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:

 

3.Kode warna yang aku tandai dengan warna biru bisa diganti menurut keinginan, tekan pratinjau dulu dan kalau sudah pas baru simpan template.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com