Membuat Auto Expand Blockquote dengan CSS Transisi

blockquote ini lain dari yang lain.. selain simple.. ia begitu menghemat ruang.. agar tidak nampak berserakan..
bisa bisa orang nggak nyangka kalo ini blockquote..karena memang tidak nampak seperti blockquote..oke langsung aku kasi screenshotnya...cekidot..



gimana seperi bukan blockquote kan...disaat mouse menyorotnya(mengarah padanya) ia akan terbuka. cukup menyorot saja, waktu di sorot oleh mouse maka blockquotenya akan jadi seperti ini.. Cekidot


ha.. gitu jadinya.. giana berminat ? oh masih ragu ni aku kasi [DEMO] nya langsung biar gak bingung.. oke gimana mau gak..


oke dah lanjut aja.... ke proses pembuatannya

  • Loggin  blogger
  • Rancangan-->Edit html --> cari kode ]]></b:skin>
  • letakkan kode berikut diatasnya

blockquote.collapsed { margin:15px 30px; font:italic 14px Georgia,Serif; height:0px; padding:0px 0px; background-color:#FFE046; border:10px solid #FDD404; border-left-color:#D7362E; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); overflow:auto; -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s; transition:all 1s cubic-bezier(1,0,0,1) 0.5s; } blockquote.collapsed:hover { padding:10px 15px; background-color:#47AD47; border:5px solid #156715; height:350px; }


  • oke simpan template kalian...



tapi masih belom selesai..kode untuk pemanggilya belom lagi..
<blockquote class="collapsed">
   Apapun bisa kamu letak disini
</blockquote>



  • oke baru udah...Semoga bermanfaat



Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Yuk Tawa, Published at 20.42 and have 5 komentar

5 komentar:

  1. blockqoutenya masihh sdikit anehhh....
    blum lihat smuanya kok blockqoutenya dah tertutuppp


    haha blockquote lucuu

    BalasHapus
  2. @Simple Semua:mousenya tinggal di arahin lalu di scroll

    BalasHapus
  3. Weh, lumayan keren sob ...

    BalasHapus