A blockquote is an element which defines a block quotation within the text. They should essentially be used to show the quotations of another person which is related to your post content. Generally they are used to signify important text by drawing the viewer's eye to a separate block of text.
To give it's technical definition a blockquote is a large quote in a document is usually inserted as a separate segment of text, called a blockquote, rather than given inline with quotation marks around it. A blockquote is left-indented with respect to the enclosing text and has whitespace before and after it.
In the standard (Minima) blogger template a blockquote is defined by the following CSS code :
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
This just separates them from the main text by giving a margin and does not further beautify them. We can make them better by adding quotation marks, borders, backgrounds, transparent effects etc. To make it look better modify the above code as below :
.post blockquote {
background:url(http://ezeeblog.googlepages.com/blockquote.gif) no-repeat;
padding:40px;
margin:1em 20px;
background-position:10px 10px;
border:2px #000000 solid;
text-align: justify;
}
.post blockquote p {
margin:.75em 0;
}
Use Preview to see the effect. Save Template. I have placed the above code in a blockquote to show the effect. To add the second closing quote (in black) use this code in addition to the one above :
.post blockquote p {
margin:.75em 0;
background:url(LINK_OF_CLOSE_QUOTE_IMAGE) no-repeat;
background-position:bottom right;
}
Replace the CAPS with the link of your image of the closed quote. When creating the post don't forget to enclose the blockquote between <p> and </p> tags in Edit Html tab of post editor.You can modify the code further to suit your blog. For example you can change the border color by changing this line :
border:2px #000000 solid;
Change the number '000000' to hex number of another color. You can get the hex numbers of colors here.
21 comments:
Great Blog! Very Helpful. Visit me at www.sportsstorm.blogspot.com and tell me what you think!
Great! But is there a way to also put an end quote? I tried many things but was unsuccessful. I'm at http://random29.com
Thanks,
alex
Amh,
For that you have to add another container within the first. Then add the background picture of the endquote to it.
Do you have the picure ready? If so upload it to a freehost and copy it's link.
I have already made both images and uploaded them at:
http://alexmora29.googlepages.com/quote1-1.png
http://alexmora29.googlepages.com/quote1-2.png
But what do you mean add a new container? Can you please explain? Because I have been trying to do several different things with the code but I somehow end up getting it wrong.
Most of the time I end up with the end quote appearing in a particular place but the beginning one disappearing. I also fear that I will magically be able to get both to appear but the closing quote wont be at the correct location and may end up on top of the text.
Thank you,
alex
amh,
In your template put this code in addition to the code in the above post :
.post blockquote p {
margin:.75em 0;
background:url(http://alexmora29.googlepages.com/quote1-2.png) no-repeat;
background-position:bottom right;
}
Save Template. When making the blockquote in your post enclose it between <p> and </p> tags.
See the example in the post above. The open quote is mine the closing quote is yours.
Enjoy!
Great Vin!
Thank you very much, it worked! Now I have two quotes but it jarred with the blockquote formating. The text now looks like it's almost double spaced.
See the comparison, first without the end quote and then with the end quote:
http://alexmora29.googlepages.com/noquote.png
http://alexmora29.googlepages.com/withquote.png
And this is how I've put it in the code (in the post and in the html respectively):
http://alexmora29.googlepages.com/codeinpost.png
http://alexmora29.googlepages.com/codeinhtml.png
Any ideas?
And I love that you used my end quote for your site! I feel like I did a microscopic contribution, but a contribution none the less!
Thank you,
alex
amh,
Specify line spacing for the paragraph in the doublequote to decrease it. Thanks for the end quote image. :-)
Vin,
You are very welcomed to use both images! You have been more than helpful.
Now, I am not too HTML savvy, how do i "Specify line spacing for the paragraph in the doublequote to decrease it"?
I looked in the post composer and didn't see anywhere to do that. This change in line space seems to be happening on its own and I don't know how to alter it.
Thanks,
alex
amh,
Add it in the CSS code like this :
.post blockquote p {
margin:.75em 0;
background:url(LINK_OF_CLOSE_QUOTE_IMAGE) no-repeat;
background-position:bottom right;
line-height: 1.4 !important;
}
Add the line-height code line and use Preview to adjust the number.
Vin,
That did solve my line height problem. Now I have a new challenge for you. I hope I'm not bothering with too many questions, am I? Well, here it is.
Now I have the two quote images appearing, but the end quote appears on top of the text and also the gap between the regular paragraph and the blockquote is too great. I have examples of what I get and what I want to achieve.
http://alexmora29.googlepages.com/Get.png
http://alexmora29.googlepages.com/Want.png
I tried many things but couldn't get it to work properly. I even tried cheating the image, giving it a long empty space above it - in the actual image worked in photoshop, but that didn't work. The program seems to align the bottom of the image and not the top so it kept it at the same position.
If you need to, you can check my code at:
http://random29.com/2008/03/bennett-robot-works.html
Thanks again...
alex
amh,
Give the blockquote a border line as in the code in my post above. Then you know exactly where it begins and the surrounding text ends.
After that increase number in the padding line to push the inside text away from the borders.
To separate it more from the surrounding text increase the number in the margin line.
After it is adjusted delete the border line.
Vin,
No that doesn't work. Changing the padding changes it all around, top, bottom and sides. I want only the gap on top and bottom to change. And you said:
"To separate it more from the surrounding text increase the number in the margin line."
Which is the opposite of what I want to do. If you see my images, you'll see that the space between paragraph and blockquote is far greater than what I want it to be.
http://alexmora29.googlepages.com/Get.png
http://alexmora29.googlepages.com/Want.png
There might not be a solution to what I want to do, but if you have one I'd love to get it.
Thanks,
alex
amh,
You can also use :
padding-top:10px;
padding-bottom:10px;
Same with margin. You can also email me since this post is getting a bit long : drbhatns at gmail dot com.
Oops, ignore my previous question, I already understand
hi,
my problem is the following:
i added the code, as you told us to do, in my html. but in my quote there is no closing comment image although i used the code like you told us at the top of the page.
here is my code:
.post blockquote {
background:url(http://lh4.ggpht.com/supersoft01/SHCxmuwhdBI/AAAAAAAAAE4/XkoQ0-4RoNQ/blogquotetopleft.jpg) no-repeat;
padding:40px;
margin:1em 20px;
background-position:10px 10px;
border:2px #cccccc solid;
text-align: justify;
}
.post blockquote p {
margin:.75em 0;
background:url(http://lh6.ggpht.com/supersoft01/SHCx5Hu9WYI/AAAAAAAAAFE/EDEHu06EBq4/blogquotebottomright.jpg) no-repeat;
background-position:bottom right;
}
what did i wrong?
heres my blog: www.superdiablo3.blogspot.com
thank you so far and sorry for any mistakes, i'm german ;)
Supersoft,
Upload images to Googlepages and use the link from there.
Hi Vin, I tried it & the "open quote" works perfect but the "close quote" is missing.
I used this for the "close quote":
.post blockquote p {
margin:.75em 0;
background:url(http://alexmora29.googlepages.com/quote1-2.png) no-repeat;
background-position:bottom right;
}
What should I do now to add the "close quote"?
Thanks.
Mr Fun Galaxy,
Enclose your blockquote in <p> BLOCKQUOTE </p> tags
Hi Vin, I got it. But the end quote position "bottom right" is behind the text at bottom right, how to change the position of end quote to be lower & more to the right?
See my post for the problem: http://myfz.blogspot.com/2008/10/delano-tower-new-icon-of-paris-after.html
Thanks.
My Fun Galaxy ,
Use the background-position parameter as shown in the code for the opening quote image. Experiment by changing '10' :
background-position:10px 10px;
Save template and clear cache before viewing.
Hi Vin, got it. Thanks.
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.