Tutorial Blockquote (3)

Assalamualaikum.. It's time for tuto.

Hye guyss..Dah lama sangat dah tak buat tuto? Btw,sebelum tu Selamat Hari Raya Aidilfitri,Maaf Zahir Batin. Heheh ;D Dah nak raya kann? Tak dapat bagi duit raya kat korang,bagi tuto pun jadilah kan? Korang mesti pernah jenguk blog Aliaa Eyra kan ? Kalau korang perasan , blockquote dia cantik gila kan and dia dah share pun code blockquote tu , and sana disini just nak re-tuto balik kat korang .

Live preview 

1.Cari code dibawah ni

blockquote{ 

2.Dah jumpa? Padam anak-anak code bawah tu, and gantikan dengan code bawah ni pulak .And pastekan kat bawah code blockquote{ tadi .

font-family:'short stack'; font-size:13px;-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:#FFF9B8;padding:15px;border-top:3px solid #FFC6BC;border-bottom:5px double #FFC6BC;border-right:1px dashed #A7D3D2;border-left:1px dashed #A7D3D2;color:#9C9C9C;-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:#555;}@-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); }}

3.Just save okay ! Blockquote dia nanty akan goyang-ii tengok jelah nanti :) Comel :)