You can of course use the Javascript:

<a href=”javascript:window.open(url);”>Your link here</a>

But this is ugly and dirty, both in terms of the accessibility and pop-ed up window itself. Look at the code snippet above, the a href tag is not linking to a link but instead it is running some javascript. This means the whole meaning of the link is gone!

Okay, you got the point. So, how do we make it accessible and good, with clean code?

Very easy, we use GreyBox. Basically, GreyBox makes our life easier by supplying the codes needed to build beautiful and clean pop-up windows. GreyBox uses the “rel” attribute. rel is used to describe the relationship between the current page and the href destination of the anchor. The whole line becomes something like this:

<a href=”http://google.com/” title=”Google” rel=”gb_page_fs[]“>Launch google.com in fullscreen window</a>

It’s very easy to setup and use GreyBox even if you are a first time user… just follow the instructions on their website. It’s FREE to download and use!

Why GreyBox?

• It does not conflict with pop-up blockers
• It’s only 22 KB!
• It’s super easy to setup
• It’s super easy to use
• You can easily alter the style as it is controlled through CSS

Now, GreyBox really creates pop-up windows that don’t suck!

Now, the conventional anchor links always zip you to the marked lines immediately. I have always found this to be somewhat jumpy. So, when I recently stumbled upon this excellent smooth anchor links script at david walsh blog, which demonstrated the ability to smoothly take a user to a specific portion of a page, aka the anchor, I was totally amazed!

This is definitely one of the cooler scripts I have seen in a long time, and I can’t think of a reason to not share it with you! I hope you like the smooth scrolling effect and will use it in your web pages or blogs! Happy smooth-scrolling!

However what’s more common is perhaps you are installing WordPress in a sub-folder of an existing website, and after blogging for a while, you are thinking “Hey, how can I list my blog posts on my homepage?”

It’s really easy actually because WordPress has made life so much easier for us. In order to use any functions in WordPress (such as display latest blog posts, display latest comments, etc), you simply need to include the file “wp-blog-header.php”. For example, to display my latest 10 blog posts in my Flash Games page, I simply put the following few lines of code:

<?php
define(’WP_USE_THEMES’, false);
require(’../wp-blog-header.php’);
query_posts(’showposts=10′);
?>

<ul>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a><br />
<?php comments_popup_link(__(’Comments (0)’), __(’Comments (1)’), __(’Comments (%)’), ‘grey’); ?>
<?php endwhile; else: ?>

<?php endif; ?>
</ul>

Apart from display the latest 10 posts, it also displays the number of comments each post has.

OK, the codes above may look a little gibberish, but the important thing is by including the file “wp-blog-header.php”, you will have access to all the WordPress functions in an instant!

Wonderful isn’t it? With this you can easily integrate WordPress into your existing website and make the website easier to update by making use of WordPress CMS capability.

The first icons website is Iconfinder.net.

The search feature is very intuitive as it incorporates AJAX. The moment you enter any keyword it will auto-complete and suggest some related keywords. In complete Web2.0 spirit, all icons are tagged. Once you have found the icon you are looking for in the search result, click on it to see more details such as the designer, the license and a download link.

Do use the download link (and not right-click-save) to download the icon as this will retain the properties of the icon, such as the transparency property.

I am not sure how many icons are there, but some of my search results return thousands of results. So, I guess their database hosts at least tens of thousands of icons. Anyway, technically speaking, these icons are not all free completely. Most of them fall under one of these licenses, Creative Commons, GPL and LGPL.

Another icons website worth taking a look especially if you can’t find the perfect icon you are looking for in Iconfinder.net, is Iconlet.com. This icons website is less sophisticated, but it gets the job done.

Just like the first website, Iconlet.com also allows you to easily search for icons, view who’s the designer and license information, and of course save the icon for your own use.

So, there you are two more useful websites to add to your bookmark/favorites. Use them whenever you are designing a website or a blog. Make your website and blog stand out with beautiful and professional icons.

But if you are looking for a quick solution… then read on. I was doing a quick simple page for a friend of mine when I found myself using the <ul> tag. Check out the following screen shots.

<ul style=”margin-left:-15px; color:#3056AE”>
<li>List item 1
<li>List item 2
</ul>

The list looks perfect in Firefox, right or not? I put in “margin-left:-15px” to shift the items to the left slightly. The indentation is just nice. I love you Firefox!

However, it’s a totally different sight for Internet Explorer, the world’s most used web browser. It looks horrible. List items are shifted too much to the left, even run off the screen! I am not sure if this is a bug, or just a weird behavior.

There might be a solution… perhaps a better one in CSS, but I am not going to do too much of research in this. I prefer a quick and dirty workaround. This is what I did to fix it. At least seems to have been fixed.

1. Download PHP Browser Detection script. Oh yeah, I forgot to mention my script is coded in PHP. Save the downloaded script file as “browser_detection.php”.

2. Put the following code at the top of the existing file.

<?php
include “browser_detection.php”;

if( browser_detection( ‘browser’ ) == ‘ie’ )
$margin = “20px”;
else
$margin = “-15px”;
?>

The above code basically uses the function browser_detection to check what’s the browser type we are using, and sets the margin accordingly.

3. Change the existing code to the following.

<ul style=”margin-left:<?php echo $margin; ?>; color:#3056AE”>
<li>List item 1
<li>List item 2
</ul>

That’s it. Now view the list items in both Internet Explorer and Firefox! They look great in both! Congratulations!

Should you have a nicer solution in CSS itself, please do let me know.