Murdoch University Blogs

Appearance: sidebar and widgets

SIDEBARS

The blog sidebar usually contains the same information, no matter which page or post of the blog is displayed. This is a very useful way to provide tools to help the user navigate around your blog,  like search boxes or a list of archives. You can also put in information like links to recent posts or the text of recent comments.

Commonly there is just one sidebar on either the right or left hand side.  The sidebar location is set by the theme you choose for your blog. Some themes have sidebars on both sides of the content. Some themes have sidebars at the bottom. One theme available in the project has six sidebars.

WIDGETS

Each theme has by default different information in the sidebar. Some have calendars while some have blogrolls (a list of other blogs that the blogger thinks are worth reading). What do you do when you have found the perfect theme, but you want different information on the sidebar? That’s where widgets come in.

Widgets are modular “building bricks” of information that you can mix and match on a sidebar. You don’t have to know HTML to change the sidebar of your theme around - just grab a widget, move it up or down the sidebar and you have changed what is displaying.

HOW TO ADD A WIDGET

Most blog themes in the Murdoch Blogs project have widgets. If they are widegetised, then a “Widgets” option will appear under the “Appearance” tab:

Widgets

The screenshot below shows a blog with no widgets activated.

Here is the same blog where the blog owner has used the “add” button to add widgets to the sidebar, then dragged and dropped the added widgets to put them in the order she wanted. She’s remembered to select “Save Changes” when the she had the widgets she wanted and in the right order.

Here is what the settings under the “Widgets” tab look like. As you can see, the owner has added:

• Links to all Pages in the blog
• A Calendar that users can click on to retrieve all posts from a particular day
• A list of Recent Posts
• A Text box containing a Twitter badge

Please note: the screenshots below are for a slightly different, earlier version of the software. The options are exactly the same.

USING TEXT WIDGETS AND BADGE WIDGETS TO MAKE  YOUR SIDEBAR EVEN MORE FLEXIBLE

Sites like Flickr (photos), Twitter (microblogging) and Meebo (federated IM) have tools and “badges” made to go on the sidebars of blogs. Typically, you select the colour and look of your badge, choose a few options to make it do different things, press a button and you are given “embed code”.The embed code is a string of characters that you copy and paste somewhere in your blog. The badge you have chosen automagically appears.

For many of these badges, the embed code can be entered in a text widget in Wordpress Mu to produce a badge on the sidebar.

Any data that is pulled from a site outside of the university will be charged on student’s QUOTA account, while the rest of the blog content will not. It will also not be visible to people only accessing the PARNET network (eg. on the fast track PCs in the library).

AN EXAMPLE: ADDING A TWITTER BADGE USING A TEXT WIDGET

I have a Twitter account that I update daily so people know where to find me on campus. Twitter allows me to create a twitter badge , and will give me some code to embed in a widget.

Here’s how I can embed a little badge in the sidebar of my blog to update people about where I am:

1. Go to the Twitter “get a badge” page .

2. Change the colours and size of the badge using the options, then copy the code that the site gives.

3. Go to Appearance  > Widgets and add a Text widget to your sidebar. Select “Save changes” now or it won’t work.

4. Add a short title to the text box and paste the HTML into the body of text box. It will look something like this:

5. Select “Change” and then “Save Changes”. When you look at the blog, it now has the badge added to the sidebar, like this:

AN EXAMPLE: ADDING A GOOGLE TRANSLATOR BUTTON USING THE BADGE WIDGET

Here’s how to add a button to your sidebar that will instantly translate the contents of your blog to around 10 different languages.

1. Go to the Google Translate Tools page: http://translate.google.com/translate_tools?hl=en

2. Copy the relevant HTML where indicated on the page.

3. Go to Appearance > Widgets and add aText Widget to your sidebar. Select “Save changes” now or it won’t work.

4. Add a short title to the text box and paste the HTML into the body of text box. It will look something like this:

5. Select Change at the bottom of the text box, and then select “save changes”. The sidebar of the blog, will now look like this. You can then drop down the box to translate the blog.