Posted by Aak
Aak-share.com Updated at: 9:28:00 PM

5 Animasi Blockquote Very Cool

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


Berikut ini adalah 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 kode 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("http://2.bp.blogspot.com/-RBtAiowOhEY/VDFajFDSfTI/AAAAAAAAEDA/zANpp7a3zpw/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("http://1.bp.blogspot.com/-P6eD0uL9mvA/VDFandr9PGI/AAAAAAAAEDM/Qzqf5kWS1TU/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(http://3.bp.blogspot.com/--2921W2qng0/UUbielGP6lI/AAAAAAAACvM/-IYv908vMqM/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 menggunakan blockquote secara otomatis anda klik dua tanda putik, berikut screen shootnya


namun jika anda ingin menggunakan secara manual, anda cukup menggunakan blockquote diawa dan diakhir masuk kelaman baru dan letakkan di Compose HTML , seperti berikut :

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

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




Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments