Creating A Blogroll For Your Sidebar

The last post showed how you can add links to your sidebar using HTML however the Blogroll and Links widget feature is an easier alternative.

What is A Blogroll?

Bloggers often feature a list of their favourite blogs in the sidebar of their blog; this list is commonly called a blogroll. One of the reasons for adding a blogroll is so your readers can use this list to locate other blogs worth reading — you are saying “these are some blogs I like – which are worth checking out!” The unfortunate downside is readers may get upset if they aren’t on your list — one of the reasons why I call it “Some of the Blogs I read” on my Mobile Technology in TAFE blog.

It is important to realise that the blogroll area of your dashboard is an area for storing any links i.e. not just links to blogs. These links can be organised into categories e.g. blogroll, Favorite Posts, Articles I’ve Written.

Setting up your Blogroll

  1. Your Edublog blog automatically comes with a blogroll in it’s sidebar.  All you need to do is Add or Delete links to change what blogs are displayed.
  2. On your blog dashboard, go to Write > Links
  3. Insert the Name of the blog, its URL and tick Blogroll then press Save.Image of Creating links for blogrolls
  4. To remove a link to a blog from your blogroll go to Manage > Links.  Tick the blog link you want to remove then click on Delete.

Image of Deleting Links

Using Link Categories

Remember that you can also organise links into areas besides your blogroll using link categories.

Image of link categories

Here is an example of how Larry Ferlazzo has used link categories on his blog.

blogroll5.jpg

Larry’s blog makeover used a combination of links created using HTML and blogroll because link list using the blogroll feature was too long i.e. created clutter on his sidebar.

Another way of setting up your Blogroll is to use Google Reader to create it.

If you are enjoying reading this blog, please consider Subscribing For Free!

Creating Hyperlinks Using HTML

Image of Photo in Larry's sidebarLast post on The Edublogger introduced HTML basics and showed readers how to use HTML to add their photo to their blog side bar.

As Kate Olsen highlighted, if you use your photo for your blog avatar, a simple alternative is to add the Avatar Widget to your side bar (learn more about Widgets here!). However with Larry’s “blog makeover” I wanted to add words above and below his sidebar photo which is why I used HTML.

In this post, we will look at how you can create hyperlinks using HTML (Learn about HTML Basics here!)

What Is A Hyperlink?

A hyperlink (commonly called links), on a web page, can be an icon, graphic, or word/sentence that, when clicked with the mouse, takes the user to another location on the web site or to another web site.

People will often use HTML to create hyperlinks to helpful web sites when writing comments on other people’s posts.

Here the HTML you use to create hyperlinks:

<a href=”http://theedublogger.com/”>Welcome to the Edublogger</a> produces Welcome to the Edublogger

link.jpg

Here is how I created the Links in Read This Info on Larry’s Blog

I used HTML code for hyperlinks to create a text widget that linked to pages on Larry’s blog which allowed me to reduce the number of pages at the top of his blog (refer to Tips for Blog Makeovers for the reasons why).

Each hyperlink was separated with bullet points using HMTL tags <ul> and <li>

<ul>
<li>potatoes</li>
<li>spinach</li>
<li>lollipops</li>
</ul>

produces

  • potatoes
  • spinach
  • lollipops

Notice you must use the < and > symbols around the HTML Tags and the tag is closed using a ‘/’ (slash) in front of the tag keyword e.g. </ul>

htmlwidget.jpg

Here’s how I created the sub-pages.

pages1.jpg

FINAL THOUGHT

For more experienced widget and HTML users, check out Judy O’Connell’s text widget for displaying Library Things Book Collection.

Another way to add links to your sidebar is using your blogroll which we will cover in the next post.

Other posts in our “blog makeover” series include:

If you are enjoying reading this blog, please consider Subscribing For Free!

How To Add Your Photo to Your Blog Side Bar

Our next posts in our “blog makeover” series provides an excellent opportunity to respond to Dina Strasser suggestion to do:

a follow-up post on how to (and the limits to) customizing widgets. For example, I’d like to include on my sidebar a simple link to my Twitter page (no updates).

It is recommended you read the previous post on Getting more out of Widgets prior to reading this post.

Basic knowledge of HTML provides greater ability for customizing text widgets; means you can embed photos in your side bar, link to pages on your blog or other websites, write text using bold and italics.

What is HTML?

HTML is a bit like RSS, for bloggers there is no need to fully understand it but helpful if we learn the basics of how to use.

HTML is short for “Hyper Text Markup Language” and a language used to tell a browser how to organise the layout of a web page it has downloaded from the WWW e.g. influences if text is bold, italics, a heading, bullet points.

When you write a post or page inside your blog dashboard you don’t worry HTML because the Visual Editor does it for you. If you click on the Code tab it shows the HTML code in your text.

html.jpg

