Skip navigation

WordPress.com Blog Bling: Blogroll and Sidebar Bling

I’ve 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 bling to your WordPress.com blogroll and sidebar.

The sidebar area of your blog is typically the canvas for the most blog bling. Sidebar blog bling includes blogroll links as images, logos, photographs, text quote or statements, badges, and buttons. The list is nearly endless of all the bling you can add to your sidebar. The trick is to know how.

Adding Images to Your Blogroll Links

Images for your links blogroll come from two sources: on-site and off-site. On-site images are ones you host on your own WordPress blog. To learn about how to add images, see Adding Images to Your WordPress.com Blog.

Social bookmarking links on the sidebar blogroll on WordPressOff-site images are stored on other blogs or websites. Linking to images stored off your blog is called hotlinking. It uses the bandwidth of another site to feature images on yours, which is very bad manners.

While it is not acceptable to link to images located off your blog, blogroll links and icons seem to be the exception. Blogroll links are often a miniature logo or picture representing the blog. If you link to their blogroll image and they update or change it, it will automatically change on your blog without you doing a thing.

Whether the blogroll image is on your site or off, get the location (URL) of the image for the next step: Adding the image to your blogroll links.

To add images to your Blogroll:

  1. On the WordPress Administration Panel tabs, click Blogroll.
  2. Click either edit a link or add link.
  3. Add the link and title for the link in the Edit Link form.
  4. On the Edit Link panel, click the Advanced + sign on the section to open it.
  5. In the form textarea labeled Image Address, paste in the link address to the image.
  6. Click Save Changes when ready.

WordPress Blogroll Edit Link Image panel

Typically, blogroll images are small, typically 80×15 pixels at most and rarely more than 10K in size. If you create your own images, you can match them to your sidebar width and WordPress Theme. Icons in the sidebar blogrollIf they are too wide, it will mess up the look and placement of your sidebar.

You can add any image to your blogroll links as long as it conforms to the size restrictions. Under my main blogroll, called “Displays Brilliance”, I’ve added my copyright information from Creative Commons and the icon for Top 100 Bloggers, a popularity blog network I’ve belonged to since its inception.

Add translation buttons to your WordPress sidebarYou can add all kinds of images to your blogroll. They don’t have to be the icon of the linked site. For example, I have a column of links which, when clicked, offer a translated version of the front page of my blog in different languages. I simply used one of the online buttons and badge makers to create these, one for each language.

Sidebar WordPress blogroll exampleYou are not limited to off-site links in your blogroll. The section featured in my sidebar called “Hot WordPress Articles” is a manually created list of the most popular posts about WordPress on this blog. This increases navigation on my blog and points visitors to important articles they may need to help them use WordPress.

I’ve also added a long list of social bookmarking services and directories under “Subscribe”. When you click on those links, the link adds to those services. Self-interested self-promotion.

Simply create a new category for your blogroll and add your favorite or specifically helpful posts in their own category list. You can add images to them if you want.

Controlling the Blogroll Order

WordPress Blogroll controlling the sort order of blogroll links within a categoryThe blogroll is sorted alphabetically within the category by name, though you can choose to have them sorted by ID number, address, or rating. I add links to my blogroll categories all the time, so controlling the order of how the links are displayed by ID, address or rating doesn’t work if I want to control the placement of the blogroll links.

Blogroll Using 9Rules logo in my blogrollIn the “Displays Brilliance” blogroll on my sidebar, I wanted the logo at the top, and the copyright and Top 100 Bloggers icons at the bottom of the list. I may want to change this order in the future, but I’m limited by alphabetic or numeric order. So I control the icon images through alphabetization.

If you look under the hood of the blogroll links for the copyright and Top 100 Bloggers images, you would find the text name for the links are “zCreative Commons – Copyright Protected” and “zy Top 100 Bloggers”. The text titles aren’t visible on the links as they are replaced by the images, so by adding the letters in front, I control placement and positioning. I didn’t need to do this with the 9Rules logo as the “9” comes before “A” in the sort order. If I want to move the 9Rules logo to the bottom of the list, I would use “zz 9Rules” or something similar to position at the bottom of the order.

Changing the Blogroll Category Titles

Don’t like the title “Blogroll” on your blogroll? Then change the title.

You won’t see “blogroll” as a title on my site. I call my blogroll “Displays Brilliance”.

To change the title of your blogroll category:

  1. Go to Manage > Categories.
  2. Click Edit on the blogroll category you wish to change.
  3. In the title form, change the name.
  4. Click Edit Category to update and save the new name.

