Membuat blockquote efek hover keren

Sebelum ini aku pernah menulis tentang cara membuat blockquote pada blog, jadi untuk menerapkan blockquote yang akan aku tuliskan tutorialnya kali ini sebelumnya harus membaca entri tersebut kalau belum tahu caranya. Cara membuat blockquote efek hover keren contohnya seperti gambar di atas. Kalau sebelumnya pernah memasang blokcquote di template maka harus di hapus dulu kalau ingin menerapkan blockquote ini. Caranya sebagai berikut:

1.Dashboard > Template > edit HTML

2.Expand template widget dan tekan F3 atau CTRL + F dan cari kode:

body {

3.Copy paste kode di bawah ini dan letakkan di atasnya:

.post blockquote {
background-image:url(http://i1243.photobucket.com/albums/gg546/alice4ja/bcgn_zps321d0c8f.png);padding: 5px;
border-top: 1px dashed #4F4F4F;
border-bottom: 1px solid #4F4F4F;
border-left: 10px groove #FF60AF;
colour:#FFFFFF;
}
blockquote:hover{
background-image:url(http://i1243.photobucket.com/albums/gg546/alice4ja/moustache_zps61d2c52f.png);background-position:bottom right;
background-repeat:no-repeat;
display:block;
padding:5px;
color:#CECEFF;
border-left:12px double #00E3E3;
border-top:2px dotted #000000;
border-bottom:2px solid #FF95CA;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

Yang aku tandai dengan warna merah itu url background, dan yang aku tandai dengan warna pink itu url gambar background nya boleh ditukar sendiri kalau pingin background yang lain. Dan kalau background nya mau dikasih warna biasa tuker menjadi:

background:#000000;

Dan kode warna background nya boleh ditukar dengan warna kesukaan inilah kalau mau memilih KODE WARNA bisa mencarinya disitu.

Contoh peletakan kode di atas kode body {

4.Tekan pratinjau dulu baru simpan template.

Yang aku tandai dengan warna biru adalah kode warnanya, boleh ditukar sesuka hati dan tentang jenis border dan ukuran px boleh ditukar juga sesuai keinginan. Yang aku tandai warna ungu/purple itu url icon, boleh diganti juga dengan url icon yang lain, kalau tidak mau ditaruh icon, hapus saja url nya. Silahkan untuk mengambil kodenya kalau suka dan kode di atas adalah buatanku/editanku sendiri setelah bermain css xD.

Share :