5 Animasi Blockquote Very Cool

5 Animasi Blockquote Very Cool di Blog - Pada kesempatan kali ini saya akan membagikan tutorial cara menciptakan blockquote keren, pada prinsipnya untuk menciptakan background blockquote animasi memakai fungsi CSS. Pemasangan Blockquote pada sejatinyaadalah untuk mempercantik tampilan dan juga sanggup meningktkan SEO Blog.

Berikut ini yaitu langkah-langkah pemasangan Blockquote :

1. Login keakun Bloger anda
2. Pilih Template » Edit HTML
3. Selanjutnya anda cari kode ]]></b:skin>
4. Kemudian anda terapkan arahan di bawah ini sebelum kode ]]></b:skin>

1. Style blockquote I

blockquote {
width: 90%;
margin:10px auto;
border-top: solid 1px #ccc;
border-left: solid 10px #666;
border-bottom:
solid 1px #ccc;
border-right: solid 1px #ccc;
box-shadow:100 2px #999;
background-color: #eee;
padding: 10px; font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
line-height: 15px;
word-wrap: break-word;
text-align: left;
}
blockquote:hover {
border-left: solid 10px #3A74C9;
color: #000000;
background-color: #FFFFFF;
box-shadow:0 0 5px #999;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8wtXULOe_Bv8gOiDgy9f3Anwofwr_2whgVcHkFMTqQ-fVQIC4xfhiNaTO1p-ldt5tFxvJS4lQnFLY3F6ISafYxfJbaDOrpInRthljt79fdHhaGfD8gTLfTWiERPL3kdx0aA707iuUWQQ/s1600/blue-serenity-animated-
wavy.gif") repeat;
}

2. Style blockquote II

blockquote {
width: 90%;
margin:10px auto;
border-top: solid 1px #A2A2A2;border-left: solid 1px #A2A2A2;border-bottom: solid 1px #A2A2A2;border-right: solid 1px #A2A2A2;
box-shadow:100 2px #999;
background-color: #CAD4FF;
padding: 10px;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
color: #333333;
line-height: 15px;
word-wrap: break-word;
text-align: left;
}
blockquote:hover {
border-top: solid 10px #1326FC;border-left: solid 10px #1326FC;border-bottom: solid 10px #1326FC;border-right: solid 10px #1326FC;
color: #000000;
background-color: #FFFFFF;
box-shadow:0 0 5px #999;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8tNVtzle8e0q4RldC9U8Dzs6nKMOMnakJNUQemgL0FsatiYsHrlSk0IA_IwIWW08M01JM1XJOdI9gmWP9FUGd6_Koop2ScgVvhskNGEZxf_nbJl1a8t3RAezGE2bCP0R2u2OEVsarnTc/s1600/mosaicsquare.gif") repeat;
}

3. Style blockquote III

blockquote {
background-color: #666;
color: #fff;
font-weight: bold;
padding: 10px; -moz-border-radius: 5px;
}
blockquote:hover {
border-top: solid 10px #666;
border-left: solid 1px #666;
border-bottom: solid 1px #666;
border-right: solid 10px #666;
color: #C2C2C2;
background-color: #FFFFFF;
box-shadow:0 0 5px #999;
background:url("http://www.heathersanimations.com/backgrounds/ani/Bubbles.gif") repeat;
}

4. Style blockquote IV

.post blockquote {
-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:#424242;
padding:15px;
border-top:3px solid #3c98e8;
border-bottom:5px double #366dbb;
border-right:1px dashed #3659a8;
border-left:1px dashed #3880d2;
color:#D1D1D1;
-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:#fff;}
@-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); }
}

5. Style blockquote V

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC0yMIJWJSWx137lIXmorTz7tabwWwvS9ivsNfgLiVo-3C-UAgFyfVFo2A9RYYZWQUg3lH1-5g8pTYnbpHaR6JJAbJ4i7RdzJzHBjwMJmcWxuBKMJpEW4gO-TElLHeN6VPUTHmbeVO6Qo/s1600/premium+blogger+blockquotevertical+copy.png) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
.post blockquote
{
font: normal 17px "Garamond",Georgia, Times, serif;
background-color: #BFE3FE;
color: #000;
margin: 5px 10px;
padding: 20px 10px 20px 37px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.post blockquote:hover
{
background-color:#009999 ;
color: #fff;
}
.post blockquote:active
{
background-color: CornflowerBlue ;
color: #000;
}

5. Simpan Template
Untuk memakai blockquote secara otomatis anda klik dua tanda putik, berikut screen shootnya

namun kalau anda ingin memakai secara manual, anda cukup memakai blockquote diawa dan diakhir masuk kelaman gres dan letakkan di Compose HTML , menyerupai berikut :

<blockquote>
........................
</blockquote>

Demikian Cara Membuat Animasi Blockquote  Very Cool di Blog , biar bermanfaat!





Sumber http://www.websiteedukasi.com/