Now all links with that category will be under the new category name.

If you would like to create a new category and move links into it, create the new category from the Blogroll > Add Link panel. Edit each of the links you would like to change and assign them to the new category.

There is no end to all the fun you can add to your sidebar links using the Blogroll, formerly known as Links Manager.

For more about using the Blogroll and Write Post panel in WordPress, see What Do I Do With My New WordPress.com Blog.

WordPress Widgets Sidebar Blog Bling

In addition to your Blogroll blog bling links, there are many WordPress Widgets you can add to your sidebar.

I don’t use many WordPress Widgets on my sidebar, though I can’t live without some of them.

Akismet WordPress WidgetI’ve added the Recent Posts and Most Popular Posts WordPress Widgets, and at the bottom I’ve added several feeds from other sites and a Widget that shows you how many comment spams have been caught by .

Using the WordPress Widgets for text and search formsThe search form and text WordPress Widgets allow me to arrange where I want these elements to go on my sidebar as well as add their features.

As an educational blog, it’s important to my readers that they be able to find the information they need to help them with their WordPress blog or blogging techniques. Thus, I want the search form to be at the top of the sidebar.

I used the WordPress Text Widget to add a descriptive statement to help people understand where they are and what they are reading when they arrive on my blog from other sites or search engines. I believe that every blogger should share a little about who they are and what they are doing with their blog to help the reader respect their writing and feel a personal connection with the blogger.

Add image via WordPress Text Widget on WordPress.com blogsYou can also add pretty images and photographs to your sidebar which are not part of your blogroll.

Using the WordPress Text Widget, add it to your sidebar and click the edit icon. Simply add the link to the image in the text box and click away from the box and choose Update or Save Changes.

The image link needs to be in the following HTML image tag format:


<img src="http://example.files.wordpress.com/image.jpg" alt="Image description" />


You can wrap the image in a link to a page, category, or off-site location if you want. You can also add text to explain the image.

WordPress.com Feed WidgetThe WordPress RSS Feed Widget allows you to add feeds from various sites to your WordPress.com blog. They are highlighted with an orange RSS feed icon. This helps bring related content from off-site onto your blog. Or you can create a feed from a specific category on your blog and highlight in your sidebar with the WordPress RSS Feed Widget, expanding your site’s navigation and showcasing category specific content to your visitors.

You can also change core sidebar elements around in your WordPress Theme, if your WordPress Theme is enabled to do so (it will say so in the Theme notes). You can move the search form above or below your Pages or Categories list, or shift the Feeds Widget up or down within the sidebar list.

Including core sidebar elements, currently, the Sidebar WordPress Widgets available for WordPress.com blogs are:

  • Search
  • Text boxes
  • Pages
  • Categories
  • Recent Posts
  • Top Posts
  • Meta
  • Links
  • RSS External Feeds
  • Home Link
  • Akismet
  • Archives
  • Blog Stats
  • Calendar
  • Recent Comments
  • Sonific Songspot
  • del.icio.us
  • Flickr
  • Meebo
  • SplashCast!

For more information on WordPress.com Widgets, see Playing with WordPress.com New Sidebar Widgets. To customize those sidebar WordPress Widgets, see WordPress.com Widgets – Customizing Your WordPress.com Theme Sidebar and Customizing RSS Feed Links for WordPress.com and WordPress Sidebar Widgets.

New , which I call “Sidebar Accessories”, are coming out all the time, so check them out on your Presentation tab and see what fun you can add to your sidebar with WordPress Widgets.

Related Articles


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

Member of the 9Rules Blogging Network

