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

So I have been roaming around the interwebs and I am so disgusted by the prices of some designers. I won't name any, but I want to help facilitate people to do for themselves! I understand not everyone is tech savvy, but I want to help you guys out. So this is part #1 in, I don't need a designer!

The first thing I want to focus on are BOLD STYLES.

Are you tired of stupid old black bold styles? Guess what?? You can style that yourself. Check out these mildly cool bold styles below:

So how do you do that?? EASY PEASY my friends.

Check out this code below, I am going to show you how to use it and add styles to it!

b{
color:#fe75bc;
font-weight:bold;
}

First things first. Let's go over what is in the above code: Color:#fe75bc;     ---  It's the color of the bold! I know it's not that surprising given the word "color". font-weight:bold; -----  This is how the text shows up. Colors can be changed to any color your little heart desires. First I am going to copy the code into my notepad++ which is totally free! I use this so I can edit the variables.

This style can be added without you even having to go into the HTML-- Just navigate to

Home>Template>Customize



Now I am going to paste in my style into the "CUSTOM CSS" box, right now it is blank, but you will see it won't be in a minute.

b{
color:#2481e9;
font-weight:bold;
background-color:#000;
}

Labels: blogger bold style, blogger styles, design help