blockquote

Efek blockquote Border Nudging

12:59 AM


LIVE DEMO

1. Login blog
2. Template dan edit html
3. cari kode .post blockquote dan tambahkan kode css berikut di bawahnya

background:url(http://gazo.emoji7.jp/img/051fi_724385/%E8%B2%B0%E3%81%86%E6%99%82%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E5%BF%98%E3%82%8C%E3%81%9A%E3%81%AB%21%21_m.gif);

background-repeat:no-repeat;
background-position:100% 95%;
font-family: 'Englebert';
padding:10px;
border-left:20px solid #C3E5FB;
border-right:2px dashed #C3E5FB;
border-top:2px dashed #C3E5FB;
border-bottom:2px dashed #C3E5FB;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#555;
}
4. hover blockquote di ganti kode css berikut
blockquote:hover{
background: none;
border-left:2px dashed #C3E5FB;
border-right:20px solid #C3E5FB;
color:#555;
}
5. save template
Ubah warna border atau background sesuai keinginan. Selamat mencoba! ãƒ½(^o^)ノ

You Might Also Like

0 comments

SUBSCRIBE

Like us on Facebook