Wednesday, 31 July 2013

Efek Zoom Serta Animasi Keren Pada Blackquot



Lansung aja gan pada postingan ini saya akan membagikan trik membuat efek zoom serta animasi keren pada blackquot anda blackquot ini sangat menarik karena ketika kursor agan menyentuhnya maka efek zoom pada blackquot ini akan beraksi lansung saja simak tutorialnya jika agan ingin mencoba blackquoot keren ini..

#main-wrapper{padding-left:20px;width:725px;float:$startSide;word-wrap:break-word;overflow:hidden}

Kurang Lebih Begitulan contoh blackquot yag akan ditampilkan Pada pembahasan Blackquot ini
blackquot tersebut akan memberi efek zoom ketika cursor menyentuhnya..


Masuk Blog anda
Pilih template/Edit Html
Kemudian Cari Kode ]]></b:skin> gunakan ctrl + f untuk memudahkan agan dalam pencarian
Jika sudah ketemu copas kode dibawah ini diatas tag ]]></b:skin>


blockquote {
         padding: 10px;
         margin: 10px 0 10px 20px;
         background-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgBloquoteV236H2.png);
         font: 13px/17px Serif, Times, Helvetica;
         font-style: italic;
         color: #FFCC99;  /* original code: gubhugreyot.blogspot.com */
         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);
}



Nah Kode tersebut akan beraksi secara otomatis ketika agan membuat postingan dengan blackquot agan
Selamat Mencoba Blackquotnya semoga bermanfaat........

No comments:

Post a Comment