Skip navigation

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

For USD $15, you can upgrade your 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 , 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.

Using photographs in WordPress postsWhile 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.

Adding photographs to headings in WordPress

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?

Graphic Text turned into titles from photographs add dramatic images to your blogOr 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.

Keyword filter - graphicYou 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.

Example of a screenshot showing the sidebar overlapping the content.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 Example of photographs showing before and after photographsscreen 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.

Example of web design validation badgesMany 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 WordPress.comvariety 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

Web Page Under Construction imageGraphics 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

Using graphics as bullets on your WordPress blogImages 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="http://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.

Example of a graphic separating content sections

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.

Example of a bar line graphic separating content sections

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.

align left - planet earthalign right - planet earthTo 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.

align-top - planet earthThere 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 align=middle - planet earth, or bottom align-bottom - planet earth of a line of text relative to the text line. You can also set an image to be in the absolutemiddle align-absolutemiddle - planet earth, absolutebottom align-absolutebottom - planet earth, or texttop align-texttop - planet earth 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


Site Search Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

14 Comments

  1. Posted January 29, 2007 at 3:41 am | Permalink

    Hi Lorelle, thank you for this post. I recently upgraded one of my blogs to the 2.1 version of wordpress.

    On the rich text editor, the upload file section below the editor no longer exists, and is replaced with “This feature requires iframe support”

    I use 1and1.com hosting, and as far as I can tell their versions should be compatible.. mysql version is 4.0.27; and php version is 5+…

    So, I’m not able to upload my pictures as usual. This is only happening with my upgraded blog, my other blogs are just fine and are using the same hosting account.

  2. Posted January 29, 2007 at 5:07 am | Permalink

    Excellent content here. It’s like a goldmine. I’ll have to borrow some of these ideas.

  3. Posted January 29, 2007 at 6:13 am | Permalink

    Nicholas: This is a question best asked on the WordPress Support Forums. Make sure your browser has iframe capability and that javascript is turned on in your browser. The issue seems more a problem with your browser than your site.

  4. Posted January 29, 2007 at 7:51 am | Permalink

    re: image width

    If you’re running Firefox and using a fixed width fonts, I have a Greasemonkey script that you can configure to warn you if your image is too big for your theme.

    http://engtech.wordpress.com/tools/wordpress/findwideimages/

  5. adisong
    Posted May 2, 2008 at 6:20 pm | Permalink

    hey dude thnx for the site and the link to paste it. itll work out great!

  6. Posted July 24, 2008 at 12:32 pm | Permalink

    I’ve been getting more invloved in the underpinnings of Modicus/Wordpress. You have some great information.

    Thanks!

  7. erstellen
    Posted April 7, 2010 at 7:32 am | Permalink

    I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

  8. Posty
    Posted April 18, 2010 at 7:54 am | Permalink

    I am having trouble with centering an image and getting it to stay there. it seems to bounce around where it wants. I’m gonna look around and find some tips here. Thanks btw.

    • Posted May 3, 2010 at 10:11 pm | Permalink

      Centering an image is tough, but the new WordPress styles for aligncenter usually fix it. Check your WordPress Theme to see if it has been updated accordingly, if you did not create it. If you did, then check with the stylesheets in the Themes that come with the latest version of WordPress and copy the align styles to your Theme’s stylesheet.

    • Posted May 7, 2010 at 2:11 pm | Permalink

      Once it is set for the alignments (alignleft, alignright, aligncenter) in WordPress (or whatever alignment CSS styles you wish to use), then it should move around. It will stay in one place and the text will flow around.

  9. Posted August 7, 2010 at 10:56 am | Permalink

    this is great…
    a lot of information…
    im a newbie…thanks….

  10. Posted August 31, 2010 at 7:36 am | Permalink

    Great blog, I’ve been considering adding a blog to my website, but I don’t really want it to look like a different site. I need to understand how to amend the existing wordpress template to make it look more like my own. Is this possible to do (www.prestigeconservatoryblinds.co.uk)?

    I started reading a blog about changing the header and it all threw me a bit.

    Andy

  11. Posted February 9, 2012 at 2:54 pm | Permalink

    Hi! I am trying to add my signature with little luck. I lost you between #5 and #6. On #5 “copy link address” came up, instead of ‘copy link location’. Also, what and where is (#6)text editor. I’m sorry, but I am NOT techy, but am really trying! I thought to just save my name in my media library and just include it each time, but there is a thin line grey box around my name that looks dumb.
    I would really appreciate your help! I just discovered your blog today and followed it. Thanks for your help!

    • Posted February 10, 2012 at 3:36 pm | Permalink

      Honestly, I wouldn’t bother adding a signature. In a year, you will thank me.

      But if you insist, every web browser has a different way of saying the same thing about copying a link. It’s all the same thing different words.

      A simple search for text editors will turn up huge lists but I recommend NoteTab Pro for Windows users.

      I don’t know what you mean by “save your name” in the Media Library. I assume you mean a graphic representation of your signature (NOT the real thing). All graphics on some Themes have borders around them. If you do not have the ability to customize your WordPress Theme CSS on WordPress.com, the border will be there.

      Again, I really recommend you don’t do this as it is a pain and slows down your blogging. I’ve been doing it since 2006 and regret it daily, multiple times a day.


