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:

Eyebright

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

Jennoelle

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.

Photographer Ruby J. Plank
This comment has been removed by the author.
Photographer 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 Ruth

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...