เปลี่ยนธีมบล็อก: Diablo Theme!
posted on 25 Oct 2009 12:40 by laika in Lesson, Lethal, Lex-Game
หลังจากนั่งหลังขดหลังแข็งแก้โค้ด 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 ที่เอาเมาส์ไปชี้แล้วเปล่งแสงได้ เปลี่ยนรูปแบบฟอร์มและตัวคอมเม้นต์ให้ดูสวยงามขึ้น
สุดท้ายนี้ ใครสนใจหรือสงสัยโค้ดตรงส่วนไหนก็ถามได้ตามสบายเลยครับ ผมจะพยายามตอบให้ตามที่เข้าใจนะครับผม
เนื่องจากเครื่องที่ผมพัฒนาธีมนี้มีแต่ 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 ที่เอาเมาส์ไปชี้แล้วเปล่งแสงได้ เปลี่ยนรูปแบบฟอร์มและตัวคอมเม้นต์ให้ดูสวยงามขึ้น
สุดท้ายนี้ ใครสนใจหรือสงสัยโค้ดตรงส่วนไหนก็ถามได้ตามสบายเลยครับ ผมจะพยายามตอบให้ตามที่เข้าใจนะครับผม
#1 By Nueng on 2009-10-27 18:54