Basic knowledge of HTML is really helpful for tasks like customizing widgets and writing comments on blogs.

Examples of HTML used to highlight text include:

  • <strong> tag makes text strong e.g. I <strong>really like</strong> this idea produces I really like this idea.
  • <em> emphasizes text e.g. I <em>really like</em> this idea produces I really like this idea.

Notice you must use the < and > symbols around the HTML Tags and the tag is closed using a ‘/’ (slash) in front of the tag keyword e.g. </strong>

Here’s how you can use HTML to add your photo to your Blog Side Bar

<img src=”http://theedublogger.com/files/2008/01/question.jpg” alt=”question mark” />
producesquestion mark

This is how I embedded Larry’s photo on his blog. Personal connection is important for readers — adding Larry’s photo means his readers now know more about who he is i.e. they can visualise him.

imagehtml.jpg

Final Thought

As Kevin pointed out:

if you doing a blog maker make sure you write a post to invite your readers to comment on your changes. Readers who read your post via RSS won’t be aware of the change because everything will look the same in their feed reader.

Remember to pop past Larry Ferlazzo’s Website of The Day blog and give him feedback on his makeover!

Dina Strasser request for tips on adding “a simple link to my Twitter page (no updates)” will be covered in my next post.

It does take time to get used to using HTML; the key with technologies is willingness to experiment. As you become experienced with using HTML you will recognise opportunities that can be enhanced with it’s use.

Other posts in our “blog makeover” series include:

If you are enjoying reading this blog, please consider Subscribing For Free!

Tips For Doing A Blog Makeover

Fantastic news! Our Getting More Out of Widgets! post inspired community members to make adjustments or add extra widgets to their blog, plus motivated some to do “blog makeovers”.

Larry Ferlazzo suggested

Here in the U.S there’s a popular TV show where producers go into someone’s home, and completely redo a room. Crazy idea, I know, but it might be fun for you to offer to do that to a blog and as a teaching tool for the rest of us.

What an excellent idea Larry and here’s the best news!

As you asked for assistance, we choose your blog for the makeover and will be writing a series of posts on Larry Ferlazzo’s Website of the Day “Blog Makeover” to share blog design tips and additional info for customizing widgets.

But before we begin– Gail Desler, from Blogwalker blog, has shared with us her excellent Introductory manual for using Edublogs which is definitely worth bookmarking for future reference! Make time to go past Gail’s blog and write a comment to thank her for sharing!

Importance of Your Blog’s Presentation Theme

Your blog has two distinct groups of readers:

  • Those that subscribe to your blog via RSS feed or email;
  • and first time readers who view your blog via it’s web address.

It’s these first time readers we want to engage and get to subscribe to our blog. Unfortunate fact of life, we do judge a book by it’s cover! People are more likely to both read your posts and subscribe to your blog if it’s pleasing to their eyes.

Watch this video to learn how to change your blog theme or refer to page 12 & 13 of Gail’s Introductory Manual to Edublogs (other manuals for Getting Started with Edublogs are located on this page).

Larry’s Original Theme

originaltheme.jpgFor those unfamiliar with Larry Ferlazzo’s Website of the Day — Larry’s well known and very popular for sharing great information on websites for teaching ELL, ESL and EFL. His original theme was Batavia 1.5.

Nice simple theme but the beige background behind the text in his posts detracted from the great content he was sharing. Made worse by his long blog name that cluttered his blog header.

original2.jpg

Larry’s Next Theme

Larry had already decided that there was better themes for his blog and was trailing them before we offered our assistance.

copyblogger1.jpg

But there was two main problems with the new Copyblogger theme:

  1. His long blog name was totally overwhelming the blog header. Solution was to shorten his blog name and use a theme that included a tagline!
  2. Too many page links displayed along the top of his blog was making it cluttered and messy. Answer lies with Pages, Sub-pages and a widget.

Why Blogs have Taglines

The concept behind a blog tagline is to create a memorable phrase that sums up the tone and premise of a blog. Ideally all blogs should have a tagline since they instantly tell first time readers what your blogs all about and whether you write posts in topic areas that interest them.

Unfortunately not all blog themes include a tagline however a work around, if you’re good with Photoshop, is to use a theme with a customisable header and add the tagline to the image in the header e.g. check out the header on my personal blog and Graham Wegner’s Teaching Generation Z blog.

tagline1.jpg

With Larry we changed his blog name from Larry Ferlazzo’s Websites of the Day for Teaching ELL, ESL & EFL to Larry Ferlazzo’s Websites of the Day… and added the tagline … .For Teaching ELL, ESL & EFL.

Larry’s New Theme gloriousdays.jpg

He also decided to change from the theme Copyblogger but couldn’t choose between Glorious Day or Glossy Blue.

The trouble with themes is each has their advantages and disadvantages. Both the new themes included taglines but the background colour behind the text and the text styles was easier to read with Glorious Day.

