Cara Membuat Efek blockquote Bergerak pada Blog

Kali ini saya ingin berbagi cara membuat blockquote bergerak,

keren deh pokoknya..hoho..

contoh blockquotenya seperti ini,sob

n jika sobat ingin tahu kode scriptnya,

saya bagi gratis:

simak deh...

1. Login blog

2. Template

3. Edit html

4. Cari .post blockquote {

5. Tambahkan kode berikut dan delete aja kode blockquote lama.

.post blockquote {

-webkit-user-select:text;

-moz-user-select:text;

-webkit-animation-name: shake;

-webkit-animation-duration: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

background:#424242;

padding:15px;

border-top:3px solid #3c98e8;

border-bottom:5px double #366dbb;

border-right:1px dashed #3659a8;

border-left:1px dashed #3880d2;

color:#D1D1D1;

-webkit-transition: 1.0s;

-moz-transition: 1.0s;

}

blockquote:hover{

-webkit-animation-name: none;

-webkit-animation-duration: 2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

-webkit-transition: 1.0s;

-moz-transition: 1.0s;

color:#fff;}

@-moz-keyframes shake /* Firefox*/

{

{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }

20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }

30% { -moz-transform: translate(0px, 2px) rotate(0deg); }

40% { -moz-transform: translate(1px, -1px) rotate(1deg); }

50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }

60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }

70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }

80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }

90% { -moz-transform: translate(2px, 2px) rotate(0deg); }

100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }

}

@-ms-keyframes shake /* IE9*/

{

10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }

20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }

30% { -ms-transform: translate(0px, 2px) rotate(0deg); }

40% { -ms-transform: translate(1px, -1px) rotate(1deg); }

50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }

60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }

70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }

80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }

90% { -ms-transform: translate(2px, 2px) rotate(0deg); }

100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }

}

@-webkit-keyframes shake /* Safari and Chrome */

{

0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }

10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }

20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }

30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }

40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }

50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }

60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }

70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }

80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }

90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }

100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }

}

untuk blockquote hovernya berfungsi jika kode nanti akan di copy, ketika di sorot, blockquote akan diam tidak bergerak.

Sehingga dalam copast kode nantinya ngga ribet.

6. Simpan template dan selesai.

Demikian cara  Membuat Efek blockquote Bergerak pada Blog.

Semoga tutorialnya bermanfaat.