Lesson

หลังจากนั่งหลังขดหลังแข็งแก้โค้ด css กันอย่างสนุกสนานอยู่ 2-3 วันก็ได้ฤกษ์เปิดตัวธีมใหม่ครับ ใครยังเห็นหน้าบล็อกเป็นสีฟ้าน้ำเงิน ธีม Prince of Persia อยู่ละก็ กด F5 โดยพลัน สัมผัสกับเว็บโทนแดง-น้ำตาล-ดำ ได้แรงบันดาลใจจากเกมที่เกมเมอร์รอคอยกันค่อนโลก Diablo III นั่นเอง!



เนื่องจากเครื่องที่ผมพัฒนาธีมนี้มีแต่ IE6 เห่ยๆจึงได้ทดสอบเฉพาะ Firefox เท่านั้น สำหรับผู้ใช้ IE8 ที่เห็นอะไรประหลาดๆในบล็อกแล้วละก็ ช่วยบอกด้วยนะครับ จะได้แก้ไขได้อย่างเหมาะสม ถึงแม้ว่าบล็อกนี้จะงามงดบนหมาไฟแต่ผมไม่ทอดทิ้งผู้ใช้ IE8 นะครับ (แล้ว Chrome ละเฟ้ย) ในระยะนี้ก็อาจมีเปลี่ยนแปลงโค้ด css อยู่เรื่อยๆจนกว่าจะอยู่ตัวล่ะครับ

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

1. ลำดับแรกมาดูที่หัวบล็อกกันเลย หัวบล็อกคราวนี้ผมปรับให้แรนด้อมรูปขึ้นมาแสดงครับ ตอนนี้ยังมีอยู่แค่ 5 รูปแต่จะเพิ่มมากขึ้นในภายหลัง ใครอยากเห็นว่ามีรูปอะไรบ้างก็กด F5 บ่อยๆเพิ่ม PageView ให้ผมเยอะๆละกัน

สำหรับโค้ดต้องขอขอบคุณ http://sinziar.exteen.com/20090802/howto/page/2 ที่เผยแพร่ความรู้ครับ โค้ดใช้งานสะดวกมากมาย

2. ถ้าสังเกตให้ดีคอมลัมน์ sidebar ทางด้านขวามือของผมนั้น พื้นหลังจะยาวเลยส่วนของเมนูต่างๆไปพอดีกับเนื้อหาบล็อกทางด้านซ้าย ตรงนี้ผมเคยลองมำหลายครั้งจนล้มเลิกไป พอดีไปเจอ http://bongikairu.exteen.com/ ที่สอนทำ css ด้วย มีรูปแบบคอลัมน์ที่ตรงกับที่ผมอยากได้พอดี เลยลองงัดแงะซอร์สโค้ดของบล็อกนี้ดูก็พบว่ามีการใช้ Javascript เข้าช่วยด้วย เป็นโค้ดของ Projectseven ครับ ใครสนใจก็ลองคลิ๊กขวากดดูซอร์สโค้ดของผมได้ครับ ติดตั้งง่าย

3. ธีมนี้เป็นธีมแรกเลยที่ผมลองใช้เจ้าแมลงสาบ FireBug ซึ่งเป็น Add-on ของ Firefox ที่ช่วยย่นระยะเวลาและเพิ่มความสะดวกในการปรับแต่ง css ได้มาก แถมยังสามารถส่อง css ของบล็อกคนอื่นได้ด้วย บล็อกที่สอน firebug มีอยู่้ให้เพียบครับ ลอง search tag หาดูได้เลย

4. ตรงส่วนคอมเม้นต์ผมก็ยกเครื่องปรับปรุงใหม่หมด ทั้งเปลี่ยนเอาคำว่า Comment ออกไปแล้วเปลี่ยนเป็น Icon ที่เอาเมาส์ไปชี้แล้วเปล่งแสงได้ เปลี่ยนรูปแบบฟอร์มและตัวคอมเม้นต์ให้ดูสวยงามขึ้น

สุดท้ายนี้ ใครสนใจหรือสงสัยโค้ดตรงส่วนไหนก็ถามได้ตามสบายเลยครับ ผมจะพยายามตอบให้ตามที่เข้าใจนะครับผม

ไลก้าคุง View my profile