Changing/styling/customizing/etc. your blockquotes in blogger

Ok, whew, so I have just been on an emaculate journey through blogger. This journey began with trying to display LaTeX in blogger. I then wanted to tweak and fix my "blockquote" in blogger since the template I am using doesn't specify a different background color or border which helps the quotes pop/stand out to the reader for better aesthetics and distinguish-ability. (I will also mess with and talk about the "code" and "pre" HTML tags in another post.) Then default "blockquote" in my template that I chose to use only indented the quote which made it very difficult to pick out of the blog post.

So one of the problems was finding out what to do. I knew I had to go into the Design tab, then the Edit HTML tab/option in the Blogger Dashboard. This allows you to edit the HTML code which controls your template settings of how your blog post/page/widgets/etc. will look. So I Googled "how to edit blockquote in blogger" where of course about a million (figuratively and literally) links returned.

Here are some links I came across which you might find helpful:

Blogger 101: Blockquote Coding - http://momswhoblog.blogspot.com/2007/05/blogger-101-blockquote-coding.html

Quotes in Blogger - Customization - http://www.blogbulk.com/2008/12/quotes-in-blogger-customization.html

How to customize "block quotes" in your posts - http://www.bloggerbuster.com/2007/11/how-to-customize-block-quotes-in-your.html

How to Style Up Your Quotes in Blogger - http://maketecheasier.com/style-up-quotes-in-blogger/2010/09/03

Now this post ^ tells you to find this piece of code in the HTML template editor:

blockquote {
margin:1em 20px;
background: #dfdfdf;
padding: 8px 8px 8px 8px;
font-style: italic;
}

However, in the template that I am using there was not a piece of code like this. I couldn't even find "blockquote" in the code using the find function, CRTL + F. This next post then showed an alternative possibility of code, but alas, it was not there either.

Customize Blockquote In Your BlogSpot Blogs - http://bloggerstop.net/2009/05/customize-blockquote-in-your-blogspot.html

Weird, this link is nearly the same as this ^, information-wise.

How To Customize Blockquote In Blogger - http://www.royaltutor.net/2011/01/how-to-customize-blockquote-in-blogger.html

.post-body blockquote {
margin: 1em 3em;
padding: .5em;
background-color: #f6ebc1; 
}

So ,what I did was simply find a spot to copy and paste to see if this code would work. I saw where the blockquote needed to be in between

<b:skin> </b:skin>

I then searched for a similar phrase as

.post-body

This is in the Post section of this template code.

I then changed the color and added a border. The colors are in a 6 digit hex code. You can find out more about these colors and digits here:

Color Hex Color Codes - http://www.color-hex.com/

About color-hex.com

Color-hex.com gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page. Color-hex.com also generates a simple css code for the selected color.
Html element samples are also shown below the color detail page.
Simply type the 6 digit color code in the box above and hit enter.