11 Comments

  1. Posted February 8, 2007 at 7:06 pm | Permalink

    This is really useful. Have to try some of this on my own.. Thanks ever so much.

  2. mirdonamy
    Posted September 17, 2007 at 4:03 pm | Permalink

    Thank you for your tips and hints. Do you know where I can find a widget (plugin) that will allow my blogroll categories to be ordered in the way I want (non-alpha order). I have 4 categories of links in my blogroll, and those categories are alpha (which does not make sense for my site). Any direction would be greatly appreciated. I’ve been searching the internet for months with no results!

    PS. I love your blogroll image work here!!!!

  3. Posted September 18, 2007 at 8:10 am | Permalink

    The order of the links in your blogroll are controlled by WordPress template tags, though which one depends upon the version of WordPress you are using. For WordPress 2.1+: wp_list_bookmarks. Check there for specifics on how to set the parameters to control how the list in your blogroll is sorted. By the way, the first stop you should make on any WordPress issue is the WordPress Codex, the online manual for WordPress users.

  4. Posted April 21, 2008 at 9:31 am | Permalink

    How do you get the titles – search, archives, recent comments, blogroll, etc. customized with images instead of the boring text? Can’t seem to figure this out?

  5. Posted April 21, 2008 at 10:31 am | Permalink

    @ Jenny:

    If you are talking about putting images into your blogroll, use the Manage > Links to add an image to show instead of the text, as described in the article. As for titles to specific sections, the text is there for a reason. To meet web standards for accessibility and equal access under the laws. You can add an image to them through CSS and the stylesheet, as I have done. But don’t replace the words. They aren’t boring. They are useful.

    Does this answer your questions?

  6. Lith
    Posted September 24, 2008 at 2:10 am | Permalink

    Hey there, Im new ish to blogging, and i have learned how to use and add sidebar widgets, but i have another question.
    I am currently using the “chaoticsoul” template offered for free by wordpress, If i have multiple authors on my blog, how do i get each post to display who wrote it? at the moment, myself and my partner post more than once daily, and things get confusing as to who wrote what

  7. Lith
    Posted September 24, 2008 at 2:11 am | Permalink

    just for reference, you can comment to get my attention at tmt08.wordpress.com, if you do reply, thank you so much :D

  8. Posted September 24, 2008 at 9:04 am | Permalink

    @Lith: Just for reference, comments are always replied to via the blog they were left on. :D

    If you have multiple authors on your blog and your blog Theme has no byline, I recommend that you choose another Theme on WordPress.com, one that has that feature. It is built into the code of the Theme.

    Otherwise, you create code you can copy and paste to create a byline. I give examples in <a href=”http://lorelle.wordpress.com/2007/02/01/wordpresscom-blog-bling-fun-font-bling/” title=”WordPress.com Blog Blin and WordPress.com Blog Bling: Lines and Smilies that should help.

    I know it’s a pain, but it’s a limitation of the Theme. Many designers don’t take multiple bloggers into consideration – they assume that a blog should have only one author.

  9. omnistuff
    Posted February 15, 2009 at 7:02 am | Permalink

    sooo useful. Thank you so much!

  10. Posted April 20, 2010 at 3:26 pm | Permalink

    Adding an image doesn’t omit the title text. When I delete the title text, it displays the url next to the image. I just want the image to show in the sidebar – any suggestions?

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

      Title text? Not sure what you are describing. In HTML talk, the title text is the text within the image HTML tag. While not required, it is helpful. The ALT description is required. Are you talking about the text widget heading? Then leave it blank. Not sure what you are trying to do. I’ll help more, but you need to be really specific. Maybe you made a mistake in the HTML code for the image. Are you using the Image Widget?


15 Trackbacks/Pingbacks

  1. [...] More: continued here [...]

  2. [...] If you run a WordPress blog, you’ll probably be interested in the following post by Lorelle about Showing Off Your Blog Bling.  In it, she links to her series of posts that give instructions on how to bling your WordPress blog.  You’ll find a lot of great stuff, including Blogroll and Sidebar bling. [...]

  3. [...] to build a new Sidebar management plugin. During the course of my research I found an article by Lorelle on WordPress about the Widgets she uses on her site. Admittedly, I’ve not been keeping my eye on the ball recently so completely missed out on [...]

  4. [...] WordPress.com Blog Bling: Blogroll and Sidebar Bling [...]

  5. [...] WordPress.com Blog Bling: Blogroll and Sidebar Bling [...]

  6. [...] WordPress.com Blog Bling: Blogroll and Sidebar Bling [...]

  7. […] WordPress.com Blog Bling: Blogroll and Sidebar Bling […]

  8. […] WordPress.com Blog Bling: Blogroll and Sidebar Bling […]

  9. […] WordPress.com Blog Bling: Blogroll and Sidebar Bling […]

  10. […] WordPress.com Blog Bling: Blogroll and Sidebar Bling […]

  11. […] WordPress.com Blog Bling: Blogroll and Sidebar Bling WordPress Plugins Battling Evil […]

  12. […] WordPress.com Blog Bling: Blogroll and Sidebar Bling […]

  13. […] the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, podcasts, audio, and video, signatures, signoffs, and writing […]

  14. […] WordPress.com Blog Bling: Blogroll and Sidebar and Widget Bling […]

  15. […] have a variety of WordPress Widgets to style our sidebar with fun accessories. We use Akismet to fight off comment spam every minute of the […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,672 other followers

%d bloggers like this: