Cara Membuat Blockquote Hover


Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang "Expand Widget Template"
4. Untuk keamanan lebih baik kita "Download Template Lengkap"
5. Gunakan Ctrl+F or F3 untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
7. Dan Simpan kode berikut diatas kode ]]></b:skin>

 blockquote {       
         padding: 10px; height: auto;
         margin: 10px 0 10px 20px;
         background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhehshs2MRmKz0OVy9wISvY97yzfF5p0jXK642a0RyZLWept34ee7Bq8n_Sie-_iX13uoFxDUbxNywsD46rcbyH5K0GekOu294UfcMBDkJillkVF7dZYlZbLZVoKadjUwojhNvTxKQZkC0z/s1600/papers.jpg);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;
         text-shadow: 1px 1px 1px #000;
         border: 1px ridge  #0099FF;
         border-radius: 20px 10px 20px 10px;
        -moz-border-radius: 20px 10px 20px 10px;
        -webkit-border-radius: 20px 10px 20px 10px;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
         color: #eee;
        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
        -o-transform: rotate(1090deg) scale(1.1);
        -moz-transform: rotate(1090deg) scale(1.1);
        -webkit-transform: rotate(1090deg) scale(1.1);

8. Simpan ....

"Selamat Mencoba"

4 komentar:

  1. Muantaf infonya gan... Ntar ane coba-coba dah... heheeh... salam blogger kawan.

    BalasHapus
    Balasan
    1. silahkan di coba gan ,
      jangan sungkan² mampir ke blog saya ..ehehhee... :D
      salam blogger jg ;)

      Hapus
  2. demonya kya gmna gan...klau udah tau..pasti di coba..

    http://lano88.blogspot.com/

    BalasHapus
    Balasan
    1. itu sperti Blockquote punya saya ,
      silahkan anda coba .. Terima kasih dah mampir ;)

      Hapus

SILAHKAN TULISKAN KOMENTAR SOBAT DISINI
» Berkomentarlah dengan baik dan bijak, tidak mengandung unsur SPAM, SARA, P*RNO, LINK. dan komentar yang tidak sopan serta menyinggung apapun tanpa terkecuali, komentar yang melanggar ketentuan tidak akan saya tampilkan ..

Terima Kasih !

 

Design by Ojezz Lastfriend | Powered by Blogger | Published by Dunia Blogspot.com