Thursday, September 16, 2010

How to Customize Quotes in Blogger

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

SO, WHAT CAN WE DO?
Well, a lot! First, let's see what part of the code (CSS style)..
.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)... and Replace by the Code Below
}
.post-body blockquote {
line-height: 1.3em;
}
.comment-link {
margin-left: .6em;
}
.post img {
padding: 10px;
}
.post blockquote {
background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUWs4JpzulvAHKLLucQqqow6qPyokAVVnV9KU9hwuDi1sON-E-BFrpH33xABHM0IqgLHcYlSMmvjRcMeVg1GMzEPaPysfYUTkJvjpBxHyPBo1ZOKzDsl6FxWx1Fc9TEMfvW7QD6eaAsCr/)top left repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.post blockquote:hover {
background: #F2F1F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblUK4oisU1FTT9TYw8G7hIoBqFPzyTee117fs91tr_ByJOtug69v-_ppms_Xwud_rzEPyWseF1FUUdZRXeTwFLVZbveXCY0Bf5xIj1-Vr3PLjrTfOoHSpFFQDmjzCaPGIRR2ZOGObIQna/)top left repeat-y;
}
.gapad {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnt3ejfxanIe71pOlu0yo5ocq_o-2DkxuFCZPO1JmwICYqgN-h22h3prnI6_hPZGPJBpe1LPu9S5WqaKOk70VTc0WRx303f-_sUHPxR1ht3xMIp7ZWLoeXonvhqqaljKNsB0C-DcNJELY/s1600/homepagetop2.gif) top no-repeat;
float: left;
width: 590px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
Your Done Save Now..
remember to change the URL address of the pic with your own , you have lots of options here....be creative... trial and error