Day 8/2015 : แก้ Menu Blogspot ให้เป็นอย่างที่เราต้องการ

ทำ Menu ให้เป็นแบบที่เราต้องการ

    วันนี้พอมีเวลามาเขียนต่อ หลังจากที่เน็ตฯ หอพักไม่สามารถใช้งานได้ เพราะบัตรเดือนหมดอายุ จะต้องจ่ายพร้อมกับจ่ายค่าเช่ารายเดือนและค่าน้ำ-ค่าไฟ เดือนนี้จ่ายช้าเพราะหยุดยาว กลับมาพักที่หอเมื่อวันที่ 4 มกราคม 2558 แต่ปรากฏว่า บิลฯ ยังไม่มา ต้องรออีก 2-3 วันถึงจะได้จ่าย เพราะอะไรน่ะหรือ คำตอบคือ ป้าเจ้าของหอพักและครอบครัวไปเที่ยวเพิ่งจะหลับมา เลยไม่มีใครทำใบเสร็จแจ้งต่าใช้จ่ายให้ เลยต้องรอ มาอยู่หอพักแต่ไม่มีเน็ต ... แล้วเอาเงินที่ไหนมาจ่ายล่ะ คำตอบก็เงินจากงานประจำ Active Income เอามาจ่ายเพื่อเขียน Blog และ หาเงินออนไลน์ สร้าง Passive Income กันต่อไป (ยังไม่ได้สักบาท)

   พล่ามเรื่องอื่นมานาน เข้าเรื่องของเราดีกว่า เฮอๆๆๆๆๆ
   จากที่ติดค้างไว้ ว่าจะทำการแก้ไข Menu ของ Blogspot ที่ติดมากับ WPTOUCH Free Premium Blogger Template ให้เป็น Menu ในแบบที่เราต้องการ มาดูกันว่าที่ผมทำ ที่ผมศึกษาหาความรู้ ต้องทำอะไรกันบ้าง

เตรียมตัวกันก่อน

•    สไตล์ผม อันดับแรก ถามอากู๋ฯ Google ก่อนเลย ผลไม่ได้อย่างที่เราคิด
•    ต่อมาก็ไปดูใน WPTOUCH ของ premiumbloggertemplates.com ซิวาาจะได้อะไรมาบ้างไหมในการปรับแต่งเมนูฯ ปรากฏว่า ... มึนตึ๊บ มีแนะนำคล้ายๆแต่ยัง งงๆ อยู่เช่นเดิม  แต่ที่แน่ๆ รู้ว่าต้องแก้ไข Code ภาษา HTML อีกล่ะ

สุดท้าย แกะรอยครับ ดูซิว่า อยู่ตรงไหน จะลองทำอย่างไรได้บ้าง

แกะรอยหาที่แก้ไข Menu

     ตามสูตรเดิมครับ เข้า Blog ของเรา จากนั้นไปที่ template ตามด้วย Edit HTML แล้วกด Ctrl+F พิมพ์คำว่า Uncategorized หรือคำอื่นๆก็ได้ครับจากเมนู เช่น Home, Health แต่ที่ผมใช้คำนี้เพราะเหตุผลง่ายๆคือ มันไม่เหมือนกับคำปกติทั่วๆไป คงจะมีใน Code HTML ไม่มาก ก็จะทำให้ง่ายในการค้นหา ผลก็คือเป็นอย่างที่คิด หาง่ายมากๆ

ไล่กลับขึ้นไปดูซิว่าจุดเริ่มต้นน่าจะอยู่ตรงไหน นั่งไงเจอแล้วเห็นไหม ตรงคำว่า "Home" เข้าทางเราล่ะ

เจอล่ะ เอาล่ะซิ อย่างนี้ต้องทดสอบกันหน่อย หากจะไม่ให้แสดงเมนูนั้นๆ จะทำอย่างไร โดนไม่ต้องลบ HTML Code เก่าออก คำตอบคือใส่ comment ลงไปแทน ซึ่งในภาษา HTML จะใส่ comment จะมีรูปแบบคือ

<!-- ใส่คอมเมนต์ไว้ภายในเครื่องหมายนี้ตามที่เราต้องการ -->

ทำไงต่อดี แบบนี้ต้องทดสอบๆๆๆๆๆ โดยการปิดไม่ให้แสดงเมนู "BUSINESS" ก็แล้วกันนะ โดยการใส่ Comment ค่อมไว้ตามภาพ

จากนั้นก็ save แล้วลอง view เปรียบเทียบกันดู

ก่อนใส่ Comments

หลังใส่ Comments

ได้ใจ ลองอีก ฮ่าๆๆๆ คราวนี้ เอาเมนูฯ ออกหมดเลยเหลือไว้แต่ "HOME"

เหลือแต่ HOME หลังจากทดลองอีกครั้ง

หัวใจของการทำเมนู (Menu ใน Blogspot)

     หลักในการทำเมนูคือการใช้ความรู้เกี่ยวกับภาษา HTML ในเรื่องของการทำ ลิสต์ (List Order) นั่นเอง  หากท่านใดต้องการเรียนรู้ก็ถามหาอากู๋ฯ กันนะครับ มีความรู้มากมายอยู่ที่นั้น ในที่นี้จะไม่กล่าวถึง

ออกแบบเมนูของตัวเอง

     เราอยากออกแบบยังไงก็ตามแต่ใจที่เราต้องการนะ ในมุมมองของตัวเอง อยากให้มีแบบนี้

• Home
• My Income Journey
• Passive Income
• Active Income
• General Topics
• About and Contact Me

โดยที่ "About & Contact Me" จะเป็น Pages เหมือน "Home" แต่จะทำอย่างไรยังไม่รู้ ติดไว้ก่อนนะครับ

Final Design Menu of this day

    ก็ไม่มีอะไรมาก ใส่ Comment คร่อมของเก่าไว้แล้วใส่ของใหม่ไปดังภาพ

ผลที่ได้มาคือ

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

Tips of the day :

     รู้อะไรสักแค่ไหน ก็ไม่เท่ารู้แล้วลงมือทำเพื่อฝึกฝนความรู้ให้มากขึ้น