Search This Blog

Showing posts with label Quotes in Blogger. Show all posts
Showing posts with label Quotes in Blogger. Show all posts

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/AVvXsEjKRVi309fDdrRH9D6v0pAKr591G9Xv1ZQdoFnIb7b9TUDDBisRvzCuSalz_WA3xpdON_0duq92okjv_mjELKt1q0aq18GA-sEa2KBfFiMQOl-oJ8F1AHC5qPAJBVqdgKAaB4lwkMTlSHpg/)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/AVvXsEjrqfn6nZ9EcQN8PjI2-rVgSs3w6Mm0-EIUf4ced5Cmonf2JzsBh71wr5AcTC-HlnKuejMlJ7EouMwSEvHOUwd8-thCw0EFuJLT2dnN2TUtndPe3pEcXf5maZxq_4UrQh8ECwlLcn53o2Uu/)top left repeat-y;
}
.gapad {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzzOZEbRIaoUMi097A_vT-A2ZqkWDk_Hyoka9ty67kxXzf_SUb4boJVLgM2mJv050ZNI1QwOAP_NnR5fqRSQqoPi7H6WZv7ZHg9JeTuQ6dX3UUgFzp0oqnf84eqMVjZ88iRvGg62fxPw/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