WordPress.com Blog Bling: Decorating Your WordPress.com Blog

For USD $15, you can upgrade your WordPress.com blog for access to the CSS stylesheets to change the look of your blog.

Don’t want to spend the money? You can still glamorize your WordPress.com blog with some Blog Bling for free. I’ve got a whole collection of bling for you to choose from to decorate your WordPress.com blog to the hilt.

In this first part of WordPress.com Blog Bling, we’ll cover how to add graphics such as photographs, icons, buttons, and badges to your WordPress.com blog. In upcoming articles, we’ll cover font bling, sidebar bling, Widget bling, blockquotes, and geek bling (writing code) in your WordPress.com blogs.

For those of you with full version WordPress blogs, don’t be dismayed. You can do anything with CSS on your WordPress blog. WordPress.com blog users are very limited on what they can do with design elements. If you would like to see some great CSS designs and elements which you can incorporate into your WordPress blog, see CSS Experiments, a series I wrote on what is possible with CSS. The instructions are in each page’s source code for you to copy and experiment with and use on your own blog. I will be featuring a CSS tutorial and tips series coming soon.

Adding Visual Images to Your WordPress.com Blog

Your blog doesn’t have to be boring. You can add all types of images to your blog, from graphics you design to photographs of your adventures.

While there are a lot of free photographs you can download and use on your blog without restriction (or with credit links), it’s nice to feature your own photography or artwork in your blogs. Photographs don’t always tell the whole story, but they always add to the story you are telling.

Creating your own photographs is easy today as most people seem to have a camera in their pocket. A quick snap of the subject you are discussing can help add a strong visual aid to your story. But there are other fun things you can do with your photography to add some blog bling to your WordPress blog.

With a decent graphic program, you can create fun images and titles for your posts. Why not add a graphic to one of your post section titles or headings?

Or you can write about a specific subject with a “title” image along the side of the paragraph. Writing about a specific place or point in time? An image that represents the place or time period would add some dramatic effect to your writing. Maybe you are writing about a specific subject like flowers? A graphic image with “flowers” as the title, created from a photograph with spring flowers, would highlight that section of your post with style.

You can have some great fun and create all sorts of visual images to entertain and attract the attention of your readers.

A long time ago I had a long article about how to make keywords work for you when writing on your web page. The article was filled with lots of text and instructions, but I needed a visual image to emphasis how a search engine sifts through your published words to find the key words and phrases to add to its database to help searchers find your information. So I created the graphic you see here with a web page going through a colander and keywords coming out below. It helped make the point I wanted to make and added some visual color to the article. See what fun things like this you can create.

Graphic images tell stories, provide guidance, and help your reader understand what you are writing about. An image such as a graph or chart helps your reader compare data. A visual, step-by-step guide gets the point across quickly.

Screenshots also add helpful visual information to your posts and articles. If you are describing a problem with your web page design, why not show them how the sidebar overlaps the content column?

Most graphic programs allow you to create screen captures. Check the help files for your graphic program. Information is often found under “importing images”. Or you can use the traditional ALT + Print Screen keystroke combination on the screen you want to copy and paste the image into your graphics or photo editing program. You can edit it there and save it as a file.

Want to compare two or more images? Using photographs, can you show the before and after, or side by side comparison between the right way and the wrong way to do something.

Visual examples get your point across quickly. Photographs and screenshots are fairly easy to create, though more sophisticated images take more work and experience with graphics programs. Still, it’s a pleasure to see visual images in a text filled article.

Add Buttons, Badges, and Icons to your WordPress.com Blog

A lot of bloggers love adding buttons, badges, and icons to their blogs. This is a way to pay your respect and support for different organizations or groups by including badges on your sidebar or in your post.

Many people leave the XHTML and CSS validation icons on their blogs to prove their design meets those qualifications and passes the test. Others use WordPress buttons and badges, or choose from the various buttons to show they are proud to be blogging with WordPress.

Icons and badges can be used to represent those on your blogroll instead of just their name in the blogroll links. WordPress.com offers a variety of popular badges, icons representing feeds and popular social networking services, to help you get started adding badges to your WordPress.com blog.

