Bagi anda yang ingin menampilkan postingan dengan tampilan yang berbeda, coba ikuti cara yang satu ini :
1. Login ke Blogger
2. Klik menu Rancangan - Edit HTML - Expand widget.
3. Cari kode ]]></b:skin> 4. Kemudian simpan kode di bawah ini di atasnya
blockquote {
padding: 10px; height: auto;
margin: 10px 0 10px 20px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuDYH02POln2WoF80DPWoKyHOJ9VW4ufUKhovSMKfkYkLvT16rk9d_hktGfLyHbcmpZ6IFpcYsmLKZD362Uz-r7UGbhklUXEuYFHN4-eRSwv3gyyCC37t31nst5JiFZdj3pbc8sbS-HDy/s1600/papers.jpg);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99;
text-shadow: 1px 1px 1px #000;
border: 1px ridge #0099FF;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}
padding: 10px; height: auto;
margin: 10px 0 10px 20px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuDYH02POln2WoF80DPWoKyHOJ9VW4ufUKhovSMKfkYkLvT16rk9d_hktGfLyHbcmpZ6IFpcYsmLKZD362Uz-r7UGbhklUXEuYFHN4-eRSwv3gyyCC37t31nst5JiFZdj3pbc8sbS-HDy/s1600/papers.jpg);
font: 13px/17px Serif, Times, Helvetica;
font-style: italic;
color: #FFCC99;
text-shadow: 1px 1px 1px #000;
border: 1px ridge #0099FF;
border-radius: 20px 10px 20px 10px;
-moz-border-radius: 20px 10px 20px 10px;
-webkit-border-radius: 20px 10px 20px 10px;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
color: #eee;
-o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
-webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}
Untuk cara membuatnya kopi paste kode di bawah ini ke dalam postingan anda
<blockquote><span class="opening"></span>Masukkan teks disini<span class="closing"></span></blockquote>
SEMOGA BERMANFAAT
Sumber : http://www.kangdadang.co.cc/2011/02/cara-membuat-blockquote-hover.html
Cara Membuat Blockqute Hover
Reviewed by Akses Rupiah
on
Juni 24, 2011
Rating:
Tidak ada komentar:
Posting Komentar