Internet | Peter Kao

HOWTO: Add fixed position side tab buttons to your website

UPDATE 10/18/2010: I’ve updated the image files. The link below should redirect you to the newer version.

Social media integration with your website is very important, but where do you put the links to your Facebook page or Twitter account?

The usual method of placing a few buttons or two on your sidebar helps with their visibility, but I’ve found a better way to do it: fixed position side tab buttons.

That’s a long name for it isn’t it? Here’s what it looks like:

Here’s what it looks like in action on Postertext.com:

The concept is simple: When the webpage is scrolling up and down, and there are elements that do not move (remaining in a fixed position), the elements that are not moving immediately grab your attention. For example, I’m pretty sure you’ve come across those nifty Feedback tabs that sit on the sides of a website. You remember it because it jumps right out at you. Hell, I’ve even clicked on it before. Now, you can do the same for your social media buttons.

Here’s how to do it:

1) Download the necessary button images here (I’ve also included the .PSD files): http://peterkao.com/documents/Fixed-side-tabs-v2.zip

2) Upload the images to your server.

3) Copy and paste the following CSS code into your style sheet. Remember to change the URL path of the images! Also, you can switch the position of the tabs from the right side to the left side by changing “right” to “left.”

/* ==== START Side tabs buttons by Peterkao.com ==== */

#fbtab{

background: url(http://postertext.com/sites/all/themes/frame/images/Like.png) no-repeat; /* Path to Image */

right:1px; /* change this to left: 1px; to put it on the left of the screen */

top:275px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;}

#fbtab a{display:block;width:100%;height:100%;}

#twtab{

background: url(http://postertext.com/sites/all/themes/frame/images/Follow.png) no-repeat; /* Path to Image */

right:1px; /* change this to left: 1px; to put it on the left of the screen */

top:328px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;}

#twtab a{display:block;width:100%;height:100%;}

#rsstab{

background: url(http://postertext.com/sites/all/themes/frame/images/RSS.png) no-repeat; /* Path to Image */

right:1px; /* change this to left: 1px; to put it on the left of the screen */

top:381px;height:45px;width:32px;margin:0;padding:0;position:fixed;z-index:5000;}

#rsstab a{display:block;width:100%;height:100%;}

/* ==== END Side tabs buttons by Peterkao.com ==== */

4) Insert the following HTML code just before your closing </body> tag of your website. Again, remember to change the URL to your own:

<!– START Side tabs button by Peterkao.com –>

<!– END Side tabs button by Peterkao.com –>

Your all set!

This will work for all browsers except for Internet Explorer 6, which Microsoft is killing off anyways.

Enjoy!

PS: I first found out how to create these tab buttons here, and extended it to include more social media buttons. Credit goes to schoberg.net!

- Peter Kao

Comment

April 25, 2010

Business, Internet

Focus on your core business by using websites like Shorttask and Fiverr

There are tasks that you should dedicate time on and there are tasks that are just blatant chores. With online services like Shorttask or Fiverr, you can find people that will get rid of these headaches for you. The services are cheap too, under $5 for all the offerings I’ve seen.

What kind of helpful services for your business are there? Here are a few:

From Fiverr

- I will make a colorful contact form for your landing page for $5

- I will create a custom logo for your business or website for $5

- I will write a short review of your site and bookmark your site link once on twitter,digg,reddit,stumbleupon, propeller and yahoo buzz for $5

- I will write you a new slogan for your business/product for $5

- I will become a fan and suggest your page to my over 10,000 friends for $5

Right now, I would recommend using Fiverr over Shorttask, seeing there are more people offering services. Although, I guess it doesn’t really matter since you can make postings to request specific services on both sites. Fiverr looks more user-friendly though!

Peter Kao

Comment

January 6, 2010

Internet

HOWTO: Sync Your Desktop Across Multiple Computers

I’ve finally found a way to sync files on my desktop, which is where I keep most of my most used docs and latest projects, across multiple computers.

My desktop is like my work desk. It’s crowded, and packed with a lot of junk but I like to call it organized chaos. It becomes a hassle to access project files when they are located on one of my 4 desktops (Windows XP/Ubuntu on VMware, Windows 7 on both my laptop and desktop computer.

Here’s a way to mitigate the problem:

1) Download Link Shell Extensions and install it.

2) Get the free Dropbox account.

3) Navigate with Windows Explorer to your desktop folder that you want to synchronize to the Dropbox server.

The directory path to your desktop folder should be something like this: C:\Users\YourUsername\Desktop or C:\Documents and Settings\YourUsername\Desktop

4) Right click on the desktop folder and choose Pick Link Source as it appears in the context menu.

5) Navigate to your Dropbox folder, which should be located in C:\Documents and Settings\YourUsername\My Documents\My Dropbox unless you changed it during installation.

6) Right click on the Dropbox folder and choose Drop As…then, select Junction.

Now do the same for other desktop folders (or any folder, in fact) to keep them all synchronized!

- Peter Kao

Credit source

Comment

December 4, 2009

Internet, Science/Technology

HOWTO: Download and Install Paid Apps on Canadian Android Market

Unfortunately, Canadians carrying Android phones don’t have access to paid apps on the Android Market as it is currently open for only the US and UK. This was a huge problem for me since I’m absolutely terrible with directions – I needed a GPS-software on my HTC Hero!

The current “best” GPS-app is the Copilot by ALK Technologies, and sadly I couldn’t pay and download their application. Searching on the Android Market didn’t work. Direct URL via barcode scanning didn’t work. Nothing did! Or more correctly put: there was no simple way of doing it.

In order to access paid applications with a non-US/UK Android you have to do the following:

1. Root your phone

2. Install Connectbot (only if you have an HTC Hero)

3. Install MarketEnabler

Sounds simple right? Not really. Be prepared to set aside an hour or so (it took me nearly 3 hours with lots of Googling. Hopefully this will help you shave off some time).

Are you in your comfy clothes yet? Let’s begin!

1. Root your phone

This will take up most of your time. It will take up even more time if your phone has Firmware 2.73.x.x or above, since you’ll have to downgrade your phone first. There’s currently no way to root your phone from more updated phones.

Since the steps are a bit complicated and long, I won’t paraphrase or try to simplify/clarify the instructions that I’ve found. Instead, I’ll just link them.

1. You’ll need to set up ADB/USB Drivers for Android Devices so your computer can properly communicate with your phone.

2. Downgrade Your HTC Hero So It Can Be Rooted or if you have another Android-enabled device that is newer.

3. Root your HTC Hero or if you have a G1 or Mytouch.

4. Pick and install a custom (rooted) ROM for your device. For my HTC Hero, I used MoDaCo’s Custom Hero ROM. To get this to work with other devices, you’ll have to find custom (rooted) ROM’s specific to your device. Custom ROM’s also provide better stability and speed so you get the double benefit! This step is mandatory in order to root your Android.

2. Install Connectbot (only if you have an HTC Hero)

Phew. Now, the easy stuff. Remember to skip this step if you don’t have an HTC Hero, since there’s a bug in MarketEnabler which prevents it to work with HTC Hero.

1. Download Connectbot here.

2. Open Connectbot and hit ‘Local’ when prompted for connection location.

3. Enter ‘su’ to get Super User permissions and type ‘rm -rf /data/data/com.android.vending/cache/*’.

4. Reboot, and move on to the last step!

3. Install MarketEnabler

Download MarketEnabler and select T-mobile to emulate your location to the US. Open up ‘Market’ and enjoy!

- Peter Kao

Unfortunately, Canadians carrying Android phones don’t have access to paid apps on the Android Market as it is currently open for only the US and UK. This was a huge problem for me since I’m absolutely terrible with directions – I needed a GPS-software on my HTC Hero!

1. Root your phone

2. Install Connectbot (only if you have an HTC Hero)

3. Install MarketEnabler

Sounds simple right? Not really. Be prepared to set aside an hour or so (it took me nearly 3 hours with lots of Googling. Hopefully this will help you shave off some time).

Are you in your comfy clothes yet? Let’s begin!

1. Root your phone

Since the steps are a bit complicated and long, I won’t paraphrase or try to simplify/clarify the instructions that I’ve found. Instead, I’ll just link to them.

1. You’ll need to set up ADB/USB Drivers for Android Devices so your computer can properly communicate with your phone.

2. Downgrade Your HTC Hero So It Can Be Rooted or if you have another Android-enabled device that is newer.

3. Root your HTC Hero or if you have a G1 or Mytouch.

4. Pick and install a custom (rooted) ROM for your device. For my HTC Hero, I used MoDaCo’s Custom Hero ROM. To get this to work with other devices, you’ll have to find custom (rooted) ROM’s specific to your device. Custom ROM’s also provide better stability and speed so you get the double benefit! This step is mandatory in order to root your Android.

2. Install Connectbot (only if you have an HTC Hero)

Phew. Now, the easy stuff. Remember to skip this step if you don’t have an HTC Hero, since there’s a bug in MarketEnabler which prevents it to work with HTC Hero.

1. Download Connectbot here.

2. Open Connectbot and hit ‘Local‘ when prompted for connection location.

3. Enter ‘su‘ to get Super User permissions and type ‘rm -rf /data/data/com.android.vending/cache/*‘.

4. Reboot, and move on to the last step!

3. Install MarketEnabler

Download MarketEnabler and select T-mobile to emulate your location to the US. Open up ‘Market’ and enjoy!

- Peter Kao

Comment

November 19, 2009

Business, Internet

Twitter for Entrepreneurs

Here’s another website that uses the Twitter model: it’s called Sprouter - just launched this week!

Check out their video tour.

I don’t use Twitter anymore, but I’m enjoying this neat little startup though. With Twitter, there is too much noise from too broad of a network. All I see when I log in to my Twitter account are short, barely-descriptive statuses written by bored people. Too often I see the extended version of these statuses on Facebook, so why even bother logging in at all? (More beef on Twitter later in my upcoming blog post)

I think Sprouter (and also Yammer) did exactly what Twitter needed to do, but didn’t: divide and conquer. There is a need for micro-blogging, but it is important for users to sift through the sea of statuses. Twitter could have done that by implementing filters to segment different interest groups, but they decided to invest in the unfamiliar realm of real-time search instead. This is great, but it requires active involvement – the act of ‘searching’ – too bad people are lazy online!

In the near future, there will be more and more startups applying the micro-blogging concept (or Twitter model). And Twitter will be a dead bird – a martyr for micro-blogging – the Youtube comments of the internet.

You can follow me on Sprouter here: http://www.sprouter.com/peterkao

Peter Kao

Comment

November 12, 2009

Business, Ideas/Notes, Internet

Halfbakery.com – A Place for Wild Business Ideas

There are great business ideas, and then there are half-baked ideas. This is where halfbakery.com comes into play. It’s a website that is solely dedicated to ridiculous, improbable, and naturally – hilarious business ideas.

To give you a sense of what the website is like (because, you know, visiting a link yourself is hard) take a look at this invention, entitled, “evil laugh activated hand dryer.” It works as follows: “instead of a button or infrared sensor, people sometimes rub their hands together in the airstream, activate this hand dryer by laughing evilly.” Look! There are even pretty pictures,

Basic model

Activate!

Now, this is my kind of humour!

To give the website some credit though, there are some serious ideas. For example, the “Panic PIN“ idea, which is ranked as the top idea on the website, works by “entering [an] alternate ATM PIN number [to summon] help.” The idea is that if you are forced to withdraw cash, you can alert the police without the robber knowing.

There are great business ideas, and then there are half-baked ideas. This is where halfbakery comes into play. It’s a website that’s solely dedicated to ridiculous, improbable,…[add more], and naturally, hilarious business ideas.

Now this is my kind of humour!

Look around, you might even find a solid business idea to stea- err, I mean, examine.

Peter Kao

Comment

November 11, 2009

Internet

eCornell Entrepreneur Online Video Contest

Here’s a broadcast for all you fire-breathing entrepreneurs. I received an email from a representative for Cornell University regarding their upcoming online video contest.

Details for the contest:

“Now through November 30, eCornell is inviting entrepreneurs who are developing (or have already developed) a new product or service to submit a 30- to 60-second video that explains or demonstrates their process for understanding what customers want and satisfying their needs. The first-place winner will receive a full scholarship (a $3,500 value) for Cornell’s newest online certificate program, A Systems Approach to Product and Service Design, which arms entrepreneurs with a unique eight-step process for effective product development. Second- and third-place winners will have the opportunity to enroll in two eCornell product design courses each, free of charge ($1,250 value per course). Winners will be selected based on quality of response, creativity, and methodology, and will be announced on December 14, 2009.

This is a great opportunity for your readers to connect with the brightest minds in the startup community, generate brand awareness for their respective organizations, and claim their FREE opportunity to win a full scholarship to one of the top universities in the nation. Additional information about the contest can be found at http://www.ecornell.com/l-entrepreneur-video-contest/. “

Go get them, dragons!

Peter Kao

Comment

November 11, 2009

Internet

HOWTO: Read Online Without Killing Your Eyes

I spend a lot of my time reading online articles. And if you’re like me, your eyes start to get dry and light-sensitive (to the monitor) after a few hours of reading.

To ease the pain, I’ve found two Firefox add-ons that help:

- Greasemonkey + Tired Eyes script (only works with Greasemonkey)

- NoSquint

Now, before you go ahead and download/install the first app, I’ve prepared my own version of the Tired Eyes script – available for download here. I will explain the differences later below.

Greasemonkey is an add-on that changes how a website looks by running user-generated javascript code. One of the script that I use is the Tired Eyes script which changes the text and background colors of any website. I’ve found that the color combination used for the script isn’t ideal for me, so I’ve played around with the colors a bit. The end result is this:

see the difference!

Although the top image is better to read in this example (partially due to pixelation), after a few hours the bright-white background feels like a flashlight in your eyes. The only way to really feel the difference is to try out the script and then turn it off by hitting the assigned (changeable) F2 hot-key. You will soon realize how bright your monitor really is, and how much light is shine through your eyes. No wonder our eyes feel tired sometimes! Really, try it out yourself! Download Greasemonkey + My ‘Darker’ version of the Tired Eyes script.

The second add-on, NoSquint, remembers the zoom level you’ve set on any website. For example, I always increase the font size of Wired.com articles just because I find their font size a bit too small. This add-on remembers how much I’ve zoomed, and displays the website at the last zoomed level – saving me from having to zoom-in after every visit.

Hope this helps! Protect your eyes, and happy reading

Edit: You can also use a bookmarklet called Readability if you are not using Firefox. It strips a webpage of annoyances and leaves only the necessary text and pictures. Thanks Rajesh for the mention!

Peter Kao

Comment

June 5, 2009

Business, Internet

Odds of Success Calculator

I found this somewhere in my massive list of unread emails today.

The calculator asks you several things about your business or startup and supposedly compares your results to real-world data to calculate your chances of sucess!

Take a look!

- Peter Kao

Comment

March 5, 2009

Internet

The Great Innovation Competition

Hey Canadian students! Do you have a wicked idea that will change the world? Need some startup money to get started?!

Canadian Business is having their annual The Great Innovation Competition. The winner will win:

* Up to $50,000 in engineering and consulting services from Nytric Ltd. towards developing a prototype

* A free feasibility study by Nytric Ltd. valued at $20,000

* Intellectual Property legal services from Bereskin & Parr, valued at $10,000

* Business and financial advisory services from nbp, valued at $10,000

* Invaluable publicity including a profile in an issue of Canadian Business Magazine

All it takes to register is provide details under 1000 characters for the following categories: Innovation, Product Status, Marketing Status, Competitive Analysis.

Entries due by May 1, 2009.

Click here for more details.

Good luck!

- Peter Kao

Comment

Previous Next

Focus on your core business by using websites like Shorttask and Fiverr

HOWTO: Sync Your Desktop Across Multiple Computers

HOWTO: Download and Install Paid Apps on Canadian Android Market

Twitter for Entrepreneurs

Halfbakery.com – A Place for Wild Business Ideas

eCornell Entrepreneur Online Video Contest

HOWTO: Read Online Without Killing Your Eyes

Odds of Success Calculator

The Great Innovation Competition

About me

Where I am

Categories