Assalamualaikum...ini post pertama saya dalam bulan disember... ^^, kali ni saya nak share empat style blockquote...tau tak blockquote tu apa?
Inilah dia blockquote...kotak pada tulisan nie...haa...nak buat jugak?? ikut tutorial nie...
Template designer.
search guna ctrl dan F tekan dalam satu masa...
1. search perkataan
blockquote ada tak? kalau tak ada search perkataan
/ * posts kalau tak ada jugak pilihlah yang lebih kurang macam kod tu...
Classic template.
1. search perkataan
blockquote { atau yang lebih kurang macam tu...
2. kemudian padam semua kod blockquote dibawahnya...
kalau tak ada perkataan blockquote tadi paste code blockquote yang saya bagi nanti bawah
/ * posts_ _ _ _ _ _
Style pertama :
demo tekan sini
blockquote{
border-left: 20px solid #C2E0FF;
border-right: 2px solid #C2e0ff;
border-radius:10px;
border-top: 2px solid #C2E0FF;
border-bottom: 2px solid #C2E0FF;
background:#F0F5FF;
padding :4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
blockquote:hover{
border-left: 2px solid #C2E0FF;
border-right: 20px solid #C2E0FF;
border-top: 2px solid #C2E0FF;
border-bottom: 2px solid #C2E0FF;
background:#ffffff;
background-position:bottom right;
background-repeat:no-repeat;
padding :4px;]
-webkit-box-shadow: 0px 0px 12px #99CCFF;
-moz-box-shadow: 0px 0px 12px #99CCFF;
box-shadow: 0px 0px 12px #99CCFF;
}
Style kedua :
blockquote{
border: 2px dashed #FFC2D6;
background:url(http://i.imgur.com/l5ROw.png);
padding :4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
blockquote:hover{
border: 2px dashed #FFC2D6;
border-radius:20px;
}
Style ketiga :
blockquote{
border: 3px solid #ccc;
background:#F0F0F0;
padding :4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
blockquote:hover{
background-image:url(http://i11.photobucket.com/albums/a168/evelynregly/
minigifs/teddybear1.gif);
background-position:bottom right;
background-repeat:no-repeat;
border: 3px ridge #ccc;
-webkit-box-shadow: 0px 0px 12px #b2b2b2;
-moz-box-shadow: 0px 0px 12px #b2b2b2;
box-shadow: 0px 0px 12px #b2b2b2;
}
style keempat :
blockquote{
border: 6px solid #EBD6FF;
border-radius:10px;
background:#F5EBFF;
display:block;
padding :4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
blockquote:hover{
border-left: 2px solid #EBD6FF;
border-right: 10px solid #EBD6FF;
border-top: 2px solid #EBD6FF;
border-bottom: 10px solid #EBD6FF;
-webkit-box-shadow: 0px 0px 12px #DBB8FF;
-moz-box-shadow: 0px 0px 12px #DBB8FF;
box-shadow: 0px 0px 12px #DBB8FF;
}
warna dan background tukarlah sesuka hati...kod warna
disini :
Dashboard --> new post
Yang pembuka kata tu blockquote...
Cara nak guna:
Highlight perkataan yang nak di blockquote-kan dan tekan pada simbol
blockquote atas tadi...
