Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog: Hallo shabat blog ID Dzgn kembali lagi bersama saya admin blog ini, kali ini saya akan membahas tutorial yang mungkin bisa merubah tampilan blockquote shobat jadi lebih keren, dan lebih menarik,

Nah di atas adalah gambar animasi dari demo blockquote efek shake, jika masih penasaran dengan demonya berikut silahkan lihat link demonya.

Result

Nah bagai mana keren bukan?, Tertarik membuatnya di blog kamu???

Cara Merubah Tampilan Blockquote Dengan Efek Shake Di Blog

1. Silahkan shobat masuk ke Blogger>Tema>Edit Html, Lalu kamu cari kode ]]></b:skin> lalu pastekan kode berikut di atasnya, untuk mempercepat pencarian silahkan shobat klik tombol

CTRL

+

F

pada keyboard shobat.

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44AwY0-8ZVrH_lafCpFOVQNwAyjK1U_vHFNcxAffaDoCJCDARQlUXFdB4hdzTSqz9Wu8147KY9cMO0TxXBa89dM6GM7p1J0KihEFTTYjtZp393gegl0hH6RkIr4nD_8IXmkELl5DKL8Vo/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://blogger.googleusercontent.com/img/proxy/AVvXsEg_o2Lqe61xPpS1_JNJKv5vf68-wh9gh6kmn2KhnhE5Jz45GOZeTSCVbe6_3ZZoxwCYGw8omHydfIktuhJBEIVBDAFKkCuUGbBm00EgYb5AEbpY6kGDc1lq2CUrEA=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://blogger.googleusercontent.com/img/proxy/AVvXsEgYKWfDD0xlf2hzH2Hftw0AK88brTLnPcy8yGcULlvOpMEt7qw70WSvszVQ2T-0Jc6FbRpJlDteQJHgFiyy5GqQo2bLDVWpXxc-xrNJMZyhdCYAOZWEPmBB5_iaosuZOSdJu9XbGkV4KTrScOpB3jAtheEtsdOoWiHnEqDbLSpAsCIPdmXEig=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 sudah terpasang CSS untuk tag blockquote Shobat bisa menghapusnya atau langsung menggantinya dengan CSS blockquote di atas.

Nah jika sudah selesai silahkan save/simpan.
2. Nah silahkan sobat buat artikel baru, atau mungkin jika sudah ada artikel yang ingin di isi dengan efek blockquote sobat bisa gunakan artikel tersebut. Pada bagian artikel yang di edit silahkan kamu buat tag blockquote contoh:

<blockquote>Text Kalian Di Sini</blockquote>

"Text Kalian Di Sini" Silahkan shobat ganti dengan text yang di bungkus blockquote.
Jika shobat termasuk orang yang kreative shobat bisa mengeditnya lagi.

Nah jika sudah selesai silahkan shobat Publikasikan kembali, lalu lihat hasilnya.

Artikel Terkait