5 Tabbed Interfaces To Display Your Content In

Posted on July 31st, 2008 | Save to delicious

I was looking at how content can be presented in tabs and found a few choices.  To clear up what I mean by tabbed content, here is an example from Problogger:

Tabbed content allows you to place content under a tabbed menu selection.  This helps to reduce clutter as well as organize multiple things in one area.  It also buys up screen real estate that can be used for other stuff or simply to make your page look cleaner.

I’ve used Tabifier before but I ran into a few others that I forgot about or just discovered and have not used.  Starting with the example above, it looks like Problogger uses a very popular script called DOMTab.

Hey Everybody, Look What’s Under The Covers!!

One way to find out what code is being used at a web site that displays tabbed content is to look at the page source of a site.  Typically under the View menu selection in Firefox and Internet Explorer is where you’ll find the Source menu selection.

Once you’re viewing the code for that web page, look for “class=” attribute or “id=” around the area that contains the tabbed content.  Press Ctrl-F to find text in the source close to the tabbed area.

As with all  the tabbed interfaces listed here, the hardest part setting them up is referencing the files correctly and styling the tabs to fit your - style.   :)

The Goods

Here are 5 tabbed interfaces that I’ve been playing with and they are listed in no particular order.  I’ve been testing idTabs, Nanotabs and the Yahoo! User Interface Library versions so I can implement tabbed content in the sidebar of this blog.

  1. DOMTab by onlinetools.org
  2. Tabifier by BarelyFitz Design
  3. idTabs by Sunsean (Sean Catchpole)
  4. Nanotabs by Sunsean (Sean Catchpole)
  5. Tabview by YUI - The Yahoo! User Interface Library

Here are a few tutorials and resources to help:

Filed Under Web Design | Be The First To Comment »

Win an iPod Shuffle or Nano and Learn How To Make Money Blogging

Posted on July 28th, 2008 | Save to delicious

Click here to get The Blog Profits Blueprint

Yaro Starak’s Blog Mastermind is a course I took last year (2007) on blogging.  I had just started a blog and was trying to help my wife start one as well.  There were so many questions I had from reading other blogs that I knew I needed some direction as we discovered this thing called blogging.

I had heard you could get more people to check out your blog than a static website and I witnessed that first hand with my wife’s static website.  When my wife first started her website it was getting about three visitors a day and when she first started a blog she was getting thirty visitors a day and we didn’t know anything about SEO (Search Engine Optimization).  So I knew something was up with blogging and getting more eyes to your site.

Anyway, I don’t recall where I ran into Yaro’s website, probably through a Google search since I’m sure he ranks pretty high for blogging.  But I do remember running into his freely available pdf called Blog Profits Blueprint.  The pdf is a great foundation for blogging and I highly recommend it.  It is a blogging resource that you will refer to over and over.

Here are 3 resources to convince you to take Yaro’s course:

  1. Conversion Blogging
  2. Interview with Alborz Fallah - Million Dollar Blogger
  3. How Yaro’s Blog Makes Money

The course costs $97.00/month for the 6 month course or $497.00 for the whole course and you save $85.00.  BAM!!

***   DOORS OPEN TOMORROW, TUESDAY, 7/29/08 ***

I’m giving away 3 iPod Shuffles to 3 Blog Mastermind students who sign up through this blog post at the $97/month level.  I’m giving away 1 iPod Nano to someone who signs up for the whole course at the $497.00 one-time payment level.  If you order by clicking this link or any other Blog Mastermind link in this post and you’ll be in the running to win one of these iPods, your choice of color, of course.

Note: If I get more than 3 people who sign up at the $497.00 level, I will start giving away more iPod Nanos to those people.  Probably one for every two that sign up.

So sign up for Yaro’s blogging course NOW and WIN an iPod!!

Also, whether you take the course or not, please subscribe to my blog via email or RSS Reader so you’ll be notified of other contests in the future where you’ll be able to win good stuff.

Filed Under Blogging | Be The First To Comment »

Creating in Firefox

Posted on July 25th, 2008 | Save to delicious

The title of this blog post could certainly be Working in Firefox. However, Creating fits much better since that’s what we want to feel like when we’re “working” and it has a more positive connotation than Working does for some people. Also, if you have a boss or someone(s) standing over your shoulder who wants you to be in pain while you Create, then make sure that person knows that you are working hard and in pain while you do so. ;)

While creating on the web the other day I realized you can certainly get a lot done in a browser. Specifically, the Firefox browser. So, I made a list of some of the ways you can create while in Firefox 3.0. Certainly, this is one way and there are many other environments to create.

