First of all, the box around this text is a block quote.
The way to accomplish a block quote is by highlighting the text you want in the box and then clicking the “Quote” button on your blogger tool bar. It looks like this:
To give your block quotes some style you will need to adjust some coding in your template. However, as with any blog changes, be sure to save a copy of your current template before making any changes just in case something gets messed up.
1. Log into Blogger.
2. Click on “layout.”
3. Click on “edit html.”
4. Add this after your “.post” line of code:
blockquote {
background:#F6DCB3;
border: 3px solid #000000;
color: #000000;
font-family: “Trebuchet MS”, Trebuchet, Verdana, Arial;
font-size: 16px;
padding: 10px;
font-size: 16px;
padding: 10px;
}
5. Change the colors to whatever color your heart desires.
6. On the “border” line. Decide whether you would like a solid, dashed, dotted, double, groove,inset, outset, or ridge style line. Experiment to fine one you like.
7. Also on the “border” line, decide how thick you would like the line to be by changing the pixels.
8. Save!
Defined:
- blockquote { - this line signifies the beginning of the code that forms the blockquote
- background:#F6DCB3; - this line signifies the color that will be in the background of the blockquote. You can find html color codes here: Color Chart
- border: 3px solid #000000; – This line of code defines your borders. First you define the width of the border, then the type of edge (solid, dotted, double, etc), and then the color of the border. You can make the border appear on only one edge of the blockquote by changing the code like this: border-top: 3px solid #000000; That would allow the border to only be on the top. If you want it on top and bottom simply put these codes back to back: border-top: 3px solid #000000; border-bottom: 3px solid #000000; You can do the same thing for “left” or “right”.
- color: #000000; -This is where you specify the color of the font/text.
- font-family: “Trebuchet MS”, Trebuchet, Verdana, Arial; – This is the line of code where you specify the font style. You can specify whatever font you want but if the person reading your blog doesn’t have it on their computer then they will not see it. It will instead revert to another font listed in this line. That is why it is important to list several font styles. The ones listed here are very common and standard on most all personal computers.
- font-size: 16px; - This is where you list the size of the font within the blockquote.
- padding: 10px; - This is where you list how much padding or cushion you want on the edges of your blockquote. Experiment to find what you like!
