We're going to learn how to customize the quotes in Blogger. By customize, I mean changing the looks of it, giving it some color, borders, background.....changing size of it, font, style...
WHAT ARE QUOTES?Quotes are used for quoting. Heh. Quoting defines:
► repeating or copying the words of another, usually with acknowledgment of the source
► citing or referring for illustration or proof
► repeating a brief passage or excerpt
DEFAULT QUOTES IN BLOGGER AND HOW TO USE THEMDefault quotes ain't much of a fun. Really. They are rather dull. And blank.
When you're composing the Post, and want to make a quotation, you will:
► highlight the part of the text that will be a quote
► and click on the
quote button in the Blogger toolbar
This will change highlighted part into a quote, with a default design, and that is:
It just added some margins to it....not fun at all. I told you so.
SO, WHAT CAN WE DO?Well, a lot! First, let's see what part of the code (CSS style) we have to play with....
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
...that's the one! You can find it easily going to LAYOUT ► EDIT HTML ► and scroll until you find it (use CTRL + F to make it easier)...
...yours may be a bit different (if you have customized template), but it will be something like that...
I'll show you a few examples, and in each one, you will have to
DELETE the code from above, and
REPLACE it with the one from example.
◄
Borders, font styles and colors ►
Example 1 | Example 2 | Example 3 | Example 4 |
---|
|
|
|
|
Example 1.
.post blockquote {
border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB;
border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
background: #ffffff;
margin: 6px 20px 6px 20px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}
Example 2.
.post blockquote {
border:1px dashed #DC143C;
background: #EEE0E5;
margin: 6px 10px 6px 10px;
padding: 8px 8px 8px 8px;
font-size: 1em;
font-style:italic;
line-height:1.4em;
}
Example 3.
.post blockquote {
color:#EE9A00;
border:5px dotted #000000;
background: #ffffff;
margin: 6px 6px 6px 6px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}
Example 4.
.post blockquote {
color:#00CED1;
border-top: 2px solid #000000;
border-left: 2px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
background: #ffffff;
margin: 6px 0px 6px 0px;
padding: 8px 8px 8px 8px;
font-size: 1em;
line-height:1.4em;
}
...these are just examples, so you can see what variables you can adjust....
...change the colors (hex values)...
change border styles...
...font size, font style (
italic), font color (
color)...
...margins (the space between box and the post content)...
...padding (space between quote text and the borders)...
◄
Picture in the quotes ►
Example 1 | Example 2 | Example 3 | Example 4 |
---|
|
|
|
|
Example 1.
.post blockquote {
color:#666666;
background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);
background-position:top left;
background-repeat:no-repeat;
margin: 6px 6px 6px 6px;
padding: 8px 0px 8px 74px;
font-size: 14px;
font-style:italic;
line-height:1.4em;
}
Example 2.
.post blockquote {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
font-size: 0.9em;
}
Example 3.
.post blockquote {
background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);
background-repeat:no-repeat;
background-position:top center;
margin: 6px 6px 6px 6px;
padding: 8px 36px 8px 40px;
font-size: 14px;
line-height:1.4em;
}
Example 4.
.post blockquote {
color:#000000;
background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);
margin: 6px 6px 6px 6px;
padding: 8px 6px 8px 6px;
font-size: 14px;
line-height:1.4em;
}
...remember to change the
URL address of the pic with your own...
...you have lots of options here....be creative...change....
...trial and error...
If you have some doubts/questions, just ask....
Smile!