Cara Merubah Tampilan Blockquote Dengan Dampak Shake Di Blog

Baca Juga

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

Nah di atas yakni gambar animasi dari demo blockquote imbas shake, bila masih ingin tau 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 kau cari arahan ]]></b:skin> kemudian pastekan arahan 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/AVvXsEiPpRWhjxW18D-udGl5IFmS1CoktuRcY26o0BON-v4Ft0WUfnMsCtfEkPA1C9C_qOZrKJxRehJ355YowoH2BBJh5Z_NsyTTTo42U1HTBzfYJFfgsivVX9JyVnotKMxGAnaExtHNaui-Qk5N/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/AVvXsEiVMyOX5CX19pGLtmjleEt9ZrG7JsdmbZ_BhNrTyuIEIFHCT_xWoVq_Cl6NZbFPXQrSXXVKkFxjoc2tX9TsPxs7Cu49XfMzRl6Ut3rLM5Qx-C0Pt4p0dr1NPshYaw=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/AVvXsEhS8OxrVPgJe_0-X2bCkEjiVO04G2PVsRnhbEzSEpc8zoZ2IGUKslhS9mHIzuUZb84uDnOADsXfuyCKrUVRcJlkX3qG9VzqVV1pXvRAixK4B1a32WITzvdJ4gWzWhSkjRwxPs_yj86RmDp46WkDJgqNTocUR4vFhm59vCKxUCa0I_XkYOzS0g=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 dapat menghapusnya atau eksklusif menggantinya dengan CSS blockquote di atas.

Nah bila sudah simpulan silahkan save/simpan.
2. Nah silahkan teman buat artikel baru, atau mungkin bila sudah ada artikel yang ingin di isi dengan imbas blockquote teman dapat gunakan artikel tersebut. Pada bab artikel yang di edit silahkan kau 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 dapat mengeditnya lagi.

Nah bila sudah simpulan silahkan shobat Publikasikan kembali, kemudian lihat hasilnya.