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
Posted by at 2:11 PM

9 comment [s]:

btrsykml said...

untuk template designer tak da ka?

October 26, 2012 at 8:30 PM [REPLY]
atiqahjaidin said...

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

October 26, 2012 at 8:45 PM [REPLY]
btrsykml said...

okey :) thank you.

October 27, 2012 at 4:10 PM [REPLY]
AdawiyahAsri said...

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

November 6, 2012 at 9:26 AM [REPLY]
AlisyaLittleGirl said...

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

January 8, 2013 at 1:15 PM [REPLY]
taehygsbby said...

okay jadi :) hihi thanks akak ..

January 21, 2013 at 3:24 PM [REPLY]
Malihah Munirah said...

macam mana nak letak scroll bar dlam blockquote nii ??

January 26, 2013 at 1:07 PM [REPLY]
Lily- said...

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

January 29, 2013 at 1:12 AM [REPLY]
Zimmie Wimmie said...

thnx!!

June 6, 2013 at 4:24 PM [REPLY]

Post a Comment