20 Trackbacks/Pingbacks

  1. Lorelle is a FABULOUS Geeky Woman

    I love geeks! And, I have a real affinity for geeky women. As any of you WordPress die hards know, Lorelle is *the place to go* if you want bite-sized WordPress snacks. Plus, she’s a lot of fun.

    Check this from Lorelle’s blog entry today…

  2. [...] WordPress.com Blog Bling: Decorating Your WordPress.com Blog [...]

  3. [...] WordPress.com Blog Bling: Decorating Your WordPress.com Blog [...]

  4. [...] the uncategorized category and give them a category of their own. I showed him how to make a link, add a picture, and some very simple basics. He even had to learn where and how to leave a comment, copying his [...]

  5. [...] WordPress.com Blog Bling: Decorating Your WordPress.com Blog with photographs, graphics, and more [...]

  6. [...] There is lots of information about why and how to include images in your posts and a great place to start reading is Lorelle on WordPress [...]

  7. [...] WordPress.com Blog Bling: Decorating Your WordPress.com Blog [...]

  8. […] WordPress.com Blog Bling: Decorating Your WordPress.com Blog […]

  9. […] WordPress.com Blog Bling: Decorating Your WordPress.com Blog with photographs, graphics, and more […]

  10. […] WordPress.com Blog Bling: Decorating Your WordPress.com Blog with photographs, graphics, and more […]

  11. […] WordPress.com Blog Bling: Decorating Your WordPress.com Blog with photographs, graphics, and more […]

  12. […] blog bling bling, we’ve covered a lot, haven’t we? I’ve shown you how to add graphics and photographs and video, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, […]

  13. […] covered adding blog bling to your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links. Now it’s time to add some blog […]

  14. […] far, the WordPress.com Blog Bling series has covered adding graphic images, lines and smilies, social bookmarking links, and font bling. The techniques covered in this […]

  15. […] far on this series on WordPress.com Blog Bling, I’ve covered how to using images, logos, and badges to decorate your WordPress.com blog, how to add horizontal and vertical lines and smilies, and Social Bookmarking Submit Links on […]

  16. […] part one of the WordPress.com Blog Bling series, we covered how to add graphic images to your WordPress.com blog. In this section, we’re […]

  17. […] WordPress.com Blog Bling: Decorating Your WordPress.com Blog with photographs, graphics, and more […]

  18. […] WordPress.com Blog Bling: Decorating Your WordPress.com Blog […]

  19. […] WordPress.com Blog Bling: Decorating Your WordPress.com Blog […]

  20. […] spent the last week covering how to blog bling your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,684 other followers

%d bloggers like this: