Tutorial Membuat Area Blockquote Cantik Efek Shake Di Blogger

klok sebelumnya saya share Cara membuat text area keren Highlight di blog, nah kali ini saya membagikan Tutorial Membuat Area Blockquote Cantik Efek Shake Di Blogger.Mungkin anda berminat juga untuk artikel ini: Membuat Text area keren Part 1 Area blockquato cantik ini cocok di gunakan untuk blog/website yang menyediakan Kisah/Tentang Puisi Diary, Cinta, Perjalanan hidup wanita dan lainnya..

Tutorial Membuat Area Blockquote Cantik Efek Shake Di Blogger

Tutorial Membuat Area Blockquote Cantik Efek Shake Di Blog/website

Langkah-langkah membuat: Area Blockquote Cantik Efek Shake Di Blogger

1. Masuk ke Dasboard blog anda 2. Pilih menu Template==>Pada menu Template ada dua metode di sana (Sesuaikan dan Edit HTML) <== Pilih Edit HTML 3. Lalu cari code ]]</b:skin> jika sudah ketemu silahkan anda Compas Code berikut tepat di atas ]]</b:skin>

.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/AVvXsEh7B5w64oRtUmP1CFDAvqi94XBNUQp9D-j9PS5z0enrk3v8MBoST1lDhpDxSj9lBl9sBRKaG7GeV5SJxu04VT6MSsqtDBX6PSdkUGT8tQSWDsSYnq0G2ofGUpab7qzaemMA2j5QcmE-hiyj/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(http://i.imgur.com/WxmqZ.gif); 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(http://i890.photobucket.com/albums/ac106/Fathinie1905/Emoticons/31.gif); 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); } }

4. Untuk memasang Area Blockquote pada postingan tambahkan code (<blockquote>)pada bagian depan text yang akan anda sisipkan<br />
5. Dan di akhiri dengan code (</blockquote>) pada bagian akhir text

Nah gi mana shobat bloggingku sekalian cukup mudah bukan!!!..
mungkin cukup sampai di sini dulu untuk postingan saya kali ini