Download the Windows Flash Player 10 Plugin content debugger (for Netscape-compatible browsers) (EXE, 2.09 MB)

หลังจากลงแล้ว restart FireFox 1 รอบครับ ทุกครั้งที่เราเล่น flash มันจะไปเก็บ logfile ไว้ที่ path นี้

อย่าลืมสั่ง show hidden files and folders ก่อนด้วย ถ้าไม่มีก็สร้างไฟล์เปล่าไว้ได้เลยครับ
Windows XP

C:\Documents and Settings\{user}\Application Data\Macromedia\Flash Player\Logs\flashlog.txt

Windows Vista

C:\Users\{user}\AppData\Roaming\Macromedia\Flash Player\Logs\flashlog.txt

support linux, osx ด้วยครับ ดู path ได้จากตอน setting flashtracer ได้เลย

ทีนี้ก็ลง add-on ตัวนี้ครับ FlashTracer มันจะทำหน้าที่ไปอ่านไฟล์ flashlog.txt ด้านบนแบบ real time หน้าที่เราแค่ set path ไปเรียก flashlog.txt ให้ถูกต้องเท่านั้นเอง

ต่อไปการ debug งาน flash ขอบอกว่า สะดวกสุดๆเลยหล่ะครับ

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
	$('#Wish').keyup(function(){
		var max = parseInt($(this).attr('maxlength'));
		if($(this).val().length > max){
			$(this).val($(this).val().substr(0, $(this).attr('maxlength')));
		}
		$('#WishMax').html('เหลืออีก ' + (max - $(this).val().length) + ' ตัวอักษร');
	});
});
</script>
 
<textarea name="Wish" id="Wish" maxlength="10"></textarea>
<div id="WishMax"></div>
 

ที่สำคัญ free! พร้อมด้วยคุณสมบัติที่ดีเยี่ยม เร็วและมีประสิทธิภาพ (เวปเขาโม้ไว้ว่าแบบนี้)
ทำงานได้บน IIS 5.0, 5.1, 6.0, และ 7.0.

วิธีการติดตั้งก็ไม่ยาก โดยเมื่อดาวน์โหลดเสร็จแล้วให้  unzip
จะมีไฟล์ที่จำเป็นอยู่ 1 ไฟล์ ใน folder lib/IsapiRewrite4.dll

ขั้นตอน
1. ให้สร้าง directory C:\Windows\System32\inetsrv\IIRF แล้วนำ IsapiRewrite4.dll ไปวางไว้
2. สร้างไฟล์ชื่อ IsapiRewrite4.ini ไว้ที่ Desktop ก่อน ตัวอย่างนี้สำหรับป้องกัน hotlink (แอบมาใช้รูปของเราโดยเอา url รูปไปดื้อๆ มันเปลือง bandwidth)
ตัวอย่างไฟล์ IsapiRewrite4.ini

RewriteLog  C:\temp\iirf
 
