Sephy’s Platzish

This is a quick guide to importing your exported RSS feeds into Mozilla Thunderbird.

If you do not have an RSS feeds account set up, you will have to make a new account for RSS feeds. You can do this from the Account Settings screen, just click Add Account… and then go through the steps.

Now that you have a News & Blogs account; you can go about importing your subscriptions.

First, from the main screen of the folder (the one you get when you click on the News & Blogs name), click on Manage subscriptions -

Next, click on Import

Then, in the window that pops up, find the file that you exported from your reader. Then, click Open and all of your feeds will be imported.

Now, I did this after importing all 100+ feeds that I have in my OPML file. If you have folders in your reader, those will not be imported along with your feeds. You will have to remake your folders, and you will lose the ability to read a full folder at one time.

If you have any questions, feel free to leave a comment. If you’d like to have a how-to written up for something you’d like to know how to do (and you probably won’t be the only one who wants to know), feel free to drop me a line via the contact form.

For the Tuesday Think Tank this week, I’m departing slightly from the planned HTML topic to talk about something that can help you diversify your searching - the Firefox Search Bar.

It is that thing that you always see at the upper right of your window in Firefox (usually next to the address bar on the Navigation Toolbar). In previous versions of Firefox, you could hide the bar and a popup would appear, but they changed that in Firefox 2.0.

In fact, There was a time when I was against upgrading my browser, because of it not allowing the popup. However, soon after posting that, I installed the new version and have come to love the redesigned search box. It is actually one of the most powerful tools that come with Firefox now, in my opinion.

One of the coolest features is the ability to add as many search engines as you want to it. As it stands right now, these are the search engines in my search bar -

Most of these engines have been added when I’ve visited various sites, and for the most part, I’ve kept it fairly stable with what is in there; in fact, most of the additions to the bar have been made over the last couple of days.

How do I add a search?

It’s fairly simple to add a search to the search bar. There are a couple of ways to do it.

Directly Adding at a search site

The first, and most common, way is to go to, say, Technorati - and take a look at the upper right of your browser window. It’ll look something like this -

Click on the blue box, and your list of search options will pop up, with something added to the bottom -

Click on Add “Technorati Search”, and Firefox adds it to your list of engines and selects it -

Adding Search Engines via Mycroft Project

You’ll probably have noticed by now the last item in the menu for search engines - Manage Search Engines. When you select that, a quite powerful window is brought up.

Here, you can move the search engines in your list around, delete search engines, and gain quick access to the Mycroft Project. All you need to do is click on Get more search engines… and you will be taken to Firefox’s main Search Engine add-on page.

At the bottom of the page, there is a link to Browse through more search engines at mycroft.mozilla.org - simply click on that link, and you’ll be taken there. Now, you can search for your favorite site. For example, if I wanted to find a plugin for Dogpile (a site which doesn’t automatically pop up the blue box), I’d search for it and be sent to a result page.

When at the result page, click on the version of the search engine you’re looking for and a window will pop up verifying that you want to install that search engine.

Click Start using it right away if you want it to be your search engine of choice right away, or else you can just install it and switch to it later.

How do I change the Search Engine I use?

That’s a simple process. Just know that when you change the search engine in the upper right, you change the engine that you use when you do a right-click search. For example, with Technorati as the default search, I can search for words I come across on a website by selecting them and right clicking, which will bring up this menu (which I will add is quite a bit longer than most right-click menus ) -

To change the search engine that you use for both types of searches, it’s as simple as going back up to the upper right and clicking on the icon of the current search (the same place that you click when it turned blue), and select your new search engine.

Using the search bar

To use the search bar, you can do one of three things - first, click on the bar and type your search in. If you prefer to use the keyboard, you have two shortcuts - Ctrl+E and Ctrl+K, both of which focus to the search bar. Type your search in and hit enter or click on the magnifying glass. A new tab will open up for you which will have your search in it.

Over to you

Taking advantage of the phenomenal tool is quite simple. If you haven’t tried it out yet, give it a go, and let me know what you think in the comments.

Also, as always, Snoskred and I are open to suggestions for future topics to be covered in a Tech Tuesday Think Tank. If you have something you’d like to be explained, feel free to drop a line via the Contact form.

So, the other day, I got a question from Snoskred about switching Google Reader feeds from one account to another. However, thanks to her PageRank being lowered, she’s done with them and wanted to move over to a different feed reader, namely Bloglines. As is the case, I go and find out how to do it, and then come back with how to do it, and I’m sharing it with all y’all.

Step 1: Export your Google Reader Subscriptions

