Skip to content Skip to sidebar Skip to footer

Cara membuat blockquote efek hover

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

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

4 comments for "Cara membuat blockquote efek hover"

  1. keren banget ya kalau blockquotenya bisa tampil dengan efek hover...luarbiasa :)

    ReplyDelete
  2. Kalau hover pada text gimana caranya ya masbro, biar kalau disentuh textnya jadi garis bawah?

    ReplyDelete
    Replies
    1. di bawah blockquote hover kode di atas hanya perlu mengubah menjadi border-bottom: 4px solid terus kode warnanya

      Delete