Blog Embelishments: Sidebar Images

If you blog on wordpress.com, you may have noticed the handy dandy things called widgets that you use to spice up your blog – usually off to one side or underneath the posts.  WordPress offers a lot of really cool widgets that, with a little tweaking, can be used to make what look like custom layouts.

To access your widgets you go to your blog dashboard and on the left side you’ll find the widget menu under Appearance.  From there it’s a simple job to drag and drop the widgets of choice from the main “pool” in the middle to the neatly labeled areas on the right (sidebar, footer, etc.).

An easy way to make your blog look customized is with headers. Here’s what I’m talking about:


You might notice at the top where it says “Get your work featured” in sort of gray letters? That’s using the default heading in the widget menu box like so:

It looks good enough (though with my wallpaper it can be a bit hard to read), but isn’t the banner above “My books” cooler?

**NOTE: If you want to add just a single image,  even one that is clickable, or one with a caption, then the image widget is the better choice because it has the option to center – which the text widget won’t allow. **

The first thing you’ll need to do is make your images. They are banner makers all over, plenty of free programs, lots of clip art and other resources out there (some of which I’ve listed in the free & cheap resources post), so I’m not going to get into that.  Once you have your images, the next thing you need to do is upload them. You can upload them straight to your wordpress blog by looking to the left of your dashboard for Media and then Add New.

Once your images are uploaded you will need their urls – you can get them by going to the library and clicking the individual images. This opens a new page and the url is towards the bottom in a gray box:

The best thing to do is copy them all and paste the links into a word or notepad file.

When you’re done, go to your widgets. Now, you can actually use the image widget over the top of a custom menu widget, but wordpress puts a bigger gap between those items, so it looks more like this:

than the above example.

Drag a text widget onto your work area . It should make it “big” – aka so you can see a blank text box, but if not then click the little arrow to make it do so. In the text box put:

 <img src="URL">

Paste the url you copied in where it says URL and do not put a title in!

If you want to use it as a heading over a list of custom links you can, as I said, throw a custom menu widget under it, or you can add

<br><br>

and then:

 <a herf="LINK">This is the text that shows up!</a><br>

that will show one link. You will need to use that line for each link, like so:

The red is my image header. The blue is my image code that creates the little round bullets next to each menu item , and the black is the html code that gives you the actual link.  In other words that little widget looks like this when you see it on my blog:

of note – the blue links are a part of my theme, nothing that I did!

(another site I’ve used this trick on is at http://terribleturtles.com/ – just to give you an idea of how it can work)

Of course, if you do a lot of this, you will end up with a stack of widgets all named “text”.

Remember, the most important part of customizing your blog is having fun!  So, go get creative!

P.S. To get html code to show up in your blog like I’ve done here use:

[  code  ]  and [  /code  ]  without the spaces

5 Comments

  1. Rose Gordon says:

    You are very talented, Joleene. I can’t even get the book covers to show up correctly in my forum signatures half the time–even when using the “Link-Maker” I still run into trouble.

    1. Thanks! in the forums you can use code – though it is a different kind. not sure if I can get it to show up in here… let me try it 🙂

      [img]http://www.website.com/path/to/thumbnail.jpg[/img]

      and to make it clickable:

      [url=http://www.website.com/path/to/fullsize.jpg][img]http://www.website.com/path/to/thumbnail.jpg[/img][/url]

      (in case this doesn’t show up, the code is from http://www.dpchallenge.com/tutorial.php?TUTORIAL_ID=17 under “posting a clickable thumbnail” 🙂

Comments are closed.