Tag Archives: blog makeover

How To Keep Your Hair (and Sanity) When Doing Blog Makeovers!

Modified on by
13

Ever felt like you’re going slightly totally crazy?

You upload a nice new custom image header.  Or you rename your blog categories!  But when you visit your blog site these new changes haven’t appeared and you see the old version of your blog.

Rest assured you aren’t crazy!

But until you understand the culprit lies with your browser’s cache and learn how to clear your browser cache it will drive you crazy.

What Is A Browser Cache?

When you visit a web page for the first time web browsers such as Internet Explorer, FireFox, Flock and Safari save a copy of that page and its graphics on your computer.  The next time you visit an ‘already visited web page’ it grabs the saved copy of the page from your computer’s hard drive. This makes the page load and render faster because it doesn’t have to grab all the information from the web server that hosts the web page.

This ‘saved copy on your computer’s hard drive’ is known as your browser cache.  It’s normally a good feature unless you need to view the latest version of a web page.

How To Clear Your Web Browser

Web browsers do vary in terms of what method you use to clear their cache.  However the fastest method is to use the shortcut key Ctrl + F5 (press and hold the Ctrl key while pressing F5).  This will reload the web page you are viewing while clearing the cache for most web browsers on Windows including FireFox, Flock and Internet Explorer 7.

On a Mac the short cut keys to reload and clear cache are CMD + R (press and hold the CMD key while pressing R) – thanks Patrick Malley for realizing I had forgotten instructions for Macs.

So the next time you make changes to your blog’s design and are still seeing the old version of your blog remember to try clearing your cache.

Image by fjom licensed under Creative Commons ShareAlike.

If you are enjoying reading this blog, please consider feed-icon32x32 Finding and Adding Creative Commons Images To Your Blog PostsSubscribing For Free!

Creating Hyperlinks Using HTML

Modified on by
14

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

Modified on by
35

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

Modified on by
49

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!