RewriteCond %{HTTP_REFERER} 		^(?!HTTP_REFERER)
RewriteCond %{HTTP_REFERER} 		^(?!http?://(?:www\.)mysite.com/)   [I]
RewriteCond %{HTTP_REFERER} 		^(?!http?://(?:images\.|www\.)?(cache|google|googlebot|yahoo|msn|ask|picsearch|alexa)\..*)   [I]
RewriteCond %{HTTP_USER_AGENT}		^(?!.*google|yahoo|msn|ask|picsearch|alexa|clush|botw.*) [I]
RewriteRule .*(?!logo).*\.(?:gif|jpg|jpeg|png)$ 	/hotlink.gif   [I,L]

3. นำไฟล์ IsapiRewrite4.ini ที่ Desktop ไปไว้ใน C:\Windows\System32\inetsrv\IIRF
4. กำหนด permission user ของ IIS (ขึ้นต้นด้วย IUSR_***) ให้ read ได้ทั้ง 2 ไฟล์คือ
C:\Windows\System32\inetsrv\IIRF\IsapiRewrite4.dll
C:\Windows\System32\inetsrv\IIRF\IsapiRewrite4.ini

5. เปิด Internet Service Manager (MMC) ขึ้นมา
6. ไปที่ Web Sites ที่ต้องการใช้ rewrite แล้วคลิกขวาเลือก properties
7. ไปที่ ISAPI filter กด add ตั้งชื่อว่า Ionic Rewriter แล้ว browse ไปที่ C:\Windows\System32\inetsrv\IIRF\IsapiRewrite4.dll
8. restart IIS เสร็จพิธี

ถ้าอยากได้ตัวอย่าง rewrite อื่นๆ ไปที่นี่ เลยครับ

Credit เต็มๆ ให้ ผู้พัฒนาครับ
Mr.Khwanchai Kaewyos (LookHin)
http://www.LookHin.com
http://www.unzeen.com

ใช้ดี ใช้ง่ายครับ ได้ทั้งแบบ Design mode และ Code mode
highlight เลือกสร้าง block จาก table, div ได้เลยทันทีสุดยอด

แบบที่ 1 กดสร้าง block (loop) แล้วตั้งชื่อ

แบบที่ 2 highlight เลือกส่วนที่ต้องการ กดสร้าง block (loop) แล้วตั้งชื่อก็ยังได้

download ได้ที่นี่

ค้นไปค้นมาเจอ 2 วิธี
ง่ายสุด 1 ใส่ css เพิ่ม

input[type=file] /* FF input file */
{
	color: #333333;
	background-color:#FF0000;
}

background-color: -> อันนี้ไม่มีผลนะครับใส่ไว้ให้พวกอยากลองจะได้ไม่ต้องไปเสียเวลาพิมพ์

อีกวิธีแบบเทพไปเลยถ้าต้องการ
http://www.quirksmode.org/dom/inputfile.html

รู้สึกจะเป็นมานานแล้วก็ยังไม่ได้รับการแก้ไขเสียด้วย
อ่านรายละเอียดการแจ้ง bug https://bugzilla.mozilla.org/show_bug.cgi?id=52500

Add-ons  FireFox ตัวโปรดอีกตัวนึงของผมเลยครับ หลังจากไม่ได้ใช้มานาน เพราะ upgrade FireFox เป็น v3 แล้วตัว add-ons มันไม่ support วันนี้นึกขึ้นได้ลองไป search ดูอีกครั้งปรากฏว่ามี experimental version ที่ใช้งานกับ FireFox 3 ได้แล้ว เลยรีบโหลดทันที ความสามารถของมันคือเอาไว้ view source code หน้า html ครับแต่ข้อดีสุดๆ ของมันก็คือ

มันจะอ่าน html ออกมาในลักษณะ ของ DOM แสดงออกมาเป็น block แยกสีอย่างชัดเจนดูได้ง่าย และที่สุดยอดสุดๆ คืออะไรรู้ไหมครับ ถ้าคุณทำงานที่เกี่ยวข้องกับ ajax บ่อยหรือพวกสั่ง javascript write content เนี่ยะมันจะ view ออกมาให้เห็นพวก html ที่เราสั่ง write ออกมาให้ด้วยเลย (ใน Web Developer extension ก็ทำได้แต่ก็ไม่สวยเท่าตัวนี้) เทียบกับสมัยเขียนโปรแกรมยุคแรกๆ คุณคิดดูใช้ IE + Notepad หรือ ขนาดใช้ EditPlus ก็เหอะ debug งานแต่ละทีเสียเวลามาก ยุคนี้มี tool ช่วยเยอะทำให้งานหลายอย่างเสร็จได้เร็ว อย่าเสียเวลาไปลงซะเดี๋ยวนี้เลย download ได้ที่นี่

# cd /usr/ports/www/nginx
# make install

choose :

HTTP_MODULE
HTTP_REWRITE_MODULE
HTTP_SSL_MODULE
HTTP_STATUS_MODULE
.....

2. Install php

# cd /usr/ports/lang/php5
# make install

choose :

CLI
CGI
SUHOSIN
IPV6
FASTCGI
PATHINFO
.....

3. Install php-fpm freebsd ports

# wget http://php-fpm.anight.org/downloads/freebsd-port/php-5.2.6-fpm-0.5.9.tar.gz

Extract and copy

# tar xvzf php-5.2.6-fpm-0.5.9.tar.gz
# cp -R ./php-5.2.6-fpm-0.5.9 /usr/ports/lang/php5-fpm

# cd /usr/ports/lang/php5-fpm
# make install

choose :

CLI
SUHOSIN
PATHINFO
.....

4. Configuring

update /etc/rc.conf

Add these lines :

nginx_enable="YES"
php_fpm_enable="YES"

save.

edit /usr/local/etc/nginx/nginx.conf

Find this lines in nginx.conf and adjust :

root /usr/local/www/nginx;

location / {
index index.php index.html index.htm;
}

location ~ .php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME /usr/local/www/nginx$fastcgi_script_name;
include fastcgi_params;
}

Edit /usr/local/etc/php-fpm.conf
Find these lines :

<!– <value name=”user”>nobody</value> –>
<!– <value name=”group”>nobody</value> –>

change nobody into www (or your www user)

<value name=”user”>www</value>
<value name=”group”>www</value>

Run the services

# /usr/local/etc/rc.d/php-fpm start
# /usr/local/etc/rc.d/nginx start

5. Testing

# cd /usr/local/www/nginx
# nano info.php

<?php
phpinfo();
?>

save.

done.

Compatible with Apache's log file format

log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                        '$status $body_bytes_sent "$http_referer" '
                        '"$http_user_agent" "$http_x_forwarded_for"';

โดยตัวระบบจะไปสร้าง icon, theme, css ให้เป็นโครงสร้างของ phpBB เลย ทำเป็น .zip ให้เสร็จสรรพ เราก็เอาไป install เป็น theme ของ phpBB ได้ในทันทีครับ ตัวอย่าง panel ใช้ง่ายแค่ลากไป-มา เท่านั้น

เข้าไปลองใช้งานกันเลย Colorizeit

รูปแบบที่ผมชอบที่สุดคือแบบนี้ เห็นๆ กันไปเลยว่าไฟล์แก้เมื่อไหร่ Type เป็นอะไร และขนาดเท่าไหร่ เนื่องจากบางทีเรามีชื่อไฟล์ตรงกัน แต่เป็นงานคนละงานแล้วเราอาจเปิดเพื่อมา copy พอทำไปทำมาตาเริ่มลาย อาจจะเปิดไฟล์ขึ้นมาแก้ผิดไฟล์เอาได้

มาเริ่มกันเลย
1. click ขวาเลือก drive ที่ต้องการจะแก้ไข แล้วเลือก Properties

2. เลือกประเภท folder type template ให้เป็น Documents และเลือกให้มีผลกับ subfolders ด้วย

3. กลับมาที่ folder ก็จัดการ click ขวา เลือก column แสดงข้อมูลได้ตามต้องการเลย โดย click ขวาที่หัว column แล้วเลือก More...

4. สำหรับผมเพิ่ม Date modified และจัดการเลือก View ให้เป็นแบบ Details

5. เมื่อเรียบร้อยจะสั่งให้มีผลกับทุก folder ให้ไปที่เมนู Tools -> Folder Options

* ถ้าใครหา เมนู Tools ไม่เจอให้ เลือกตามรูป เมนู Tools จะปรากฏขึ้นมา

6. เลือก Apply to Folders แล้วกด Apply เป็นอันเรียบร้อย
* ผมขอเสริมอันหนึ่งคือ Hide extensions for known file types จะได้แสดงนามสกุลไฟล์ให้เราเห็นกันเลย มีประโยชน์หลายอย่าง เช่น virus ที่ปลอมตัวมาเป็นไฟล์ icon น่ารักๆ เราไม่เห็นว่า นามสกุลมันคือ .exe เราก็เผลอไป click ก็จะโดน virus เล่นงานเอา หรือ save ไฟล์ .php แล้วกลายเป็น .php.txt ฯลฯ

ถ้า view แบบ Code เห็นแบบนี้แสดงว่าโดนความฉลาดเข้าซะแล้ว

หรือ click ที่ text แล้วดูตรง Properties แล้วเห็นแบบนี้ก็โดนความฉลาดของ dream เข้าแล้วเหมือนกัน

วิธีแก้ก็ต้องไปยกเลิกโดยเข้าที่เมนู Edit -> Preferences แล้วเลือกตามนี้ (รูปนี้เป็น DreamWeaver 2004 version อื่นๆ ก็จะคล้ายๆ กัน)

ผลคือเราเข้าไปอยู่ใน folder E:\Misc\msn ซึ่งอยู่ออกมา 1 folder แค่นี้ก็น่าจะสะดวกแล้วหล่ะครับ ลองกรอกเป็น E:\Misc\msn\logo\1 ดูโดย 1 ไม่ใช่ folder แต่ผมกรอกหลอกมันเพื่อดูผลปรากฏว่าเราอยู่ใน folder ที่เราต้องการพอดี

หวังว่าคงเป็นประโยชน์ครับ

2. ลูกค้าอยากได้ Data Dic หรือชื่อเต็มๆ คือ Data Dictionary phpMyAdmin ก็มีให้อยู่แล้วนะ

สำหรับ phpMyAdmin นั้น "มีดี" อยู่อีกเยอะไว้จะมาเล่าในครั้งต่อๆ ไป

ที่พูดมาทั้งหมดแค่จะเตือนตัวเองว่า "มองมุมเดิม แต่มองให้กว้างขึ้น" จะเห็นอะไรชัดขึ้น

SELECT column FROM table
ORDER BY RAND()
LIMIT 1

Select a random row with PostgreSQL:

SELECT column FROM table
ORDER BY RANDOM()
LIMIT 1

Select a random row with Microsoft SQL Server:

SELECT TOP 1 column FROM table
ORDER BY NEWID()

Select a random row with IBM DB2

SELECT column, RAND() as IDX
FROM table
ORDER BY IDX FETCH FIRST 1 ROWS ONLY

Select a random record with Oracle:

SELECT column FROM
( SELECT column FROM table
ORDER BY dbms_random.value )
WHERE rownum = 1

มาดูตัวอย่างจากของจริงกันเลย คลิกที่นี่
อธิบายการทำงานได้ดังนี้

 
body{
 cursor: url(miyuki.cur)
}

เป็นการสั่งให้หน้านี้มี mouse cursor เป็นไฟล์ ชื่อว่า miyuki.cur

 
<div style="cursor: help; width: 200px; height: 200px; background-color: rgb(204, 204, 204);">&nbsp;</div>
 

ส่วน div ด้านล่างแสดงให้ดูว่าเราสามารถเปลี่ยน mouse cursor ได้ใน div ใดๆ ก็ตามครับ โดยในตัวอย่างจะเป็น mouse cursor ที่มีอยู่แล้วเลยไม่ต้องระบุไฟล์ .cur

เป็นไงขั้นตอนง่ายๆ เลยใช่ไหมครับ .cur จริงๆ แล้วก็ใช้ โปรแกรมทำ icon (.ico) ทำได้เลย ในตัวอย่างผมใช้ไฟล์ .ico มา rename เป็น .cur ครับ สามารถนำมาใช้งานได้ทันที แต่ว่าน่าเสียดาย css เรื่อง mouse นี้ใช้ได้เฉพาะ IE เท่านั้นครับ

แต่ถ้าทำให้เป็น popup น่าจะดีกว่า เพราะจำกัดการแสดงผลได้ และผู้ใช้จะปิด popup ได้ง่ายกว่า ผมว่าถ้าจะทำอะไรแล้วต้องทำให้ดีที่สุด นอกจากจะเป็น popup แล้วก็ยังต้องการให้อยู่กลางจอด้วยเพื่อความสวยงาม มาดูตัวอย่างกันครับ

function submitPopup (objForm,W,H,S) {
	// W = width, H = height, S = scrollbar
	var winleft	=	(screen.width - W) / 2;
	var winup	=	(screen.height - H) / 2;
	winProp		=	'width='+W+',height='+H+',left='+winleft+',top='+winup+',scrollbars='+S+',resizable' + ',status=yes'
 
	objForm.target = "newPopup";
	window.open('', "newPopup", winProp);
	objForm.submit();
}

ตัว function javascript ด้านบน ทำงานดังนี้
1. คำนวณตำแหน่งกลางจอ
2. ทำการสร้าง popup ขึ้นมามีชื่อว่า newPopup
3. สั่ง submit form

 
<form action="/path/to/script.php" method="post" name="frmTest" id="frmTest" target="newPopup">
<input type="text" value="test" name="test" id="test">
<input type="button" value="Submit" name="Submit" id="Submit" onClick="submitPopup(document.frmTest,300,400,'no');">
<a href="javascript:submitPopup(document.frmTest,300,400,'no');">Submit</a>
</form>
 

คำสั่ง html ทำงานดังนี้
1. เมื่อกดปุ่ม Submit หรือ click link ที่คำว่า Submit จะไปเรียก function submitPopup() ของ javascript ให้ทำงานโดยส่ง parameter ไป 4 ตัว
2. จุดสังเกตุคือ target="newPopup" ใน tag form จะชื่อเดียวกับ popup ที่สร้างใหม่จาก javascript นั่นเอง เพราะถ้าเราใส่ชื่อ target ที่ไม่มีอยู่จริงมันจะเด้งเป็นหน้าใหม่ แต่ว่าตัว javascript ไปดักสร้าง popup ชื่อว่า newPopup ไว้ทำให้ form ถูก submit ไปยัง popup ดังกล่าวนั่นเอง

 
<div style="position: absolute; width: 1020px; height: 600px; left: 50%; margin-left: -510px; top: 50%; margin-top: -300px;">
ข้อมูลของเรา จะใส่ table ในนี้ก็ตามใจ อย่าไปกังวลไรมาก ทำงานให้ดูได้ก็จบ !
</div>
 

จาก code เรามาดูกันถึงรายละเอียด

width: 1020px;

คือความกว้างของ content ของเรา

height: 600px;

คือความสูงของ content ของเรา

ด้วยความต่างของ browser ที่ support มาตรฐานไม่ตรงกันเลยเกิด

left: 50%; margin-left: -510px;

top: 50%; margin-top: -300px;

พวก top: left: 50% ก็ง่ายๆ อยู่กลางจอ ส่วน
margin-left: และ margin-top: ต้องใช้เครื่องคิดเลขกันหน่อย

คือแบบว่าเขียนโปรแกรมนานไม่ค่อยได้บวกเลข
ก็เอา ความกว้าง 1020 / 2 และความสูง 600 / 2 ก็จะได้ค่าทั้ง 2 ตัว
ที่ต้องติดลบก็เพราะว่าวัดครึ่งจากตัวมัน แล้วติดด้านบน กับชิดซ้าย
ตามตัวเลขดังกล่าวนั่นเอง

code บรรทัดเดียว โม้ได้ยาว มันน่าภูมิใจจริงๆ

ข้อมูลตัวอย่างที่เขา post เข้ามา test พิมพ์แบบให้ยาวเป็น กิโลเมตร เลย
(ตัวอย่างขอขึ้นบรรทัดนะครับไม่งั้นไม่สวย)

111111111111111111111111111111111111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111111111111111111111111111111111111
111111111111111111111111111111111111111111111111111111111111111111111111111111

ต้นตอของปัญหาคือ browser (IE,FireFox,ฯลฯ) มันไม่เจอช่องว่างระหว่างคำทำให้
มันตัดขึ้นบรรทัดใหม่ไม่ได้

ทำไมถึงชอบ test case นี้จัง ส่วนตัวผมคิดว่าถึงจะพิมพ์ไทย ยังไงมัน
ก็ต้องเว้นวรรคกันบ้าง พอเจอคน test แบบนี้ทีไรรู้สึกขัดใจยังไงพิกล มันทนไม่ไหว
จริงอยู่ว่า case แบบนี้อาจเกิดขึ้นได้บ้างในกรณี กรอกเพลิน จนลืมเว้นวรรค

แต่ถ้ามองในความเป็นจริงแล้ว ถ้าผมจะไปกรอกฟอร์มสมัครงาน หรือ post กระทู้
ถ้าไม่ใช่เพื่อมาป่วนให้มันตัดคำไม่ได้ขึ้นหน้ายาวๆ แล้วผมก็ไม่มี
เหตุผลที่จะกรอกให้ยาวขนาดนั้น เพราะอะไร คิดง่ายๆ ถ้าคุณเป็นเจ้าของบ. รับสมัครงาน
เจอคนพิพม์ประวัติแนะนำตัวเองยาวเป็นกิโลโดยไม่เคาะวรรคเลยคุณจะคิดยังไง

แต่เหนือสิ่งอื่นใด ช่างมันใครจะคิดไง ลูกค้าอยากได้เราก็ไม่ขัดใจ
เลยเป็นที่มาของ function ตัดคำแบบสิ้นคิด นี้ ซึ่งแก้ไขโดยการเติม tag <wbr>
เข้าไปเพื่อให้ browser ตัดคำได้สวยงาม

ASP

Dim strString
strString  = "A01234567890123456789012345678901234567890123456789Z"
Response.Write(addWbr(strString))
 
Function addWbr(byval strString)
 Dim intStringLen, intCount, strSingleString, strNewString
 intStringLen = len(strString)
 For intCount = 1 to intStringLen
  strSingleString = Mid(strString,intCount,1)
  strNewString = strNewString & strSingleString & "<wbr>"
 Next
 addWbr = strNewString
End Function

PHP (เลียนแบบ asp ด้านบน)

$strString  = "A01234567890123456789012345678901234567890123456789Z";
echo addWbr($strString);
 
Function addWbr($strString) {
 $intStringLen = strlen($strString) - 1;
 for ($intCount=0;$intCount<=$intStringLen;$intCount++) {
  $strSingleString = substr($strString,$intCount,1);
  $strNewString .= "$strSingleString<wbr>";
 }
 return $strNewString;
}

PHP (เขียนอีกแบบ)

$strString  = "A01234567890123456789012345678901234567890123456789Z";
echo addWbr($strString);
 
Function addWbr($strString) {
 $strStrings = preg_split("//", $strString, -1, PREG_SPLIT_NO_EMPTY);
 foreach ($strStrings as $strSingleString) {
  $strNewString .= "$strSingleString<wbr>";
 }
 return $strNewString;
}

* ทิ้งท้ายไว้ว่าใครจะเอาไปใช้ระวัง validate W3C ไม่ผ่านเพราะ <wbr> นะครับ

ดูตัวอย่างที่นี่

#testDiv {
	background-color:#3399CC;
	font: 12px Tahoma, Arial, sans-serif;
	color:#FFFFFF;
	width: 150px;
	height: 100px;
	text-align:center;
}
.testClass {
	background-color:#FF0000;
	font: 12px Tahoma, Arial, sans-serif;
	color:#FFFFFF;
	width: 150px;
	height: 100px;
	text-align:center;
}

