Quotes in Blogger - Customization

December 28, 2008

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 THEM
Default 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 1Example 2Example 3Example 4

background

background

background

background

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 1Example 2Example 3Example 4

background

background

background

background

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...
...read some more about background pictures is Blogger...

If you have some doubts/questions, just ask....

Smile!


post signature

Face It! Tell Your Tweets Digg It! Add to Delicious Stumble Upon I Reddit! Mixx it Up! Add to Your Faves

19 comments:

akbey said...

thanks for your post...

dephonk said...

cool layout!!^^

Swashata said...

Thanks a lot! This is my desing :)

http://lh5.ggpht.com/_M0X9MzkzNXE/Sc6OPYW5QfI/AAAAAAAABo0/G9MrgmBTx28/tquot.png

devin said...

thanks :D

acidH said...

wooowww it cool, and thanks it work for me

Arry said...

nice,,thanks for the tutorial..

Ron said...

Hi,

I have a customized HTML for my template and the section which has the code of quotes go like this :

body { margin: 0px; padding: 0px; font-size: small; text-align: center; color: #333333; background: #67452e; }
blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

How do I incorporate your tweaks into this to show borders in my quotes? Help! I tried it once with your example but it didn't work and Blogger notified me of a "widget" error.

pocket said...

Ron,

..change this line:

blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; }

..into this:

blockquote {
margin: 0 0 0 30px;
padding: 8px;
font-size: 88%;
line-height: 1.5em;
color: #666;
border-top: 1px solid #FF82AB;
border-left: 1px solid #FF82AB;
border-right: 2px solid #FF82AB;
border-bottom: 2px solid #FF82AB;
}

..adjust the colors for the border...

hfzkhazali said...

tq so much i love u..hit me back!

Albania said...

Thank you!

Ă„lici∂ said...

Thanks so much for the post!

Ed said...

Thankx a lot for this!

Anonymous said...

i try many times but did'nt show as u say.
why?
i dun know.

Rosidah Abidin said...

Thanks for all the wonderful tutorial. It is a great help :)

What Makes Us Right said...

have been using your info for awhile; however new templates in blogger seem to have different coding. I have been trying to change blockquotes but struggling with making changes on new templates

Anonymous said...

Thank you !!

Just One Knee said...

Thank you for this! I agree with you the default quote are plain and dull looking.

Anonymous said...

hie..

nice tutorial....i need your guide how to a 'quote with slider' ...

please refer the following
http://a2mstats.blogspot.com/2010/04/writing-equation-in-blogger-using-latex.html

and refer this title
Creating LaTeX renderer for Blogger

remarks:
i also confuse is it 'quote with slider' or 'html quote with slider'

tq and hope your kind help
nik

Anonymous said...

Louis Vuitton handbags sale and cheap replica louis vuitton handbags sale and cheap Louis Vuitton bags sale and cheap Louis Vuitton purses sale and cheap louis vuitton wallets sale and cheap lv Bags sale and cheap replica LV handbags sale and cheap cheap louis vuitton handbags sale and cheap discount louis vuitton handbags sale and cheap louis vuitton handbags on sale sale and cheap cheap louis vuitton bags sale and cheap replica louis vuitton bags sale and cheap cheap louis vuitton purses sale and cheap replica Louis Vuitton purses sale and cheap cheap louis vuitton wallets sale and cheap replica louis vuitton wallets sale

Say it...

Related Posts with Thumbnails