GO Blog

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:


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....