Home » » Membuat blockquote efek hover keren

Membuat blockquote efek hover keren

Dalam posting kali ini taukahbahwa.blogspot.com akan menyajikan artikel tentang Membuat blockquote efek hover keren. Semoga dengan berita Membuat blockquote efek hover keren akan menambah wawasan bagi anda pembaca setia taukahbahwa.blogspot.com

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 kerencontohnya 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 warnapink 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 memilihKODE 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 warnaungu/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.

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

Sobat baru saja membaca artikel yang berkategori Informasi dengan judul Membuat blockquote efek hover keren. Jika sobat rasa artikel ini menarik silakan di share dengan meninggalkan URL http://taukahbahwa.blogspot.com/2014/02/membuat-blockquote-efek-hover-keren.html. Terima kasih atas kunjungannya!

0 komentar:

Posting Komentar