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,