* #testDiv และ .testClass ใน css เอาไว้แค่กำหนดหน้าตาเฉยๆ ไม่มีผลกับ jquery

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>

บรรทัด 26. เป็นการเรียกโหลด jquery.js เข้ามา

<a onclick="$('#testDiv').show();" href="javascript:void(0);">Show</a>
<a onclick="$('#testDiv').hide();" href="javascript:void(0);">Hide</a>

บรรทัด 31. จุดสำคัญมันอยู่ตรงนี้ onclick="$('#testDiv').show();" คำสั่งนี้คือการ เลือกที่จะทำงานกับ
div (ขึ้นต้นด้วย #) ที่ชื่อว่า #testDiv นั่นเอง

 
<div id="testDiv">ข้อความ .. .. .. ข้อความ</div>
 

<a onclick="$('.testClass').show();" href="javascript:void(0);">Show</a>
<a onclick="$('.testClass').hide();" href="javascript:void(0);">Hide</a>

บรรทัด 49. ในทำนองเดียวกัน onclick="$('.testClass').show();" คำสั่งนี้คือการ เลือกที่จะทำงานกับ
class (ขึ้นต้นด้วย .) ที่ชื่อว่า .testClass นั่นเอง

 
<div class="testClass">ข้อความ .. .. .. ข้อความ</div>
 

ส่วนคำสั่ง fadeIn, fadeOut ก็ดูได้จาก source code ในตัวอย่างได้เลย
เห็นไหมครับว่ามันง่ายขนาดไหน ต่อให้เป็น web designer ก็ตามยังสามารถที่จะลองทำได้ง่ายๆ เลย

อันที่จริงแล้ว jQuery นั้นมีคำสั่งที่สั้นกว่านี้อีกไว้จะเขียนเพิ่มในตอนต่อๆ ไป

 
<style media="screen" type="text/css">
.SiXhEaD_Link { font: 12px Tahoma, Arial, sans-serif; padding: 10px 0; }
.SiXhEaD_Link a { background: #F8FBFC; color: #069; text-decoration: none; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
.SiXhEaD_Link a:hover { border-color: #B7D7E1; }
.SiXhEaD_Link font { font: 12px Tahoma, Arial, sans-serif; background: #F8FBFC; color: #CCCCCC; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
</style>
 

จุดสังเกตุง่ายๆ ใน css ถ้า ขึ้นด้วย . คือชื่อ class แต่ถ้าขึ้นด้วย # คือ id ของ div หรือ span
- บรรทัดที่ 7 เริ่มกำหนด class ชื่อ SiXhEaD_Link
- บรรทัดที่ 8 ถ้าเป็น link
- บรรทัดที่ 9 ถ้าเป็น link และถูก mouse over
- บรรทัดที่ 10 tag font

 
<div class="SiXhEaD_Link" align="center">
<font>&laquo; First</font> <font>&#8249; Prev</font>
<a href="javascript:void(0);">1</a>
....
....
</div>
 

ทีนี้เราก็ใส่ div ครอบ link ทั้งหมดที่เราต้องการ และใส่ class="SiXhEaD_Link" เท่านั้นเป็นอันจบ