The first thing that you have to do in order to change your reader over is to get a list of the current subscriptions you have now. In Google Reader, it is fairly simple to do that. Starting from the page you see when you log in, click on Settings.

Once in the Settings screen, you then click on Import/Export, and then on Export your subscriptions as an OPML file. Really, there is no need to worry about what an OPML file is, other than a file that lists your subscriptions in a format that is readable by most sites.

When you click on the Export link, a new window or tab will open, and you should be asked to safe the file. Put it in a folder that you will remember, such as your desktop or your Inbox folder, if you’re following an organized desktop plan

Step 2: Importing to Bloglines

Admittedly, it’s not the easiest thing to do when you go to import your old subscriptions for the first time, but now that I found it, I can say that it is quite easy to do. Here’s how. I’m going to assume that you’ve already signed up for Bloglines and have been to the Feeds screen at least once.

When you’re in the Feeds page, to start the import process, click on the Edit link in the left panel

Here, simply click on the Import Subscriptions link.

Now, the right panel will change to allow you to upload your recently-exported subscription list. Click Browse to bring up a window that lets you search for the file. You should start out in the same folder you just used, however, if you don’t, you should remember where you saved it.

When you’ve got the file selected, click Import, and Bloglines will automatically go through the list, and import your feeds and maintain the folders you have put them in. When it’s finished, you will see a list of all the feeds that were imported, which looks something like this -

That’s it. You can now go back to the feeds screen and see the following sight:

If you’re interested (or haven’t put your mouse over the image ), there are 16,113 unread items there. That’s a quirk of Bloglines - when you import feeds to there, it picks up the first 200 items for every feed that are available to them. Almost none of these items are from anytime in the recent past - for example, I found posts from ProBlogger from over a year ago, and from other blogs from almost two years ago.

Luckily, when you’re reading through, you don’t have to load every item, rather you can simply click on each folder and mark it read, and if you are good at going quickly through a list of things, it should take no more than a few seconds.

Hints and Tips for Bloglines

The first thing that you will notice about Bloglines is that it does mark everything read when you click on the feed or folder. If you want to save something for later, there is a small checkbox in the bottom right of every entry called “Keep New:” - if you click that, it will keep that entry for you for the next time you load that feed or folder.

Another important thing to note about Bloglines is that they have a limit (in the current version) of 200 items per feed; that means that if you have a feed that updates quite regularly, then it won’t pick up more than the first 200 items since you last looked at the feed.

A glimpse into the future

Note in the last paragraph, I mentioned “current version.” There is a current Beta out for Bloglines, and here is a sneak preview of it (note that this is with my main Bloglines account so it doesn’t have the imported blogs in there, yet).  There are a lot of really sweet ideas that you may want to explore, such as being able to put your most favorite blogs on the front page of the site and be able to move them around.

To check the beta out, go here and sign in with your username for Bloglines.

Over to you

Is there anything you’d like me to have a how-to put together for? All it takes is asking; just go ahead and send me a note via my contact page, and I’ll be happy to do it.

Also, if you’re a user of both readers, or are partial to one or the other (or like something else, such as NetVibes or Thunderbird), have a say in the comments.

Continuing the HTML series, this week we take a look at fonts. Longtime readers will remember that I touched on this subject previously, but I want to take some time to go more in depth on this, and show you some neat features about fonts, and also a list of fonts that look good, fonts that are common and fonts that you should just avoid.

Fonts in HTML

In the early days, the only font you ever saw on the web was Times New Roman (or simply Times). It was the default font everyone used in their browsers (unless you knew how to change it), and most pages didn’t declare what font they wanted the page to be printed in.

However, it wasn’t too long before you started seeing pages having a variety of fonts used; the most common being the Helvetica family, most commonly reproduced as Arial in Microsoft products, as the license wasn’t acquired by MS for the use of the real font.

When Windows 95 and 98 came along, so did a whole new set of fonts - Microsoft’s own TrueType creations including some more common fonts that you still see to this day - Georgia, Tahoma, Verdana and everybody’s favorite Comic Sans MS.

Now, it could almost be classed as a free-for-all when it comes to fonts. I’ve seen pretty much any font you can imagine out there, and there are definitely fonts that, in my opinion, look absolutely brilliant on a webpage, some that are good all-rounders, and others that for the want of a better term, are just plan crap.

Using Fonts

First, however, a bit of a review on how to get fonts to change on your page.

In the “old” days (back when it was simple and there was only one way to make things appear, not 17 ), most of the controls for your fonts were based in the <font> tag. If you wanted to change the style, you’d put face=”font face”, changing the size would be through size=”{-7~+7}”. That was about it.

