All About Blockquote With Cute Icon

Assalamualaikum.

Anis ada reka beberapa type of blockquote with cute icon. Mungkin dah lama dah style macam ni tapi tak pe, THIS IS MY OWN CODE

Type 1 . Sebelum di hover :

Selepas di hover :

Dashboard --> Edit Html --> Ctrl+f

.post blockquote {

Copy kode di bawah dan paste di bawah kod atas tu

background-color: #FF72B5;
border-left: 1px dashed #000;
border-right: 1px dashed #000;
border-bottom: 1px dashed #000;
border-top: 1px dashed #000;
padding: 9px;
-webkit-transition-duration: 0.7s;
}
.post blockquote:hover {
background-color: #FFD0E7;
background-image:url(URL Icon );
-webkit-transition-duration: 0.7s;
background-position:bottom right;
background-repeat:no-repeat;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
border-top-left-radius: 9px;
border-bottom-left-radius: 9px;
}

 Preview dan Save .

Type 2. Malas nak printscreen. Ngeh, ngeh, ngeh . Korang try je la dulu :)

background:#CCC; padding:5px;

-moz-border-radius: 8px 10px;

border-radius: 8px 10px;

}

.post blockquote:hover {

background:#E9E6E7;

border-left: 15px solid #72BCFF;

border-right: 15px solid #FF72B5;

background-image:url(URL ICON);

background-position:bottom right;

background-repeat:no-repeat;

-webkit-transition-duration: 2.7s;

}

Preview and Save.
 Type 3. No preview too . Sorry eh, try je dulu.

 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2vhIvjUHRjzg2VYOUs0vcleDAnJq2n9B7xkEI81FRog1OJmo9AXSSH8vidCvCsH-PnEHOnyackJ-BLkAPNc2wXklGJD7cou2QJI4Y4mfhX28eiJCWnXD2YpqNXDQqOFP-DGNBvaJrCE/s1600/sparkles.png'); padding-left: 9px;

padding-right: 10px;

padding-top: 12px;

padding-bottom: 12px;

margin:1em 20px;

border-top: 1px solid #FF72B5;

border-bottom: 1px solid #72BCFF;

-moz-border-radius: 15px;

border-radius: 15px;

}

.post blockquote:hover {

border-top: 1px dashed #FF72B5;

border-bottom: 1px dashed #72BCFF;

-moz-box-shadow: 0 0 15px #9BB6FF;

-webkit-box-shadow: 0 0 18px #9BB6FF;

-webkit-transition-duration: 1.6s;

background-image:url(URL ICON);

background-position:bottom right;

background-repeat:no-repeat;

}

Preview and Save.
Itu aje. Kalau Anis rajin, Anis design lah blockquote lagi. Bye Assalamualaikum. Komen kalau berhasil

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---