FREEBIES : Code for your cute Blockquote

Baca Juga

hyee :) salam semuanya :) hari nie una nak share dengan korunk code untuk korunk letak dalam bahagian code blocquote. una dah tweak kan code2 dia semua , dan una dah letakkan gambar mcm mana rupanya sebelum & selepas cursor menyentuh :) colour , background & etc korunk boleh tweak sendiri ikut citarasa korunk kay ? tak tahu nak guna kan ? boleh ikut tutorial ini --> About Blockquote :)

BLOCKQUOTE LIP LAP

.post blockquote {
background:#FFC6C6;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.post blockquote:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCeekTl7EK8QMD46wGok5NLWT9JEVwSO1jpPZQWtbpuZJc3dIGT55pdIJoVaYYguG80UTctFye4Cpb9GcDDJdtWjlVoQcH-udEK0JRSoNa78wgYWp5g7ejFm0myLyQslItvvyQJR963G5/s1600/pinkgrain.png);
color: #000000;
-webkit-transition: 3s;
}

BLOCKQUOTE BORDER SOLID TURN DASHED

.post blockquote {
background:#FFC6C6;
Border:2px solid #DEB1B1;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.post blockquote:hover {
Border:2px dashed #DEB1B1;
color: #000000;
-webkit-transition: 3s;
}

BLOCKQUOTE SWINGING 360deg

.post blockquote {
background:#FFC6C6;
-webkit-transition-duration: 3s;
padding: 12px;
margin: 2px 2px;
color: #ffffff;
border:2px solid #FF9696;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
.post blockquote:hover {
color: #000000;
-webkit-transition: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
background-color: transperant;
-webkit-transition-duration: 2s;
border:2px dashed  #FF9696;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

BLOCKQUOTE ADA ICON CHOMEL

.post blockquote {

background:#FFC6C6;

-webkit-transition-duration: 3s;

padding: 12px;

margin: 2px 2px;

color: #ffffff;

border-left: 6px solid #DAB0B0;

border-right: 2px dashed #FFFFFF;

border-bottom: 2px dashed #FFFFFF;

border-top: 2px dashed #FFFFFF;

-moz-border-radius-bottomright: 10px;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

}

.post blockquote:hover {

color: #000000;

-webkit-transition: 3s;

background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic009demoji_11848475decoojp.gif);

background-position:bottom right;

background-repeat:

no-repeat;

}

BLOCKQUOTE ICON CHOMEL TEMBAK

 .post blockquote {

background:#FFC6C6;

-webkit-transition-duration: 2s;

padding: 12px;

margin: 2px 2px;

color: #ffffff;

border-right: 6px solid #DAB0B0;

border-left: 2px dashed #FFFFFF;

border-bottom: 2px dashed #FFFFFF;

border-top: 2px dashed #FFFFFF;

-moz-border-radius-bottomleft: 10px;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

}

.post blockquote:hover {

color: #000000;

-webkit-transition: 2s;

border-left:20px double #DAB0B0;

background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic009demoji_11848475decoojp.gif);

background-position:bottom right;

background-repeat:

no-repeat;

}

BLOCKQUOTE BORDER SQUARE TURN TO RADIUS 

.post blockquote {

background:#FFC6C6;

-webkit-transition-duration: 3s;

padding: 12px;

margin: 2px 2px;

color: #ffffff;

border:2px solid #FF9696;

}

.post blockquote:hover {

color: #000000;

-webkit-transition: 3s;

border:2px solid #E8BEFF;

border-radius:10px

}

NOTA BIT BOTT :

penat una tweak kan satu-satu :) harap korunk minta permission dari una if nak re-freebies okey ? una tak kan marah punyer ^^ and please credit me if you use this :) kalau tak pun comment okey ? una takkan marah punyer , thanks yupp sebab guna :) kalau korunk nak masuk kan code nie korunk preview dulu okey ? then tengok hasil yang sepenuhnya , gambar tuh takut korunk blurr plak kan ? sooo ,  kalau cantik baru save ^^ soo , semoga berjaya korunk !

Subscribe to receive free email updates: