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....
6 komentar
buat hemat ruang posting juga ya mas :)
BalasHapusoi, klo gak ya untuk tampil beda :)
Hapushehe, ampun master :)
Hapusmaster of the wrong man :)
Hapus:ya: :-d
BalasHapussip :)
HapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>