Now, everything you want to control about the font is found in the “style” attribute, placed in a <span> tag. Not only is this more concise, it’s a lot simpler, as you don’t have to use arbitrary numbers for the font size, and it’s all held in one tag. Overall, while it might seem more complex, it’s a lot better.

Font sizes

The most common thing that you’ll wind up doing with the font is change the size of the displayed font. There are a couple of ways that you can do this using the <span> tag. The first is the easiest, changing the percentage of the size. To make the font larger than the rest of the page, set the size to greater than 100% and vice versa. For example, if you wanted this to appear as such -

1.5x larger, you would use this code:

<span style=”font-size:150%”>1.5x larger</span>

The other method is similar, but less used; it involves multiplying the display size by a number. It’s like taking the percentages used and dividing them by 100. As with the example before, here’s how you do it:

1.5x larger, use this code:

<span style=”font-size:1.5em”>1.5x larger</span>

Font color

There are times when you’ll also want to change the color of the displayed font, to maybe a red or a blue. Here’s how you do that:

For a lovely red font use -

<span style=”color:red”>For a lovely red font</span>

For blue

<span style=”color:blue”>For blue</span>

And, last but not least, if you want to use a custom color, and you know its numbers for red, blue, and green, you can use either of the following two combinations. The first is if you know the Hexadecimal numbers, the second if you know the 1-255 number.

<span style=”color:#aabbcc”>For the color matching Red: AA, Green: BB and Blue: CC</span>

<span style=”color:rgb(0,0,0)”>For the color black use this code; white would be rgb(255,255,255)</span>

If you want to see a set of 216 colors that are great for the web, you can check out the Visibone Color Guide

Bold, Italic, Underline and Strikethrough

These four are similar, yet somewhat different. There are a couple of ways to do each of these, and personally, I still prefer to use the “old” method as it’s easier to type for them.

Bold: choose one of the following - <b>Bold</b> or <strong>Bold</strong> or <span style=”font-weight:bold”>Bold</span>

Italic: choose one - <i>Italic</i> or <em>Italic</em> or <span style=”font-weight:italic”>Italic</span>

Underline: Pick from - <u>Underline</u> or <span style=”text-decoration:underline”>Underline</span>

Strikethrough: Select - <s>Strikethrough</s>, or <span style=”text-decoration:line-through”>Strikethrough&;/span>

Font Faces

Before I get into the discussion of the fonts you should and shouldn’t use, we need to put a font into the page. For this example, I’m going to use a simple font - Times New Roman, as I did above.

To get this use -

<span style=”font-family:times”>To get this</span>

The awesome thing about the font-family item is that if you don’t have the exact font that is looked for, your browser will find a compatible font you have on your system to substitute for it that looks simliar to the font asked for.

Fonts I Like

From here on out, this becomes opinion. Just sayin’

To me, there are a lot of fonts that are really good for webpages. In fact, there are a lot more fonts that I like than fonts that I don’t like. This is just a short list of the fonts that I like:

• Lucida Sans (that’s the default font on this blog, it’s an easily read font, and quite versatile)
• Times New Roman
• Georgia
• Tahoma
• Verdana
• Trebuchet MS
• Courier New - a shortcut to this text is <tt>the TT tag</tt>

And, now, the fonts that I don’t like particularly much:

• Comic Sans MS
• Impact
• SimSun (the default font for English text in a Chinese or Japanese encoded document)

However, just because I don’t like a font, that doesn’t mean I won’t use it - I’ve used SimSun for a form that was sent to scammers, mostly to annoy them.

Further Reading

In the companion post to this, Snoskred takes a look at the Horizontal Rule
W3 Schools: Font Tag
W3 Schools: Span Tag
What’s wrong with the Font tag
Beyond the FONT tag: Practical HTML text styling

Over to you

Take some time and experiment with using fonts on your blog and play around. Find fonts that you like; I believe you can even do some experimentation in the comment area, just use the <span style="(styling information)"> tag.

Over the next few weeks, Snoskred and I will be taking a look at some of the elements of HTML; as is customary, I’ll be looking at more advanced pieces of code - stuff you may or may not really need, and Snos will take a look at some of the essential pieces of HTML.

This week, I’m going to talk about tables. Tables were first introduced as an element only for Netscape browsers back in around 1994, with version 2.0 of their Navigator product. Not long after, they were added to the full HTML specification and implemented in other browsers over time.

To this day, they’re extremely useful for laying out a web page, however their usefulness has gone down with the growth of other tools, such as Cascading Style Sheets and XHTML. I’m going to show you a couple of things that you can do with tables, such as putting a caption on it, and also making it appear where you want it to appear.

First, we have to cover the code.

All tables must start with a <table> tag. This is what tells the browser that you’ve got a table here. Depending on whether you manually put HTML together or allow a program to do the coding for you (for example, the TinyMCE editor in WordPress), another piece of code may be added called <tbody>. The purpose of the TBODY tag is to designate the part of the table that is the body. If used in conjunction with the tags - <thead> and <tfoot> - for the header and footer respectively, you can create tables that, when printed, will have headers and footers on all pages.

The next important tag for a table is the <tr> tag, which says that this is the beginning of a row in the table. Within a row, you may have two types of cells - headers and regular cells. Headers use the code <th>table heading text</th> and regular cells use <td>table cell text</td>. At the end of each row, you need to “close” the row by using the </tr> tag.

At the end of the table, after you’ve closed the last row of it, you need to close the table, otherwise it will throw off the rest of the page you’re trying to write. To close the table, simply use the </table> code.

Formatting Tables

You can format a table to appear in just about any format you wish. One of the best things about HTML is that no matter the overall code you use, generally the attributes you assign for the element will be consistent. For example, if you want the table to be centered on the screen, then you just add this to the <table> tag -

align=”center”

if you want it on the right or left, then just change it to the one you wish.

However, there are some attributes which are specific to tables. The first of which is the border. Most of the time, when you have a table, you will want to have a border. Depending on the browser you’re using, it may not show the border, or you may get a border that is too big for what you want. To create the border, simply add this attribute to the <table> tag - border=”{size}” - replacing {size} with the number of pixels you want the border to be in width.

Another specialized attribute for tables is the cellpadding attribute. Put simply, cell-padding is used to create space around every cell in the table, which is quite useful when you may want to have your text more readable, or have an image which has things you want to see that are right on the border of the image. Again, to set the cell padding, simply put this into the <table> tag - cellpadding=”{size}”

A similar property to the cellpadding is cellspacing. This attribute tells the browser how much space to put between each individual cell while leaving the actual borders in place. The padding in the border area will appear the best if you don’t have the border set to zero. You can see an example of this below. To use the cellspacing attribute, put this into the <table> tag - cellspacing=”{size}”

You may wish to put a caption onto a table, such as “Figure 1-4. Text tools of alignment for HTML code”. In HTML, the way to put a caption on a table is not much different to how you put a title on a page. You need to put a separate tag into the table’s code for it to appear. Here is what the beginning of a table’s code would look like with a caption (and I’m setting it to show at the bottom):

<table>
<caption align=”bottom”>This is your caption.</caption>
<tr> et cetera

Some examples

I bet y’all are wanting to see some examples now, aren’t ya?

If you want to see the underlying code from the table, simply select it and view selection source if you are in Firefox.

OK, here’s the first example - centred, with 10 pixel cell padding and no border:

Heading 1	Heading 2
First	Row
Second	Row

Example 2: Aligned to the right, 5 pixel border, 10 pixel cell spacing:

Example 3: Left-aligned, 5 pixel border, 5 pixel spacing and padding, caption, and a background color:

Further reading

Just a note - there might not be a companion post to this as Snoskred hasn’t been feeling well for the last few days, and hasn’t had the energy to focus on writing.
W3 Schools: HTML <table> tag
W3 Schools: HTML <tbody> tag
HTML Help: TABLE - Table

Over to you

Take some time to experiment with this code if you wish. If you come up with something cool in a table, drop me a link in the comments

As always, we’re open for suggestions for future Tuesdays; if you have one, drop me a line via the contact form.

Previously in the Tuesday Think Tank

21st August: RSS
14 Reasons Readers Unsubscribe From Your Blog
Tuesday Think Tank: All About RSS

28th August: Blog Templates
Blog Design - Open Your Eyes.
Demystifying Blogger Template Editing

4th September: Nofollow
Spam, Spiders And Do Follow, Oh My!
Say No! to Nofollow

11th September: Site Meters
Do NOT Rely On Your Site Meter.
Track Your Visitors with Google Analytics

18th September: Technorati
Technorati - Sending Out An SOS
The Ups (and Downs) of Technorati

25th September: Google Reader
Google Reader Can Make Your Life Easier - Here’s How.
Improving your Google Reader Experience

2nd October: HTML
Basic HTML for Bloggers.
Some HTML Tips & Tricks

9th October: Time Management
Time Management - Tuesday Think Tank
Use Google Calendar to organize your life

16th October: One last Blogger Thing
Move your Blogspot blog to your own Domain with ease

23rd October: Skype
All About Skype - Tech Tuesday
Skype - A phenomenal tool for communication

30th October: Image Hosting/Blog Stats
The Truth About Blog Stats Revealed
Host Images online for free? Yes, you can!