How to customize colorful blockquote?

Salam if you are a muslim.

Hai!

Today i'm going to share with you on how to customize colorful and pattern blockquote..

Simple and nice. 

This is the example of customize blockquote. =)

1) Go to dashboard ==> Design ==> Edit HTML ==> click on Expand Widget Templates

2) CTRL + F then type blockquote. Highlight the code below

.post blockquote {
margin:1em 20px;
}

Paste the code that you highlight with the code below

.post blockquote {background : #FFCC99;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px;padding: 6px;Border: 1px solid #ff0d62;margin:1em 20px;} 

3)  If you cannot find the code. It's okay. CTRL + F and type post. Find the code .post _____ . Don't have to highlight anything. Just paste the code above to after }
For example:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.post blockquote {
background : #cd065a;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 5px solid #ffffff;
margin:1em 20px;
}

 4) You can change the code with your own desire. Hehe. For an example you can change the background with pattern if you don't want it to be too plain.

Highlight this code

background : #cd065a;

paste it with this code

 background-image : url (CHANGE THE URL OF THE IMAGE HERE); 

That's all for today. Hehe