Why Blogs Have Pages

Edublogs, because it uses WordPress, has the definite advantages of being able to customize and reduce blog clutter considerably more than Blogger blogs. Clutter distracts readers making them less inclined to subscribe to your blog. One of the best ways to reduce clutter is to use pages.

Pages, are similar to posts, except they can do more than a post. You normally use pages when you want to present information about yourself or your blog that you always want readers to be easily able to access. Examples of pages on this blog are: About; What you’d like to see covered; and Want Automatic Notification.  For more information, read the differences between pages and posts.

Pages can also be organised into Sub-pages within your pages, creating a hierarchy of pages. For blog themes that display pages along the top, this is a great way of controlling what pages are displayed as only those with no parent are displayed. The Want Automatic Notification is located on a sub-page below the About page.

This video explains how to write posts and pages or refer to page 7 & 8 of Gail’s Introductory Manual to Edublogs.

Larry’s New Look

Below is what Larry’s blog now looks like after creating pages, sub-pages and using a widget to link to the sub-pages.

Our next post will show how to create widget that link to sub-pages, a widget for photos and provide tips for decluttering your side bar.

newlook1.jpg

FINAL THOUGHT

We’d love feedback on Larry’s blog makeover, please check it out and provide your thoughts on further improvements. And if you’re in the process of a blog makeover let us know so we take a look!

Other posts in our “blog makeover” series include:

If you are enjoying reading this blog, please consider Subscribing For Free!

Getting More Out of Widgets!

Wow – thanks everyone. Your response, support and feedback has been incredible! We have set up this page to keep track of your feedback on what you’d like to see covered!

As you can see there are some really great topic areas to get us started. Which got me thinking! The Edublogger is about community, and helping each other. Perhaps you have already covered some of these topics in your own posts? Or you would like to cover a topic(s) in your own post(s)? Let us know by posting the link in the comments below, and we will let the community know!examples of widgets

Meanwhile lets start working through the list! Many readers express interest in widgets, so I have decided this is a good place to start!

What are Widgets?

Web terminology makes it so much harder when people are starting their online journey; suddenly you being bombarded all these foreign terms and widgets are a classic example! In simple terms widgets are mini web applications that you can put onto your website (i.e. blog, wiki, homepage) e.g. the Clustrmap on the side bar is a widget.

How To Embed A Widget

People use widgets to add extra features to their website. But be warned! Choose widgets for your blog wisely because they can clutter your side menu which will distract your readers. My list of “must have widgets” on a blog include:

  1. Search - so readers can easily search your blog
  2. Email subscription – for readers who prefer to be notified of new posts by email
  3. RSS feed - not all feed readers are able to detect the RSS feed from the site URL; this is why I add a Feed burner feed to my sites to make it easier for readers to subscribe
  4. Categories and Tag Cloud – to make it easier for readers to locate posts on your blog. We will be writing a post soon to explain the difference between categories and tag clouds; and why/how each is used

I also like to add a widget that links to information on how to be notified of new posts; to make it easier for new people to understand how to subscribe to blogs.

Edublogs Widgets

Removing WidgetsCould I Mess up My blog Embedding Widgets?

Don’t worry! Widgets won’t break your blog. Any widgets you add can easily be removed, and won’t effect existing widgets in your side bar.

To try out widget drag and drop the widget from your Available Widgets to your Side Bar, then click Save Changes and view your site. To remove a widget just drag it from your Side Bar back to your Available Widget area and then click Save Changes.

What Widgets Should I Add To My Blog?

Widgets are PERSONAL. We all have our favourites.

Clustrmap

Many educators like to add Clustrmaps, especially those with younger students, because the students loving seeing the red dots grow as their readers, from around the World, visit their site.

Other common widgets bloggers use include:

  • Flickr – shows the latest photos you have uploaded to your Flickr Account
  • Del.icio.us – shows the latest sites you have bookmarked in your del.icio.us account
  • Vod Pod Videos – shows the latest videos you have saved to your VodPod account
  • Google Reader Shared Items – for latest items you share in your Google Reader
  • Twitter – shows your latest updates from Twitter

Not all widgets can be embedded in Edublogs because some types of code and code that includes Java Script can cause problems. For example, you can’t embed a clip of your shared items in Google Reader because the code includes Java

Google Reader shared items

Script however you can still embed by using an RSS widget!

And if you want even more widgets, don’t forget you can grab some from Widgetbox! This video explains how to embed Widgetbox widgets into Edublogs.

FINAL THOUGHT

For those struggling to embed widgets we hope these “how to” tips have helped! For everyone else we hope that you find these tips useful when demonstrating to new people.

Please leave a comment to let us know how you go, and if you need any help with widgets I haven’t mentioned.

If you are enjoying reading this blog, please consider Subscribing For Free!