Introduction to 'Smush It' the best image optimiser from Yahoo!

If you wanna put the large image on your website(wider than 600 pixel)
like the picture below:

Click on image to view full size

Many webmaster often use function Save for Web in Adobe Photoshop. but the sharpness of the image will reduce if you use this function.

Comparison Images

If you wanna put the large image on your website with original sharpness , minimal size (for faster page load). I think 'Smush it' may be your answer.




Smush It is the image optimizer which developed by Yahoo Developer

Let's see how it works.

-Go to Smush It page (www.smushit.com) or Click Here

-Then Click at Uploader
-Browse your image and then just wait....



-Finished



-Very impressive result (24.89% reduction!)



You will love it!

---

Webmaster of Thai Othello Page

Read more...

How to Enlarge Jcomments Avatar

Jcomments is one of the best joomla comments system.

Many great features:
-Multi Language
-Simple to use
-Support Smilies
-Custom BBCode
-Import comments from others components
-etc.

You can try it here:
Demo JComments

Download JComments here:
Download JComments

This component is working almost perfectly. But the default JComments' Avatar is too small (just 32x32 px)

See how small it is

If you want to enlarge it, Just follow my step here:



Step 1: Open the file style.css
(/components/com_jcomments/tpl/default/style.css)

Step 2: Looking for this line:

/* Avatar */
#comments .comment-avatar img {width: 32px}

Step 3: Change 32px to the size you want: (I prefer 48px)

/* Avatar */
#comments .comment-avatar img {width: 48px}

Finish: Save the file style.css, upload it back to its location, open your page and see the results!!

Now, JComments' Avatar is 48x48 px

---

Webmaster of Thai Othello Page

Read more...

How to Change Database Collation to UTF-8

In some web hosting, They use Cpanel and Fantastico installer. It will automatic install your website and database. So You can not set your database collation by yourseft.

Cpanel Interface

Bad luck, Some web hosting set the default database collation to Latin Swedish. But if you wanna do Thai, Chinese, Korean Website. You need to set the collation of database to UTF-8.

How to change this!!!!

If the database is not UTF-8, The display of your language will not display correctly.

As you can see in this picture.

Don't worry there's a way :)


For changing the collation of database, You can manually do it in notepad or dreamweaver.
But it's not very easy to do. So I will explain you the easiest way:

Step 1. You have to download Tool from Phoca for Changing Collation (Click here to Download). It's very great.

Step 2. After finish downloading, Right click and extract the file to your PC. (If you have WinZip, or WinRAR, etc.)



Step 3. You will see the folder name tool_phoca_changing_collation.... (Tooooo long name). Rename the folder to collation.

Rename the folder name to collation

Step 5. Uploading the folder to the root of your website.




Step 6. Okay, It's almost finish... Open your web browser and enter this URL: (Yourdomainname/collation/index.php)




Step 7. You will see this screen appear.



Step 8. Enter the field and click Submit

• Database Host: Enter your host name


• Database User: Enter your username for connecting to database


• Database Password: Enter your password


• Database Name: Enter your database name


• Database Collation: utf8_general_ci

Step 9. Finish!!! Now the database change to UTF-8, Check your website and see the language display!





Thanks, Phoca Team Developer for this great stuff!!! :)

---

Webmaster of Thai Othello Page

Read more...

How to Insert Iframe Code in Joomla Module

Sometimes when you wanna use Iframe code (HTML) in joomla module. Joomla always removes your code which you just inserted. For example, this code...

<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>

This code should show this:

But in Joomla! if you insert the iframe code directly: (see the picture below)

When you click update button. What happen!! The code's suddenly removed!!! Nothing appear in Editor Space.

Don't worry, That is not a problem. Joomla WYSIWYG Editor always remove some HTML code for security. (For more details read here - Joomla Filtering Options)

So, Is it possible to insert iframe code in Joomla?

Sure, Let's see how to do it!


For inserting iframe code in joomla module, You have to choose new wrapper module instead of custom HTML module.

- Go to Admin Page => Extensions=>Modules Manager=> New and then Choose wrapper

- There are some parameters here:

- If you don't know what to insert there, just look at your iframe code again:

<IFRAME src="http://financialtools.stockgroup.com/charts/SGChartDB.asp" 
frameBorder=0 width=200 scrolling=no height=227></IFRAME>

- Insert the parameters by following your iframe code

• Module Class Suffix - Leave it blank (You can read more detail of module class suffix here)


• URL - Depend on your iframe code


• Scroll Bars - Depend on your iframe code


• Width - Depend on your iframe code


• Height - Depend on your iframe code


• Auto Height - Yes or No is no effect here


• Auto Add - Yes


• Target Name - Name of The Iframe - (More explanation of iframe name available here)

- After finishing insert the parameters save the module and publish it.

- The iframe module will show on your Joomla site!

---

Webmaster of Thai Othello Page

Read more...

How to Make Electric Effect by Photoshop

Last months I designed this poster for Thailand Othello Championship 2009 by Adobe Photoshop

Many peoples loved it. You may wonder how did I do this electric effect on this poster.
This tutorial will show you how to do...

Step 1: Create New file (Any dimension)in Adobe Photoshop and Press 'D' to reset the colors of foreground and background to default. (Black and White)

Step 2: Choose=> Filter and Then Render=>Clouds

You should get the results like this picture below:

Step 3: Now Click on=> Filter and Then Render=>Difference Clouds

The results:

Step 4: Press CTRL+I to invert the color

The results:

Step 5: Press CTRL+L and move the middle arrow to the right.

Step 6: Adjust the color by press CTRL+U (Don't forget to tick on Colorize), You can change to your prefer colors. (for this example, I change to Blue.)

Step 7: After you have satisfy the color of your electric effect, then Save to PSD format.
For now, You are finish creating electric effect.

Step 8: And When You wanna use it...

• Open your electric file.


• Delete Black color from your electric effect(For doing this choose=>Select=>Color Range...=>Click on Black color and Press Delete button)


• At your electric layer's Blending Mode: Choose Screen


• Drag and Drop it to the picture which you wanna put this effect on.


• Adjust it until you satisfy with the result


• Finish

---

Webmaster of Thai Othello Page

Read more...