Cara merubah atau memodifikasi tampilan blockquote dengan efek shake ( bergetar ) di blog terbaru memang jarang yang menggunakan, tapi saya ingin membagikan tutorial ini kepada kalian yang ingin memakai tampilan blockquote bergetar atau shake.
Dengan memasang blockquote seperti ini, saya yakin blog Anda akan menjadi bagus tentunya. Tutorial yang saya dapatkan dari blog ID Dzgn ini memang keren tentunya. Bukan hanya bergerak atau shake saja, tentunya blockquote ini memiliki tampilan yan elegan dan simple untuk di terapkan pada blog Anda. Di bawah ini merupakan gambar yang bisa saya berikan kepada Anda dengan format GIF.
Di sini saya tidak menyediakan halaman demo di karenakan kesibukan saya bermain game Online hehehe :D. Berikut ini tutorial yang bisa Anda ikuti sesuai dengan tutorial yang saya kasih.
Membuat Efek Shake ( Bergetar ) di Blog
Langkah pertama :
Login ke Blogger > Tema > Edit HTML. Silakan Anda Copy CSS di bawah ini di atas kode
]]></b:skin>.post-body blockquote {
background: transparent !important}
.post blockquote {
-webkit-user-select:text;
-moz-user-select:text;
-webkit-animation-name: shake;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
background-image: url(//4.bp.blogspot.com/-drzZx1ixNyc/Uq8HnVfjkDI/AAAAAAAAB1k/YJOQQQxg1pY/s320/M4Mvn.png);
padding:15px;
font:13px comic sans MS;
border-top:4px Groove #ff6699;
border-bottom:4px groove #ff6699;
border-right:2px dotted #ff6699;
border-left:2px dotted #ff6699;
color:#ff6699;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
blockquote:hover{
background-image :url(https://lh3.googleusercontent.com/proxy/0sx-hnrOSA06-AssdaQD3Pe1g6jzDN1cx8FIvzss63FgFZffBYnlkLUHsMZ1KSuk=s0-d); padding: 5px;
-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;
background-image:url(https://lh4.googleusercontent.com/proxy/Wk_-4GoX4-am0FKyMnap95mze46P3lTMjfJf81l006tTeouBibRsAnKK_jti4yMzPCOeVhHQSXLyj0ifleFe2wKb3iRtkfvq1Am9P6TM_2tlWSdOK-6TjeAw=s0-d);
background-position:bottom right;
background-repeat:no-repeat;}
@-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); }
}Jika sebelumnya Anda sudah mempunyai CSS tag Blockquote, silakan Anda hapus dan Anda gantikan dengan CSS di atas.
Langkah terakhir adalah Save template Anda, dan lihat hasilnya.
Demikian tutorial yang bisa saya publikasikan hari ini semoga bermanfaat, tutorial lengkapnya Anda bisa lihat halaman di bawah ini.
Source : https://iddzgn.blogspot.co.id/2017/04/cara-merubah-tampilan-blockquote-dengan-efek-shake-di-blog.html
Post a Comment