Adding a blockquote style is pretty easy. Some tutorials just show how to style one blockquote, but I find it's easier to style the blockquote and have it permanently styled and easy to change.


First things first. Open up the Customize of your template.


Template> Customize  (I will provide screenshots below)







Go to advanced and then Add CSS. On the right you will see a field to the right that says: Add custom CSS.




Below is a sample blockquote style. It is the one that is displayed around my blog's quotes. I will explain each part!

.post blockquote {
  margin:1em 20px;
margin:1em 20px;
margin:1em 15px;
background-color: #fff;
border:2px dotted #fe75bc;
padding: 4px;
display: block;
font-size:14px;
font-family:helvetica;
padding: 25px;
margin-left: 0px;
-moz-border-radius: 15px;
border-radius: 15px;
line-height:100%}
  }

Now understanding each element piece by piece. These are all design variables you can change.

Things you can ignore (you can edit them if you want) are struckout

  margin:1em 20px;
margin:1em 20px;
margin:1em 15px;
background-color: #fff;
border:2px dotted #fe75bc;
padding: 4px;
display: block;
font-size:14px;
font-family:helvetica;
padding: 25px;
margin-left: 0px;
-moz-border-radius: 15px;
border-radius: 15px;
line-height:100%}

background-color: #fff;

background color- This is the background color of the blockquote. You can change this to any color you want. http://www.colorpicker.com/

border:2px dotted #fe75bc;

2px
This is the width of the border.



dotted
This is the style of the border. You can see examples below:



see examples here: http://www.w3schools.com/css/css_border.asp


#fe75bc
This is the color that can be changed.

font-size:14px;
font-family:helvetica;

Font Size- This is pretty self explanatory
Font-family- You can change the font of the text in the blockquote. You can use fonts at http://www.google.com/fonts/. They must be added to your blog template to be effective.


Paste your blockquote into the custom CSS box. Don't forget to save. I have provided some sample blockquotes for easy pasting.



*NOTE*
All these are whatever your default font is on your blog. I did NOT define a font. Also your blockquote will only be as wide as your blog posts.

Purple Standard

Purple Standard Blockquote Code

.post blockquote {
margin:4em 20px;
margin:4em 20px;
margin:4em 15px;
background-color: #cecbe4;
padding: 4px;
padding: 30px;
margin-left: 0px;
-moz-border-radius: 15px;
border-radius: 15px;
color:#3a3a3b;
line-height:100%}

Cotton Candy 

Cotton Candy Blockquote Code

.post blockquote {
margin:4em 20px;
margin:4em 20px;
margin:4em 15px;
background-color: #fddced;
border:2px dotted #fe75bc;
padding: 4px;
padding: 30px;
margin-left: 0px;
-moz-border-radius: 15px;
border-radius: 15px;
color:#3a3a3b;
line-height:100%}

 Bumblebee

.post blockquote {

margin:4em 20px;

margin:4em 20px;

margin:4em 15px;

background-color: #fff7a1;

border:2px solid #000;

padding: 4px;

padding: 30px;

margin-left: 0px;

-moz-border-radius: 15px;

border-radius: 15px;

color:#3a3a3b;

line-height:100%}

Quilted Ocean

.post blockquote {
margin:4em 20px;
margin:4em 20px;
margin:4em 15px;
background-color: #7abfea;
border:2px dashed #b7e3ff;
padding: 4px;
padding: 30px;
margin-left: 0px;
-moz-border-radius: 15px;
border-radius: 15px;
color:#3a3a3b;
line-height:100%}

Minty

.post blockquote {
margin:4em 20px;
margin:4em 20px;
margin:4em 15px;
background-color: #b5f7b8;
border:4px solid #333;
padding: 4px;
padding: 30px;
margin-left: 0px;
-moz-border-radius: 15px;
border-radius: 15px;
color:#3a3a3b;
line-height:100%}

Remember you can change any of these variables in the sample codes to suit your needs!

Labels: blogger blockquote style, blogger styles, design help