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/AVvXsEjykIk5NDN8ZtLpmLjFp4-ULEyOyEvEGKG_hj4S2P-E_HDbd54ZjYdp23b5piWsZDrDEU7acOZ3abm3luicKTpE_qQrIQShIrselEdTjhr9WTOlIgRyoFvThMo7orBsKXc6qYi9mBUrcwkc/)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/AVvXsEiP31HHO_1NM-UQw5jXeuA-598CYXMsrryF-fYUB4NjZgU5zBtMxpBPBhyphenhyphenUL-GnhOKwjwG8H1w-yL7LzHOucst2MhIxSsUWauovI9QNTFXjnXb-z1yGei4EkWOrH-VeArmmb7I1Xtfy1vkk/)top left repeat-y;
}
.gapad {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGunnzf50uciBpVo9-qOias8sGjZpaCr9Xh1uAMr3UyW_x2j1IkvixDsEzu4GuifnutpRMewvIaaE84wxDQzx53Jwyw4BKob47BIWxlvHvPxjMyuLr8flivKYKusMR8iDXGJ7AtixgYm0/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

Got Something to Add?
0 comments: Post a Comment

Older Post