Related Posts Plugin for WordPress, Blogger...

Terima kasih anda sudah berkunjung di Website KREASI | Sebuah Kreasi yang mencoba memberikan pengetahuan untuk melangkah dalam masa depan yang Gemilang | Jangan Lupa Tinggalkan Komentar Anda |

Rabu, 09 Mei 2012

Cara Membuat Blockquote Hover

hai - hai sobat, ingin berbagi nih ane, ya langsung aja ya disimak baik-baik ya :

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://lh6.googleusercontent.com/-7EyIrmKnMhU/TWkEaNz8z8I/AAAAAAAAABo/KxVoPQB6ZlQ/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 .... Semoga Bermanfaat.

0 komentar:

Tinggalkan Komentar Anda

Silakan berkomentar dengan baik dan sopan. Untuk berkomentar anda bisa gunakan format di bawah ini.
Format untuk komentar:
1. Pilih profil sebagai Name/URL
2. Isikan nama anda
3. Isikan URL (Blog/Website/Facebook/Twitter/Email /Kosongkan)
4. Isikan komentar
5. Poskan komentar