DreamChaser's Factory

การสร้างไดนามิกเมนูสำหรับตกแต่งบล็อก : ตอน 2 นำเมนูขึ้นบล็อกด้วยอิทฤทธิ์ IFRAME
ระดับความยุ่งยาก :

จากคราวที่แล้วสอนการทำเมนูแบบไดนามิกไป
เอนทรี่นี้ก็มาสอนวิธีนำเมนูที่ทำขึ้นบล็อกตามสัญญา

ก่อนอื่นเราต้องดูก่อนว่า เมนูของเรา ถ้ารวมเมนูย่อยด้วยทั้งหมดแล้ว ความกว้าง ความสูงจะยื่นออกไปมากแค่ไหน ให้นำความกว้างและความสูงมากำหนดค่า width(ความกว้าง) และ height(ความสูง) ใน IFRAME



จากเมนูตัวอย่าง มีความกว้าง 336px สูง 177px
ก็กำหนดตามนั้น

จากตัวอย่างนี้โค้ดที่ใช้เราใช้จะเป็น
<iframe allowtransparency="true"  border="0" src="urlของไฟล์เมนูที่เซฟไว้" width="336" height="177" framespacing="0" frameborder="0"></iframe>



จะเห็นว่ามีปัญหาอยู่สองอย่างคือเมนูไม่ยอมเข้าไปชิดกับขอบ IFRAME และ พื้นหลังของหน้าเว็บโดนตัว IFRAME บังทำให้พื้นหลังแหว่ง แล้วถ้าเอาไปลงบล็อกทั้งอย่างนี้ก็จะทำให้บล็อกเน่า.. มาดูวิธีแก้.. ให้เปิดไฟล์ที่เก็บโค้ดเมนูไว้ขึ้นมาด้วย Notepad แล้วเติมโค้ดในส่วนของ body ตามตัวออย่างที่ไฮไลท์ไว้




เซฟให้เรียบร้อย เพียงเท่านี้เมนูของคุณจะพร้อมสำหรับการนำไปใส่ในบล็อก


ถ้าแก้ไฟล์ในเครื่องก็อย่าลืมอัพโหลดขึ้นไปแทนอันเก่าด้วยนะจ๊ะ~ ไม่งั้นมันไม่เปลี่ยน

ขั้นตอนสุดท้ายก็แค่
เอาโค้ด <iframe allowtransparency="true"  border="0" src="urlของไฟล์เมนูที่เซฟไว้" width="336" height="177" framespacing="0" frameborder="0"></iframe> ไปแปะไว้ที่ Widget:Custom Code ในตำแหน่งที่ต้องการวางเมนูแล้วก็เซฟให้เรียบร้อย


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

.
.
จบเอนทรี่แล้ว
ใครอยากถามอะไรอีกก็ทิ้งคำถามไว้ได้เลย
ถ้าตอบได้จะตอบให้
แต่อย่าคาดหวังมากนะ เพราะเรายังไม่เทพขนาดรู้ทุกเรื่อง >w< (แต่ก็จะพยายามตอบนะ)