Sabtu, 18 Januari 2014
by

Membuat Blockquote (CSS3)

Blockquote - Blockquote dalam tiap template berbeda beda tampilanya, ada yang sudah dilengkapi dan ada juga yang belum. jika anda ingin menambah/merubah blockquote ini tidak ada salahnya untuk menggantinya dengan yang lebih bagus. Dari tampilan berbeda untuk yang akan kita buat kali ini namun fungsinya tetep sama. Seperti apa tampilan blockquote kali ini? Langsung Nyebur ke HTML Mode deh...

Blockquote Hover 

1. Masuk Blogger seperti biasane
2. Pilih Rancangan/Design
3. Pilih EditHTML dan Centang "Expand Template Widget"
4. Cari kode  ]]></b:skin>
5. Copy kode di bawah ini, Lalu Letakkan di atas kode ]]></b:skin>

blockquote {
padding: 10px;
margin: 10px 0 10px 20px;
background-image: url(http://i264.photobucket.com/albums/ii184/aandfx/bgBloquote.png);
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.bopen, blockquote span.bclosed {
float: left;
margin-right: 5px;
height: 17px;
width: 22px;
background: url(http://i264.photobucket.com/albums/ii184/aandfx/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.bclosed {
float: right;
margin-left: 5px;
margin-right: 0;
background: url(http://i264.photobucket.com/albums/ii184/aandfx/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bopen, blockquote:hover span.bclosed {
-o-transform: rotate(1090deg) scale(1.1);
-moz-transform: rotate(1090deg) scale(1.1);
-webkit-transform: rotate(1090deg) scale(1.1);
}
6. Save

Tidak ada komentar on "Membuat Blockquote (CSS3)"

Leave a Reply