I normally use Windows XP and more recently trying to adjust to Windows Vista, but for this blog post I decided to work in Ubuntu 8.04 and write a blog post in Google Docs. You can even post your final document to your blog from Google Docs. I’ll show you that at the end of this article. Ubuntu is a form of Linux which maybe you’ve heard of before. It is a free operating system, very stable and secure.

Google Docs

The following could all be reasons why you would want to use Google Docs for your blog posts:

  1. Google Docs is an online word processor that you use to write.
  2. Get better response from your Google Docs than your current blog editor when you save the content over the web.
  3. Save yourself from accidentally clicking the “Publish” button of your blog editing software.
  4. In addition, you’ll have your worked backed up online which most blog editors do because you’re online when you’re editing.
  5. Revision history. Under File->Revision history, you’ll be able browse through the various version of your blog post as you create it.
  6. Maybe you’re a blogger who learned about counting your words and you want to stick within a range of how many words your blog post is. Go to the “Tools” menu and selection “Word count…”
  7. You work in multiple places with a different computer at each place.
  8. Work “Offline”. With Google Gears installed you can work on your blog posts not connected to the Internet and then synchronize your blog post(s) when you’re connected to the Internet using Google Docs.


An alternative to Google Docs that has a nice suite of applications as well is ZOHO but more specifically ZOHO Writer.

Another alternative - Want a full-featured blog editor right in your Firefox browser that interfaces with a bunch of different blogging software? Check out ScribeFire.

Screen Capture

I use a Firefox plugin call Screengrab! that allows me to capture a selection of the images you see in this article from web pages. Very easy to use and sits at the bottom of your Firefox browser in the status bar ready for action. I didn’t need to resize most of the images but if I had to, I would have used the free, built-in GIMP image editor that comes with Ubuntu 8.04 that has been around for years. There are other, more sophisticated image editors but I’m trying to show you how just a few key tools can take your far.

Another way to work with images online is to install the Firefox Picnik add-on. Picnik allows you to grab an image and edit it on the web by offering you a context menu selection when you right-click on an image and select “Edit image in Picnik…” Pretty Darn Cool Tool. :)

Taking Notes

It’s always good to have something close by and available to get all that stuff that pops into your head out as soon as possible so you remain focused on the task at hand. To clear your head, use Google Notebook. At first glance you might think it’s some weenie little note pad but if you start using it for some serious note taking you’ll soon see how great and functional it is and how it can benefit you.

Here are some features:

  • Create Separate Notebooks
  • Export to a Google Document
  • Export to HTML
  • A link to Google Notebook Sits in the status bar of Firefox ready for one-click action
  • You can right-click on a web page and you’ll have an menu selection called “Note this (Google Notebook)”. This is extremely handing because you just right-click and select a web page, selected text, an image, etc. to place in a notebook.

Three ways to work with Google Notebook is 1. in a window inside Firefox, 2. open in a full webpage and 3. popped-out in its own window. I like the first choice which is the default and I can also minimize it to keep it out of the way down in the corner of my browser window.

An alternative or addition is to use postica to keep track of post-it notes that can contain pictures and you can share with others. Another Pretty Darn Cool Tool.

Social Bookmarking Managers

You need to do research and you need to bookmark sites during that research. I use del.icio.us for most of my bookmarks. I do not bookmark in the browser at all - the Firefox Bookmarks menu selection that is. Bookmarking on del.icio.us or any other social bookmarking management site allows you to have your bookmarks available anywhere you’re at as well as share with others the bookmarks you are interested in. For bloggers it also gives bookmarking love to other blog articles, which means it has the potential to drive traffic to your blog from the social bookmarking site.

Grab the Firefox del.icio.us add-on. With this add-on you can see a list of your bookmarks quickly as well as tag an article quickly with the big del.icio.us icons on the Firefox toolbar.


Creative Commons License photo credit: eLi

Using Social Networks

Are you on Twitter or using Twitter? Need to feel like you’re part of the group when you take a well-deserved break or just keep up with your fellow creators? Make sure you install the Firefox add-on TwitterFox.

TwitterFox sits in your Firefox Status Bar (yes, the status bar becomes a very functional place for your tools). If you stay logged in to your twitter account, then you’ll be interrupted with periodic pop-ups that could hinder your creativity and break your flow. I suggest logging in and out of TwitterFox during breaks and/or the beginning and end of your creative endeavors. You can always open up a Firefox tab and browse over to Twitter as well. The more steps you have to take for something that will disrupt your creative flow, the less likely you’ll be able to disrupt that flow. You don’t want to be hopping back and forth between 10 billion things running on your computer.

Promoting Websites and Blog Articles

Do you promote websites and blogs? If so, great!! If not, go and install the StumbleUpon toolbar for Firefox or IE as well as Ubuntu Linux if that applies (it’s a separate application in Ubuntu Linux). The StumbleUpon toolbar will act as a creative release as well as a gift-giving action:

  1. You can take a break from your work and randomly “Stumble Upon” various websites and blog articles. Try stumbling upon websites in areas you aren’t normally familiar or interested in. It just might renew those creative juices.
  2. Using the StumbleUpon toolbar will allow you to click on the thumbs up I like it! button when you come across a great blog post you want to share with other stumblers. This is a gift of giving from you to others, because you are giving the blogger who wrote the article you stumbled, traffic to the article, which is like a steak dinner for blog writers. :)


The Right Mood

Now that you have all the tools to connect with your creative writer, let’s not forget to set the right mood. Do you listen to music while you’re creating? Open up a tab in Firefox and browse over to Pandora. Create your own music channel or select from some of the predefined ones.

The End

At the end of your creative process, feel accomplished about what you’ve done and reward yourself by walking away from what you’ve created, laughing and relaxing. :)

Comedian Steven Wright: “I met a beautiful girl on a plane and she told me she likes Jewish cowboys. So I introduced myself as Bucky Goldstein.”


Ready To Post

For WordPress users and other blog editing softwarefollow these steps after you’re finished with your blog post.

  1. Select Share in the upper right-hand corner of Google Docs.
  2. Select “Publish as web page…”. For those folks who don’t know, when you see a menu selection with 3 dots at the end, that means there will be another screen with more information.
  3. You’ll be presented with two ways to publish to the web - “Publish document” or “Post to blog”. We’ll pick “Post to blog”.
  4. Fill in the necessary information and you should be good to go.


What kind of environment do you have setup to create?

I’m interested in how you create and what tools you use in your environment.

Filed Under Productivity | Be The First To Comment »

StumbleUpon - How To Channel Surf The Web

Posted on July 24th, 2008 | Save to delicious

StumbleUpon allows you to channel surf the web by “stumbling upon” web sites of any type as well as web sites that are of interest to you.

In there own words:

“StumbleUpon discovers web sites based on your interests.  Whether it’s a web page, photo or video, our personalized recommendation engine learns what you like, and bring you more.”

The StumbleUpon Toolbar

If you’re new to StumbleUpon go create an account and install their toolbar.

The StumbleUpon Toolbar

StumbleUpon offers a toolbar for Firefox and Internet Explorer.  By installing the toolbar you’ll be able to “channel surf” the web by simply clicking on a button that says, “Stumble!“.

Start Voting

Start clicking on the Stumble! button and you’ll be presented with web sites in random order.  As you stumble along you can train the system by clicking on the thumbs up “I like it!” button as well as the thumbs down button if you don’t like a web site StumbleUpon delivers to you.

I wouldn’t use the thumbs down too much in the beginning until you’ve used StumbleUpon for a while.  You don’t have to vote up or down for any web site.  You never know what you’ll end up liking or disliking later down the road.  However, using the thumbs up - I like it! will help train the StumbleUpon system to bring you more web sites that you might like.

I’ll point out a few more toolbar features but a more complete guide can be found at their site - StumbleUpon Guide.

Other Toolbar Features

From the toolbar you’ll also be able to email a web site you like to people you know.

Reviews - Another feature you might want to try is the review bubble.  When you land on a web site you like and you want to see what other people have said about it, click on the white bubble icon on the toolbar.  If you hover your mouse over the icons you’ll see a little pop-up window with text that describes what that button does.

Filters - Moving to the right still on the toolbar you’ll find the word “All”.  This tells the Stumble! button to select any web site out there to bring to you.  After you play with stumbling all the different web sites out there, you might want to filter sites that StumbleUpon brings you by clicking on the “All” button and select a more specific category of web sites you want SU to bring you.

Images and Videos - Other types of web sites you can stumble to our image only and video only websites.  There are icons on the toolbar just for those types of sites as well.

I think you get the picture now on how to use the toolbar.

StumbleUpon Friends

As you stumble upon various websites, SU will present on your home page, people who select sites that you’re interested in as well. This is part of the SU formula.

Tagging - There is a tagging feature as well that will give you the ability to tag web sites you stumble and like. The tag button is located on the toolbar so you can easily tag a web site. This will add to the tag cloud on the right sidebar of your SU home pages.

That’s just a quick introduction to StumbleUpon to get you going.

Here’s my profile - http://bills2000.stumbleupon.com/ - if you want to add me as a friend and I’ll add you. Feel free to leave your profile in the comments as well.

Filed Under Social Media | 4 Comments »

Google Maps Includes Walking Directions

Posted on July 22nd, 2008 | Save to delicious

Google maps now includes walking directions.  Well, in beta anyway.

Let’s say your in Omaha, NE for the College World Series and you want to walk to this place everyone’s been raving about - Zesto’s.  Well, you’d pull your handy-dandy mobile device out, browse to Google maps and type in 1202 Bert Murphy Ave Omaha, Nebraska, USA for the Rosenblatt Stadium, because that’s where you’re at, and press enter.  You would now have a map like the one below.


Roseblatt Stadium, Omaha NE

You would then click on “From here” and enter 3901 S 13th St Omaha NE 68107 and press enter. Over to the left you would see the “Walking” link. Click on that and something like the map below will display.


Walking in Google Maps

Click on “Walking” and you’ll be presented with the walking directions as show below.


Google Maps Walking Directions
Click image for larger view (800×600)

Filed Under General | 1 Comment »

22 Terrific Tweets

Posted on July 22nd, 2008 | Save to delicious

In my previous post 21 Terrific Tweets, I noted how you can find some good stuff in twitter. This time, here are 22 terrific twitter tweets. I’m tellin’ ya’ - There’s gold in them there tweets.

1. - Do you want to test iPhone apps or see what the iPhone has to offer? Here’s an easy way. Browse over to TestiPhone.com - iPhone Simulator

2. - Need to email, send messages via SMS and other Social Networks on a timed basis? You might want to take a look at sendible.

3. - Need to setup a customer list using AWeber - Checkout the experience shared at AWeber - 6 Painful Lesson Learned.

4. - Are you a small business who’s trying to make heads and tales of all this social media stuff? Check out The Hierarchy of Social Marketing by Duct Tape Marketing for some guidance.

5. - Blogging - Well, it’s not out yet but I believe Darren Rowse at Problogger is working on an article that talks about dates on blog posts. I’m assuming there will be some good discussion on old blog posts and when to take the dates off so when readers find your old posts, they don’t browse away from it because they automatically think it’s old information.

6. - Is Firefox crashing for you? Read Safe Mode at the Firefox Knowledge Base.

7. - How to Earn Your First Love Dollar by Steve Pavlina

8. - Catorgerized List of Social Media Sites by Traffikd (a continually updated page)

9. - WordPress users - Reader Question: Is WordPress Safe To Use? by Performancing

10. - Copyblogger leaves quotes on Twitter and this latest one is a good one - “a hunch is creativity trying to tell you something.” ~Frank Capra

11. - Productivity on steroids - The List to Beat All Lists: Top 20 Productivity Lists to Rock Your Tasks by ZenHabits

12. - Resources For Web Design

13. - And another Twitter Client - Twitch

14. - SEO discussions with Rae Hoffman, aka Sugarrae and Michael Gray, aka Graywolf started a live stream over at Ustream.tv. Sounds like they’ll be continuing the show.

15. - Get Started With JSON as well as Ruby on Rails for Beginners by Webmonkey

16. - Make and Share a Timeline with dipity

17. - Outlook vs. Gmail - The Definitive Comparison by Lifehacker

18. - From Mark Cuban’s blog - A Couple of My Rules for Startups

19. - Favtape.com - Create & share an instant mixtape of your Pandora bookmarked songs or Last.fm loved tracks.  Um, this one seems hot to me.  If you use Pandora or Last.fm to listen to music, start bookmarking your songs you listen to.  With Favtape.com you can listen to your bookmarked songs forward and backward.  For example, you can’t just keep skipping forward in Pandora, you have to listed to some of the music you select.  You also can’t rewind.  Well, Favtape.com pretty much let’s you do whatever you want with your bookmarked music list.  Nice!!   :)

20. - Blog Pimping or: Who Do You Want to Delight? by 43 Folders

21. - 45 Excellent Free Web Templates listed at DzineBlog

22. - The Friendfeedization Of Facebook by TechCrunch

I’d be interested in hearing about your links

What links have helped you in the last 24 hours from Twitter?

One final note - I created this blog post in Google Docs and I will probably not do that again.  I hate the HTML that was generated as well as missing all the bolds on the numbers.  All the HTML ended up all packed together.  The permalink was originally 712 instead of 22-terrific-tweets, I know that’s probably not Google Docs job.

I wanted to experiment posting this way but might have to reconsider.  Also, on the initial publish of the post from Google Docs it did not send the title of the article, the title was empty.  So I’ll go back and check out some of the options in Google Docs to see if I missed anything.

Creative Commons License photo credit: kevindooley

Filed Under Social Media | 2 Comments »

Next Page »