Article

[How to] ใส่ Flash header ให้ดูดีทั้ง FF และ IE (อัพของแถม)

posted on 05 May 2008 12:39 by dadeemodify in Article

ฮาวทูครั้งที่สามในรอบสองปี (ฮา)

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

สิ่งที่ต้องการสำหรับฮาวทูนี้

บล๊อกท่านควรอยู่ในธีมเวอร์ชั่นล่าสุดของเอ็กซ์ทีน (หน้าตาประมาณบล๊อกผมนี่แหละครับ)
โค้ด embed ของไฟล์แฟลชของเรา (หากใครยังไม่มีเดี๋ยวข้างล่างจะมีวิธีหาโค้ดแฟลชมาใช้นะครับ)
เหลือ Widgets Custom Code ให้มันหน่อยนะครับ

Step 1 วิธีการได้มาซึ่ง โค้ดแฟลช (น่าจะเขียนว่ามาตรา 1 นะ ดูชื่อสเต็ปมันสิ )

หากท่านมีอยู่แล้วก็ข้ามไป Step 2 ได้เลยนะครับ

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

อัพเสร็จก็เตรียมโค้ดแฟลชไว้ใช้งานได้เลยครับ ผมคิดว่าคนที่มีไฟล์แฟลชคงทำโค้ดแฟลชได้แล้วเชิญโดดไปรอที่ Step 2 เลยครับ

เงื่อนไขต่อไปนี้พิเศษหน่อย

หากท่านไม่มีไฟล์แฟลชอยู่ (ไม่ว่าเนื่องด้วยเหตุใดก็ตาม เช่น ทำไม่เป็น หรือขี้เกียจ หรือเป็นทั้งสองอย่างแบบเจ้าของบล๊อก ฮา) เรามาทำแฟลชปลาตอดเฮดอันเดิมของเรากันเถอะครับ /

เริ่มด้วย ไปเข้าไปยังเว็ปนี้ครับ >> http://abowman.com/google-modules/fish/
จะเห็นปลาบู่ที่เค้าวางขายอยู่ในบ่อ(ไม่ใช่ละ) คลิกที่ edit settings ใต้บ่อเพื่อแสดงหน้าตั้งค่าบ่อปลาของเรานะครับ

เนื่องจากว่าเรากำลังจะทำปลาตอดเฮดเดิม ดังนั้นในช่อง Background Image (jpg) ก็กรอก url ของเฮดเราเข้าไปเลยครับ (เช่นของผมเป็น http://i137.photobucket.com/albums/q215/dadeemodify/Thanks20k-1.jpg)
หลังจากนั้นเราก็ตั้งค่าอื่นๆได้ตามใจชอบครับ ตั้งแต่จำนวนปลา สีของปลาแต่ละตัว และสีอาหาร
โค้ดแฟลชของเราก็จะรออยู่ที่ฟอร์ม Embed หน้าตาก็จะประมาณนี้แหละครับ (เวปเค้ามีพรีวิวด้วยนะ)

ส่วนสีแดงคือขนาดความกว้างและความสูงของเฮดเดิมของเรา (ที่เราเอาไปทำพื้นหลังบ่อปลา) ซึ่งผมเอาออกมาแก้ทีหลังครับ เพียงเท่านี้ทุกท่านก็พร้อมที่จะใส่แฟลชเฮดเดอร์กันแล้ว // (ไปสู่ step 2 สักที)

Step 2 ยัดมันเข้า Custom Code!! =[]=

จากเมนูด้านบนบล๊อก ไปที่ Manage >> Theme >> Widgets
ลาก Custom Code ที่ว่างงาน (ในตัวอย่างเป็น Custom Code 1 ) นำไปไว้ในส่วนของ Top menu ดังภาพด้านล่าง(นู่น)ครับ
คลิกที่ปุ่มรูปดินสอ เพื่อใส่โค้ดแฟลชจาก step 1 เข้าไป แล้วคลิก ok ส่วนที่แรเงาคือโค้ดแฟลชครับ ที่เหลือเป็นโค้ดที่ผมใช้จัดการกับ Custom Search ของ พี่กู(เกิ้ล) (เพราะฉะนั้นอย่าไปสนใจ)

เสร็จแล้วก็อย่าลืมกดปุ่มเซฟธีม (save) ที่อยู่ทางด้านล่างด้วยนะครับ

ลองแวบไปดูหน้าบล๊อกของเราสักหน่อย ถ้าไม่มีอะไรผิดพลาด พี่น้องจะพบว่าเฮดแฟลชไปโผล่ใต้เฮดเดิมของเราอยู่ครับ

(// ใกล้ความจริงแล้ว)

มุ่งสู่สเต็ปสุดท้าย

step 3 เฮดเดิม! ออกไป! เฮดเดิม! ออกไป!

ต้องเข้าไปแก้รัฐธรรมนูญ เอ้ย! ต้องเข้าไปแก้ใน css ครับ ( ปากมอมจริงช่วงนี้ สงสัยอยากกินข้าวผัดเฮียแชมป์)

จากเมนูด้านบนบล๊อก ไปที่ Manage >> Theme >> CSS Editer
มองหาส่วนจัดการรูปเฮดเดอร์ (#coverimage) แล้วลบทิ้งหรือคอมเม้นต์ทิ้งแบบผมก็ได้ครับ (หมายถึงคร่อมด้วย /*...*/)

#coverimage{
/*
background:url(http://i137.photobucket.com/albums/q215/dadeemodify/Thanks20k.gif) no-repeat;
height:415px;
width:830px;
margin-bottom:5px;
*/
}