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/AVvXsEh1DuDtD0s9s3VyRXQmQsfbC6Qui36GoDfPRm9Z7-lbfowKFJkInejf7oUV7fnyo1Xb421U3-3X1YVP7ebn0eF8vSoDS2CrlwIM7bI2_1Y87v_XEi8lmBU5RukVFSBRvDEy0nFCOHUl3HMC/)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/AVvXsEjOcl8r2vw9ksfmnWUv68tOIV_oSrWEDDaVR400JIxGJLI6SU9lwEZAFpOJqmhefaDNpt4h7uO3fodYMdomrQZJVGCZl-TPRUJlvGs_7UPgpNLgTjJoomqnpzp0RlazUiLD-EoM0g0NACAI/)top left repeat-y;
}
.gapad {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTKmry1LOTj7DuHEQxlkn21eyE4KBY-eh9V9nB95SIrwo2pNRGwGtN0uliPLmEAL0tDJhun88METUjh0113I4sQwtMOse1Qbtk47f3dyvu_x-p7MpUDFKc3KTOu4wBrMkUg8EGA0I4qqQ/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