I’ll cover more about how to add images to your blogroll in in the section coming soon on sidebar and blogroll bling in this series about putting blog bling on your WordPress.com blog.

Using Logos and Visual Guides

Graphics can add color and fun to your blog, but they also can be useful, highlighting what you are writing about, providing visual instructions, and even act as subject guides.

You may have noticed that I have a graphic in the right corner of many of my posts that indicate the category and subject matter of the post. These are wrapped in a link to related content, search results or the category pages of related content. This post has a “WordPress Tips” logo graphic that will direct you to more tips for using WordPress and WordPress.com.

I frequently use the question mark graphic you see to the right as an indicator to my readers that I’m asking them a question. Hopefully, between the graphic and my writing, they will be more encouraged to respond and comment on my blog.

The images you upload are not limited to only that post. You can reuse the images as many times as you want. If you are talking about Web 2.0 technology repeatedly, a logo-style graphic gives your readers a hint of the topic before they read. When you write about things in the winter, you might want to graphically adorn those posts with the same picture of trees covered with snow to indicate the season in which you wrote them.

To use the same image repeatedly, upload it via the Write Post panel, and then store the link to the image in a saved text editor file so you can copy and paste as you need it.

Using Graphics to Highlight or Break Up Content

Images can be used on your blog to highlight different sections in your posts, replace bullets, or break up content sections. There are times when you want to highlight different sections on your posts without headings or bullets. You can use a graphic images to call attention to the section.

To create a bullet effect, simply add the image to the beginning of the paragraph you want to highlight. Then add the align attribute instructs the image to float to the left or right of the page, allowing the text to wrap and flow around the image.

Here is an image link example:

---

<img src="https://lorelle.files.wordpress.com/2006/11/redball.jpg" alt="Red ball bouncing" align="right" />And the image would sit on the right and the text would flow around the image...

---

I’ll cover more ways of creating visual bullet lists in an upcoming article in this series.

To put a graphic between paragraphs, breaking up the content with a visual image, put the graphic between the paragraphs with a blank line before and after the graphic.

As your eye goes down the page, it will jump to whitespace and images which break up content, making a long article easier to read, but also giving the reader a clue that a new topic is about to begin.

I’ll have even more ways of using visual clues to highlight sections in your WordPress.com posts over the next few days.

Graphic Positions

WordPress.com blogs have the ability to position images so the text wraps around the image or the image stands alone.

To have the text wrap to the right or left of the image, use the align="right" or align="left" attribute in the image link.

To have the image sit between paragraphs without the text wrapping, preferable for wide images, place the image link between paragraphs with a blank line before and after the image without an align.

There are other kinds of alignment options you can use to position an image within your post text in addition to left and right. You can position an image to sit in the top, middle , or bottom of a line of text relative to the text line. You can also set an image to be in the absolutemiddle , absolutebottom , or texttop of a line, with the text flowing around the image. These alignments may or may not be visible with your browser as not all browser recognize middle and the absolute positioning references.

Where you place the image within your post content is up to you. Do take care not to crowd the images together or put too many on the same side so they interfere with each other and the text. Images act like building blocks and will push around content and other images if they knock against each other. Make sure you place them so there is room for them to move with the width of the content column.

As you may have noticed, graphics tend to push content around. In the above example, the graphic is taller than the lines of text, so there are extra spaces between the lines to make room for the graphics.

Objects in Motion Are Distracting: All of the images in the above example are moving. Notice how distracting they are? They are also hard to look at and it’s a challenge to read through the paragraph. Avoid using any graphics that move, shake, shimmy, or blink as it is very hard on the eye and considered very poor form.

You don’t have to place an image at the top of a paragraph. You can place it anywhere within the paragraph. Throughout this article, I’ve placed images at the top of paragraphs, in the middle of paragraphs so text wraps above the image as well as along the side, and in between paragraphs.

As a general rule, keep the image as close to the topic it represents so the writing and the image complement each other. 

Adding Graphics to Your WordPress.com Blogs

You can add any graphic image to your WordPress.com blog through the Write Post > Upload Image panel.

To upload one or more images into your Write Post > Upload Image panel:

1. Click Upload
2. Click Browse and select the image file and click Open
3. Type in the title of the image, describing the image
4. Click Upload
5. On the thumbnail of the image that appears after reloading, right click and select Copy link location or Copy target link
6. Switch to a text editor program (not word processor) and paste the link
7. Click Upload in the Write Post panel again, and return to step one.
8. When you have uploaded all your images, DO NOT SAVE THE POST
9. Just click Blogroll or any other tab in the Administration Panels and leave the screen. If asked if you really want to leave and not save the post, click YES.

Use these image file links you posted in the text editor to decorate your blog. Remember to save the text file with a memorable name in a place where you will remember where it is for easy access.

Image Issues and Warnings Take care when adding any graphics to your WordPress blog. There are two things you need to monitor closely: image width and image size. Sometimes the graphic image you want to add is wider than your WordPress Theme column width. The WordPress Image panel allows you to add images as full-size or thumbnails, which when clicked, will open up to a larger view. To add a large image as a thumbnail, choose the appropriate options on the Edit Image panel and send that to the editor (your post draft box). It will automatically wrap the image in a link to the larger image. Image Width: The image needs to be no wider than the narrowest width of your WordPress Theme post area. On average, most fixed-width WordPress Themes feature between 550 and 600 pixel widths. If your image is 800 pixels wide, it can break your WordPress Theme’s look. It’s a good policy to keep your image widths down below 450px or smaller. At 400 pixels, that often leaves a very narrow margin for the text to wrap around. In these cases, consider not wrapping the text around the image and just letting it sit there between paragraphs. Remove the align instructions and place the image link between paragraphs. Image File Size: The size of the file is important as it impacts the time it takes for the image to load on your page when viewed. For people using high speed bandwidths, it usually isn’t so important, but the majority of Internet users are still using speeds less than optimal for large size files. Image file size is dependent upon the size of the image on the web page, the number of colors used to display the image, the file type it was saved as, and other factors. Because all these things work together to control file size, to reduce the file size, you have several options found in most graphic editors: Make the image smaller. Even a few millimeters reduction in size can reduce file size. Save the image in another format. Not all image formats work for all types of images, but non-photographic images can be reduced if saved as PNG or GIF files rather than JPG. Reduce the number of colors in the image. Non-photographic images don’t need 16 million colors. Reduce it to 256 and see the size drop, too. In general, keep file sizes near 30K unless they are richly colored photographs. Those work best at 60K, give or take depending upon the size of the image. If your blog is solely dedicated to photography or graphics, then larger file sizes are tolerated and acceptable. Remember, WordPress.com blogs have a limited amount of file storage space. The Image Upload panel shows you how much you’ve used and have left. The smaller the file sizes, the more images you have room for. Though, if you need more space, you can add storage space for a reasonable fee.

Stay tuned for more on putting blog bling on your WordPress.com blogs!

Related Articles

• What Do I Do With My New WordPress.com Blog
• Stop Content Theft Buttons and Badges
• Free Photos for Your Blog
• Buttons, Bows and Badges for Your Blog
• Give the Gift of Love to WordPress
• Designing a Rainbow – Sexy Hot Colors
• More Website Design Mistakes
• HTML, CSS, PHP, and More Cheat Sheets
• WordPress Design Details
• Customizing wordpress.com Default Theme Headers
• WOW! Image Browsing and Uploading Feature on wordpress.com
• Designing Themes for WordPressMU – Fill In All The Details
• Playing with WordPress.com New Sidebar Widgets
• The Battle Between Image Width and Column Width
• One Year Anniversary Review: Web Design
• One Year Anniversary Review: Designing WordPress Themes
• Free Photos for Your Blog

---

Site Search Tags: blog bling, wordpressdotcom, wordpress.com, wordpress.com tips, wordpresscom, decorate your blog, blog design, blog design elements, wordpress blogs, wordpress themes, wordpress theme design, post design, post design elements, writing posts, blog writing, writing tips, post graphics, free photos, graphics, images, blog graphics, blog images, blog design, design elements, writing blogs, pretty blogs
Copyright Lorelle VanFossen, member of the 9Rules Network