Tuesday's Tip #5

How to Customize Blockquotes in Blogger (pt 2)

In last week's Tuesday's Tip post, I shared with you how to customize your blockquotes by adding borders and background colors.

This week, let's tackle adding an image.

In my Tips for Drinking More Water post, you may have noticed I added a little bell and a question mark to my blockquotes. You might want to add something similar. Or a quotation mark, if your blockquote is actually a quotation. :)

1. The first thing you'll want to do is find the image you want to use. Or create something of your own. I'd suggest an image no more than 40px by 40px.

2. Upload the image to wherever you usually host your images. Or to a post to have Google host it for you.

Now for the coding of the blockquote.

<blockquote style="background: url('http://yourimage.png'); background-repeat: no-repeat; min-height: 45px; padding-left: 45px;">Enter your text here.</i></blockquote>

You can add a fun image like quotations marks or a bell or whatever would fit with the blockquote and your post.

3. Copy/paste this coding into the HTML tab of your post.

4. Replace http://yourimage.png with the URL of the image you uploaded earlier.

5. Depending on the size of your image, you made need to adjust the min-height and/or the padding-left.
Increase the min-height if the image you're using isn't fully showing.
Increasing the padding-left will move the text to the right, so it doesn't overlap the image. Unless you want it to, of course.
You may need to check the Preview of the post several times to get it looking just how you want it.

6. That's it. You're ready to publish. :)

NOTE: Do NOT switch back to Compose mode!

For some unknown reason that I can't figure out, Blogger moves the background-repeat: no-repeat; attribute to the beginning of the coding. When it's in front of the background: url('http://yourimage.png'); attribute, it disregards the no-repeat command and repeats your image over and over again. No bueno.

To avoid this, I'd suggest composing your entire post and adding the image to your blockquote as the final step.

I find the easiest way to do this is to write your post in Compose. Click on the Quotation Mark (3rd icon from the right) to begin the formatting of the blockquote. When your post is all finished, and you're ready to add your image, switch to HTML mode. Do a Ctrl+F for <blockquote class="tr_bq> to quickly find where your blockquote begins. Delete class="tr_bq" and replace it with the coding explained earlier.

Be sure and Publish from HTML mode.

If for some reason, you need to switch to Compose after adding your image, just be sure to Publish from HTML mode after you've moved the background-repeat: no-repeat; attribute after your image URL, so it matches the coding above.

It seems a bit complicated, but once you try it, it's really pretty simple. Give it a try! If you do, please let me know. Feel free to leave a comment with the URL to your post or share it with me on Twitter, Facebook, or G+.
Tweet