Membuat Blockquote Keren efek Hover

Thursday, October 31, 2013

Membuat Blockquote Keren efek Hover

Kali ini gwe akan membahas tentang cara memodifikasi blockqoute biar lebihh kreenn... wkwkwk
Sebagai contoh bisa lihat di gambar di atas dan di bawah ni. wekxixixixi XD

Blockquote efek Hover

Pertama loggin dulu ke Blogger, terus pergi ke EDIT HTML, terus cari kode blockqoute Jika tidak ditemukan berarti blog agan belum pernah di modif blockqoutenya...
klo gitu, selanjutnya cari kode]]></b:skin> Kemudian taruh kode berikut di atasnya :

blockquote{margin:20px;
           padding: 15px 15px 15px 15px;
           color:#666;
           border-left:6px solid #c0c0c0;
           border-top:1px solid #c0c0c0;
           border-right:1px solid #c0c0c0;
           border-bottom:1px solid #c0c0c0;
           transition-duration:1s;
           -webkit-transition-duration:1s;
           -moz-transition-duration:1s;}
blockquote:hover{transition-duration:1s;
                 -webkit-transition-duration:1s;
                 -moz-transition-duration:1s;
                 border-radius:6px;
                 -moz-border-radius:6px;
                 -webkit-border-radius:6px;
                 border-color:green;
                 background:#E6FFB1;
                 -moz-box-shadow:0px 1px 5px #000000;
                 -webkit-box-shadow:0px 1px 5px #000000;}

Keterangan:

blockqute:hover itu maksudnya adalah kodeisi blockquote ketika pointer berada di atasnya
margin:20px; Jarak dari titik luar.. CMIIW
padding: 15px 15px 15px 15px; Jarak teks yang ada di dalam blockqute tersebut, jarak atas bawah kiri kanan, sepanjang 15px
border-left:6px solid #c0c0c0; Ini adalah garis Kiri, dengan ukuran 6px jenis solid warna #c0c0c
transition-duration:1s; Ini adalah durasi berubahnya..
border-radius:6px; Ini untuk membuat pojok border tidak lancip..
border-color:green; Ini warna bordernya
background:#E6FFB1; ini adalah warna backgroundnya
-moz-box-shadow:0px 1px 5px #000000; Ini adalah effek bayangan..
-moz- dan -webkit- supaya brouser mozilla dan brouser lain seperti chrome bisa baca tuh kode

NB : kalo mau muncul blockquotenya harus memasukan ke HTML postingan.

<blockquote>
tulisan kamu ..
</blockquote>

OK,, cukup sekian dulu... silahkan modifikasi sesuka hati kode-kode itu.. Mainkan imajinasimu

Jauh JG

Thursday, October 31, 2013

Membuat Blockquote Keren efek Hover

No comments:

Post a Comment