Cara membuat blockquote efek hover II

Tutorial blockquote yang akan aku tuliskan sekarang ini gambarnya seperti di atas, atau kalau ingin lebih jelas lagi tekan DEMO saja. Untuk yang belum jelas tolong baca juga artikelku sebelum ini tentang cara membuat blockquote pada blog. Dan kalau sebelumnya pernah memasang blockquote, sebaiknya delete/hapus dulu kodenya.

Cara membuat blockquote efek hover II

1.Dasbor > template > edit HTML

2.Tick expand template widget > tekan F3/CTRL + F dan cari kode:

/* Headings (kode no 3 letakkan di bawah kode ini)

atau

body { (kode no 3 letakkan di atasnya)

Untuk meletakkan kode blockquote nya pilih salah satu saja di antara kode di atas.

3.Copy paste kode di bawah ini:

blockquote {
border: 3px groove #ffaad5;
background:#FCFCFC url(http://i1243.photobucket.com/albums/gg546/alice4ja/image4491.gif) fixed;
-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;
}
blockquote {
border: 1px dashed #eeeeee;
border-left: 10px solid #fecdc9;
border-right: 10px solid #fecdc9;
box-shadow: inset 0px 0 10px 0 #fecdc9;
padding: 2px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}
blockquote:hover {
border: 1px dashed #eeeeee;
border-left: 10px solid #FF95CA;
border-right: 10px solid #FF95CA;
box-shadow: inset 0px 0 800px 0 #FFD9EC;
padding: 2px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

Yang aku tandai warna biru adalah kode warna, warna merah adalah url background, kalau tidak mau ditaruh url background hapus saja warna merah itu. Tentang ukuran px atau jenis border boleh juga diubah dendiri sesuai keinginan.

4.Tekan pratinjau dulu dan kalau jadi baru simpan template xD.

Share :