Sunday, 2 December 2012

Four blockquote style


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

cara guna blockquote :

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...

2 comments: