Simple jQuery and CSS3 Slideshow Tabs

A slideshow and tabs is pretty common nowadays in any modern website. There is a ton of way to do this and many free and paid tools available for this feature. This make it very easy to create and it will always amaze people who see it. Basically, we will need at least Javascript to do this, CSS to style the slideshow and tabs as we wanted, and then finally the special HTML markup which make it possible. There is also a slideshow which make use of Flash.

The solution I tried to made right now is a very simple and basic one. It make use of simple jQuery to catch the click event and switching tabs, as well as the slideshow, the CSS to style it as much as we wanted and a simple HTML markup in one unordered list.

Best practice to clearing default text with jQuery

Having default text that we later removed when retrieving user input is common in today’s website. Many web developer use this to enhance usability of the website, so user know what to type in what field. There is a lot of way to do this, using both focus and blur event. For example, this is the shortest and easiest way that is commonly used:


<input type="text" id="example-field" name="example-field" value="Your name" onfocus="if (this.value=='Your name') this.value=''" onblur="if (this.value=='') this.value='Your name'" />

However, this approach will be a pain when you are managing a lot of input fields. You will need to type the default text three times, which can lead to a trivial typo. Also, since we check againts the default value, we will not be able to accept this value. Here is the solution, by using the simplicity and power of jQuery, this is a clean and a better way to do this.

August promotion, get 25% discount on PSD to XHTML service

Only on August 2010, you will get 25% discount on my service, which includes:

  • PSD to XHTML and CSS conversion (start at $45)
  • PSD to WordPress conversion (start at $130)
  • PSD to Magento conversion (start at $270)

This promotion only apply to new customer and only for the first transaction. 🙂

To get a free quote, please contact me with your project detail.

July Promotion on PSD to XHTML service

Recently I try my luck on offering service for PSD to XHTML and CSS conversion on Kaskus, the biggest local forum in Indonesia. I have done many PSD to XHTML and CSS conversion before, often, I also do conversion to WordPress and Magento. While I want to list my previous work here, unfortunately, due to the contract, I’m not permitted to list them. So basically, you can see how well my blog markup is for an example of my work. 🙂

Details for my service can be found here. For international user, you can just contact me for a quote.

For this service, I will offer a promotion every month. For July, you will get a limited offer for a free PSD to XHTML and CSS conversion, only for 1 person. The following condition is apply for this promotion:

  • You must agree and give me permission to list the work on my portfolio page and Kaskus (with a clear position of me as the PSD to XHTML and CSS converter, the design is still yours of course, no worries :))
  • Turn around is in a week (I’ll work on it when I have time, but I’ll make sure it completed in a week)
  • Only for 1 page (additional page will be charged with normal price)
  • I will choose the design that sent to me
  • Only for client that haven’t working with me before (sorry for returning client :))

Deadline is August 1. Your design will be converted to XHTML and CSS in a week after the deadline.

Blog redesign

Welcome to my new redesigned blog! It’s been a year and a half since the last time I changed the design. I have always wanted to change it, but I just always don’t have enough time. 🙂 I know I’m not that good enough in designing, but at least, this is the best design I ever made until now!

The idea behind this design is, to make a simple, usable layout and still looks beautiful. There is a lot of tutorial on the web that helped me when making this. I try to make the website small in size, so you’ll able to load it fast enough. There is also a cool trick on the background, which still make the markup small without much wrapping div over div to accomplish the effect. I also realize the importance on social networking nowadays, so I add links to some of my account. 🙂

How to create WordPress template part 2

Now is the part 2. If you haven’t read the part 1 yet, go here to read it. If in the part 1 we have make the graphics we need to build the template, now it is the time to play with CSS and HTML. But first, before we going further, we must first understand the WordPress template hirearchy. The WordPress template, in the very minimum, need at least two files, style.css and index.php. We can however have more files that recognized by WordPress to deliver different look on different requested page. But now, we create the standar template, at least we have header.php, footer.php, sidebar.php, index.php, comments.php, functions.php and style.css.

How to create WordPress template part 1

Do you want to create your own WordPress template? It is not hard actually if you have enough knowledge of XHTML (or HTML) and CSS, and a little basic of PHP. This guide will split into multiple part as it is quite long. This is my way of creating WordPress template, so it might different than you. The first part is for preparation and designing, I haven’t touch the coding part yet, it will be on second part. I will make it with example and this example will be available to download for everyone later. Hehe… 🙂

First is the preparation. For me, I will take a paper and a pen and start thinking of how the template will look like. Hmm… As of now, I will create a simple templates like usual blog template. One header with logo and description on top, one sidebar on left side, the content is on the center (right side from the sidebar), and one footer on bottom. That’s it. Okay, once you are ready then, let’s open your favorite graphics editor. For me, it is GIMP.

Testing the new templates

Here I create my first and only templates for WordPress, the result is as you can see on your screen. It still buggy I think, so please report me whenever you see something unexpectedly happens while navigating here.

This templates should works fine on Mozilla Firefox 3+ and Google Chrome. Opera 9 shows fine too, but have some margin problem. Internet Explorer didn’t works well, I can’t resize the element height so you will see a scrollbar on your browser window and a scrollbar inside the element. There also an error reported that I didn’t have clue yet.