FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

31 May 2011

Tuesday's Tips -Block Quotes

Today we're going to have fun by customizing block quotes.  This is one of my favorite parts in a blog design--really. =D I was so excited when I first learned this stuff. I'll include two different ways to do this. The easier way, is just as it sounds--easier. You can only create one design, but it is simpler to use in a post. The harder way lets you create as many different designs as you like, but it is slightly harder to insert into a post.

A blockquote is used to make a section of text stand out from the rest of the text. It is used for quotes, verses, and anything you want to stand out to your readers.

The Easy Way --you only create one design, but it is simpler to use in a post

1}
customizing the blockquote

Go to your dashboard > design > edit HTML.
Search for this bit of code:
.post-body blockquote {
This appears twice. When you change the code you need to make sure you change both.

For example, the blockquote that I used above uses the code:
.post-body blockquote {
background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:fixed;
border:2px solid #d4d4d4;
padding:15px;
margin-left:0px;
margin-right:0px;
color:#858922;
font-size:110%;
text-transform: none;
}
[Here are more examples of blockquote codes]

2}
adding the blockquote

Simply use the blogger blockquote button on the post editor toolbar.
Or use the <blockquote></blockquote> HTML codes.

The Harder Way --you create as many different designs as you like, but it is slightly harder to insert into a post

1}
customizing the blockquote

Go to your dashboard > design > edit HTML.
Search for this bit of code:
.post-body blockquote {
This appears twice. You need to look for the second one.
Right after that paste a piece code similar to this:
.blockquote-3 {
background-image:url(http://i.imgur.com/DUj7n.jpg);
background-position: 0% 0%;
background-attachment:fixed;
border:2px solid #d4d4d4;
padding:15px;
margin-left:0px;
margin-right:0px;
font-size:110%;
text-transform: none;
}
[Here are more examples of blockquote codes]
Be creative and you can add as many as you want, just make sure that each name is different.

2}
adding the blockquote

When you create your post you need to go to the 'edit html' format.
The code for the blockquote would be something like this:
<div class="NAME">CONTENT</div>
For example, the coding for the blockquote at the top of this post is:
<div class="blockquote-3">
A blockquote is used to make a section of text stand out from the rest of the text. It is used for quotes, verses, and anything you want to stand out to your readers.</div>

Have fun creating and designing your blockquotes! Let me know if you have any questions, and I'll get back to you asap.

Love in Christ,

8 comments:

Classic Kniterature

Great tutorial! I haven't tried it yet, but when I want to I know where to come. :)

Jenn Noelle

You are officially spectacular. Even though your "Tuesday's Tips" are just on the little things, they are SO.incredibly.helpful! So anyway, thank you oh so much and just know that I think you're amazing. =)

~Jenn

Brooke

I love, love, love your Tuesday's Tips! :)

Emily Grace

Thanks so much for your encouraging comments, girls! =D I'm so glad that you're finding Tuesday's Tips useful.

Ruby J. Plank
This comment has been removed by the author.
Ruby J. Plank

Emily, scince I couldn't find the body blockquote thing im my HTML, I want to the post section of the HTML and added the code I wanted 2 times and it worked!

Emily Boyd

I have searched for the .post-body blockquote bit of HTML, but I cannot find it!

Emily Grace

Emily Ruth - Make sure you're using the Minima template. If you can't use that template for whatever reason, I suggest using the second method.

Post a Comment

Leave your thought...