May 2, 2012

Adding a "Quote Box" to Your Blog

    A "Quote Box" or quoteblock is a handy add-on to your blog if you want the quotes in your posts to be highlighted. A few simple steps will be needed to accomplish this task. Below are some samples of a quote box and the steps on how to add quote boxes in your blog posts.

Samples:
    By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest.

~Confucius

    The quoteblock will automatically adjust its height depending on its contents. The width is fixed but you can easily adjust it by tweaking the width property in the code.
    This quotebox has fewer contents. See how the height changes automatically.

You can still format the text inside the quotebox, add colors, change font size, style, etc.
Red, Blue, Green...
Arial, Times, Helvetica...
Size 12, Size 14, Size 16...
Normal, Bold, Italic, Underline...

    The alignment of the quoteblock can also be adjusted by simply modifying the HTML code of the quoteblock into this <quoteblock style="float: direction"></quoteblock> wherein the direction would be either left or right.

    This quotebox is aligned right...





Steps:

1 Choose a design for your quote box from the links below.

• Baby Patches Quoteblock Designs

2 Copy the code for the design that you have chosen.

3 Go to Template >> Customize >> Advanced >> Add CSS.

4 Paste the code in the Add custom CSS Box and press Apply to blog.

5 To apply the quotebox in your post, simply click on the Quote Button.

Note: Your Template might have included a default style for your quotebox. Simply delete the code you've added to revert it to your Template's preferences. Replace the code you've added with the new code for other designs that you want to use in order to prevent conflicts.

1 comment:

  1. Doesn't work. The quote button just formats the text into an indented paragraph.

    ReplyDelete