Dengan memanfaatkan css transisi dan css pseudo classes kita coba untuk membuat blockuote yang akan terbuka dengan sendirinya ketika pointer di arahkan ke area elemen blockquote tersebut. trik ini sendiri sebenarna lebih cenderung seperti efek hover, dan tidak menggunakan javasript atau pun jQuery di dalam cara kerjanya. jika anda ingin tau coba lihat demo di bawah ini dan arahkan pointer mouse ke bloclquote tersebut:
Dengan trik blockquote ini anda tidak perlu kuatir dengan masalah tidak dapatnya kontent dalam elemen yang tidak dapat di Copy, karena semua kontent di dalam elemen blockquote ini tetap dapat di copy/disalin dengan mudah...
untuk membuatnya, silahkan login ke akun blogger anda, pilih template dan Edit HTML, lalu copy kode css berikut ini dan pastekan diatas tag kode
]]></b:skin> atau di antara
</style>:blockquote.auto-db {
margin:15px 30px;
font:italic normal 14px/1.4 Georgia,Serif;
height:0;
padding:0 0;
background-color:#333;
border:10px solid #ccc;
border-left-color:#D7362E;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
overflow:auto;
-webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
-o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
transition:all 1s cubic-bezier(1,0,0,1) .5s;
}
blockquote.auto-db:hover {
padding:10px 15px;
background-color:#fff;
border:1px solid #ccc;
border-left:5px solid #800000;
height:350px;
}
untuk menggunakannya di dalam posting, silahkah tambahkan class
auto-db pada
blockquote anda, seperti berikut ini:
<blockquote class="auto-db">
Tulis isi konten anda di sini...
</blockquote>
Silahkan anda ubah cssnya dengan gaya yang anda inginkan, seperti border/garis, tinggi, lebar, warna latar belakang dan lainnya.
Semoga berguna....
Belum ada tanggapan untuk "Blockquote yang membuka otomatis di posting"
Post a Comment