Tutorial : Blockquote Styles


Assalamualaikum and annyeonghaseyo. Hari ni tieqa nak share beberapa style blockquote yang tieqa jumpa dekat tumblr. Act, ada beberapa code yg tieqa ubah sikit. Btw, for those yang still tak tahu apa kebenda la "BLOCKQUOTE" tu. Bole refer dekat SINI.

1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Bagi blog yang dah ada code blockquote, korg cari code blockquote {
4. Nanti paste code dekat bawah ni, di atas code </style> atau di bawah code blockquote {


blockquote {
padding-left: 6px;
background:#FFFFFF
padding-bottom : 7px;
font-family: "verdana"; 
font-size:10px;
border-left: 6px solid #000000
text-shadow:1px 1px 0px #fff
color:#000000; width:448px; 
margin-left:10px; 
padding-right:6px; 
padding-top:4px;

blockquote {
padding-left: 6px; 
background:#FFFFFF
text-align:center; 
padding-bottom : 7px; 
font-family: "verdana"; 
font-size:10px; 
border-left: 6px solid #000
border-right: 6px solid #FFF
text-shadow:1px 1px 0px #fff;
color:#000000; width:448px;
margin-left:10px; 
padding-right:6px; 
padding-top:4px;

blockquote { 
padding-left: 18px; 
background:#fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px; 
padding-bottom : 7px;
font-family: "verdana"; font-size:10px; 
border-left: 0px solid #000;
text-shadow:1px 1px 0px #fff;
color:#898888
width:448px; margin-left:10px; 
padding-right:6px; padding-top:7px; 
border-bottom:1px dashed #f295aa
border-right:1px dashed #f295aa;
border-top:1px dashed #68baaf
border-left:1px dashed #68baaf;

blockquote {
padding-left: 6px;
background:#F7F6F6
padding-bottom : 7px;
font-family: "verdana"; 
font-size:10px;
border-top: 2px solid #000
border-bottom: 2px solid #000
border-left: 2px solid #FFFFFF
border-right: 2px solid #FFFFFF
text-shadow:1px 1px 0px #fff
color:#000000; width:448px; 
margin-left:10px; 
padding-right:6px;
padding-top:4px;

blockquote {
padding-left: 16px;
background:#F2FFFF
padding-bottom : 7px;
font-family: "Verdana";
font-size:10px; 
border-left: 6px solid #F6DCFF;
text-shadow:1px 1px 0px #fff
color:#9a9a9a; width:448px; 
margin-left:10px; padding-right:6px; padding-top:4px;
blockquote:hover {
padding-left: 45px; 
border-left: 10px #FFC8E4 solid;
background-color:#E1E1E1
color:#000;
-webkit-transition-duration: 3s;
-moz-transition-duration: 4s;
transition-duration: 2s; 
}
Oren : warna background
Hijau : ketebalan border & shadow
Pink : solid / dotted / dashed
Kuning : warna tulisan
Biru : warna shadow
Hijau muda : warna border

Credit : html-and-etc.tumblr

9 comment [s]:

Swaggie ♥ said...

untuk template designer tak da ka?

Nurul AtiQah said...

@Swaggie ♥ : Adaa..Nt sy buat tutornya :)

Swaggie ♥ said...

okey :) thank you.

Simple Monster said...

akak , cemne nak buat dekat post ? yg mcm kalau ada kat daalm kotak tu ?

AlisyaLittleGirl said...

Ok , Take It Yaw . Thanks For This Tuto :)

nurhamiza shuhada said...

okay jadi :) hihi thanks akak ..

Malihah Munirah said...

macam mana nak letak scroll bar dlam blockquote nii ??

Farhana Lee said...

Dear,unnie guna satu.Kalau nak letak icon gerak2 cm dongsaeng punya tu cmne eak?Btw,gomawo sweetie^^

Hash said...

thnx!!