Membuat BlockQuote Dengan Hover yang Keren

Home » Tutorial » Membuat BlockQuote Dengan Hover yang Keren

Membuat BlockQuote Dengan Hover yang Keren

Sekarang saya akan menuliskan cara membuat blockquote dengan hover, dan saya kemarin sudah menuliskan bagaimana memasang scroll pada arsip diblog. Blockquote berguna untuk memperjelas tulisan atau menandai tulisan yang penting, dan blockquote yang akan kita buat ini berbeda dengan blockquote yang manual, blockquote yang akan kita pelajari ini adalah blockquote yang menggunakan CSS dan kita bisa lebih leluasa memodifikasinya, dan bisa menambahkan hover juga.
Yap, sekarang perhatikan caranya :

Pertama anda harus membuat CSSnya, contoh CSS yang akan dijadikan blockquote :

.blockquote {
background:#eeeeee;
border:3px dashed #dddddd;
padding:15px 15px
}

Keterangan :
background : adalah latar belakang blockquote tersebut, ganti dengan warna kesukaan anda
border : adalah bingkai blockquote tersebut, ganti angka 3px dengan ukuran ketebalan yang anda mau, dan ganti #dddddd dengan code warna yang anda sukai untuk border/bingkai blockquote.
padding : adalah code untuk jarak tulisan dari bingkai. dan bila ingin mengatur jaraknya, anda tinggal mengganti angka-angkanya saja.

Dan cara memasang blockquote tersebut anda tunlis saja code berikut di postingan anda :

<div class="blockquote">
Tulisan anda disini
</div>

Tetapi biasanya kalau CSSnya dinamai dengan .blockquote bisa langsung klik saja icon blockquote dan otomatis CSS akan berjalan, dan anda tidak usah menandai tulisan dengan code div di atas.

Diatas tadi adalah cara untuk membuat blockquote dengan CSS Sekarang kita akan membuat hover pada blockquote tersebut :
Perhatikan code yang tadi, dan langsung saja kita tambahkan code yang sama tetapi dibelakang nama CSSnya kasih code :hover contoh berikut :

.blockquote:hover {
background:#eeeeee;
border:3px dashed #dddddd;
padding:15px 15px
}

Dan taruh dibawah CSS diatas tadi dan jadi seperti berikut :

.blockquote {
background:#eeeeee;
border:3px dashed #dddddd;
padding:15px 15px
}
.blockquote:hover {
background:#fff;
border:3px dashed #000000;
padding:15px 15px
}

Keterangan :
Bila anda memasangkan hover di CSS, jangan lupa code warna latar belakang atau bingkai di CSSatas harus berbeda dengan code warna latar belakang atau bingkai CSShover biar saat kursor diarahkan ke blockquote, hover kelihatan berfungsi.

Dan CSSnya ditaruh di atas code ]]></b:skin> ya, tadi lupa mau bilang di atas, hehehee :D