How to Spice up your Quote Text

Pin It

So when I started writing this blog, I wanted to be able to use the "Quote" function that blogger has built in to create a stand out effect for my code that I would show to everyone.  To use the quote in blogger, all you have to do is highlight a section of text and click on the little " that appears in your editing tools. 

How to Change the Code for your Quoted Text

First, open up your design tab, click on "Edit HTML" and then check that oh-so familiar "Expand Widget Templates Box"

Using "CTRL + F", Search for Content or body.

You will find the body section, which looks something like this:

Scan through this section quick, because if you are using a premade template, some designers account for this section.  My template did not, so I had to insert the code myself.    Here is the code that I am using:

blockquote {
margin:1em 15px;
background: #B7CEEC;
padding: 8px 8px 8px 8px;
font-style: regular;
}

Now, if you notice, there are several things that you can easily change.

First, you could change the margin, which would increase or decrease the amount of blank space that surrounds your quoted text.

Second, you can change the color of the background behind the quoted text.  Check out this website which contains a lot of codes plus previews for different colors so you don't have to go searching.  HTML Color Codes

Third, you can change the padding, which is how much border of the background color is around your quote, and also affects the alignment of your quoted text.

Fourth, and last, you can change the style of your text.  Try using "italic" or "bold" for a bigger effect on your quoted text.

Change the text however you see fit and insert it in that "Content" section that we located previously.  BAM!  You have a nice little effect on your quoted text!