ปรับแต่ง templates เวบบล็อก ด้วยการแก้ไข code html

Written By Aucharaporn Theemcle on วันศุกร์ที่ 27 พฤษภาคม พ.ศ. 2554 | 20:36

เพื่อนใหม่ท่านหนึ่ง  ถามถึงวิธีการปรับแต่ง template   ดิฉันแนะนำ เครื่องมือออกแบบแม่แบบ แต่ทว่า templates บางตัวไม่สนับสนุนเครื่องมือนี้  หากว่าใช้เครื่องมือการออกแบบแม่แบบไม่ได้แล้วหล่ะก็จำเป็นต้องปรับแต่ง code html ค่ะ 

  ปรับแต่ง template ด้วยการแก้ไข code html

ตัวดิฉันเองก็มีความรู้ภาษา html แค่หางอึ่ง จะไปอธิบายให้เพื่อนได้ทราบ   ก็คงจะงงกันทั้งผู้อธิบายและผู้รับสาร    ค้นหาข้อมูลอยู่พักใหญ่  และแล้วก็เจอจนได้  ดิฉันเองลองปรับแต่งดูแล้ว  ต่อให้มีความรู้เรื่องของ code html น้อยเต็มที แต่ยืนยันว่าแก้ไขได้แน่นอนค่ะ  ตามมาดูกันนะคะ

 ปรับแต่ง template ด้วยการแก้ไข code html

ตัวช่วยในการปรับแต่ง templates ด้วยการแก้ไข code html ในครั้งนี้คือ addon ของ firefox ซึ่งเป็น extension ใน chrome ด้วย ค่ะ มันคือ firebug   ตัวช่วยตัวนี้จะช่วยค้นหา code html ตรงบริเวณที่เราเอาเมาส์ไปชี้   และสามารถปรับแต่งค่า   และเห็นการแสดงผลได้ในทันที  ทำให้ง่ายขึ้น    ลองไป  ดาวน์โหลด firebug มาปรับแต่ง template เวบบล็อกกันดูนะคะ

ปรับแต่ง template ด้วยการแก้ไข code html

หลังดาวน์โหลด เลือก ติดตั้งแล้ว restart firefox ใหม่ จะปรากฏไอคอนเล็ก ๆ ของ firebug ด้านล่าง ใกล้ ๆ task bar ดับเบิ้ลคลิ๊กขึ้นมาใช้งานได้เลยค่ะ

firebug

นี่คือหน้าตาของ firebug  ซึ่งเพื่อน ๆ สามารถ แก้ไข (edit)  ได้ทั้ง css หรือ html โดย ด้านขวามือจะมีช่องให้เลือกการแก้ไข  เลือกแก้ไข style(รูปแบบ) และ layout (ความกว้างหรือโครงร่าง)ทางช่องด้านนี้ได้เลย โดยเปลี่ยนค่าตัวเลข เช่น หากดิฉันต้องการเปลี่ยน ความกว้างของบริเวณ template ส่วนใด ดิฉันจะคลิ๊กเลือก icon เล็ก ๆ ด้านซ้ายมือบนหน้าต่าง firebug ดังรูปด้านบน  เสร็จแล้วนำเม้าส์ไปชี้ที่บริเวณที่ต้องการจะเปลี่ยน  กรอบขวามือจะปรากฏ code ขึ้นให้โดยปรากฏเป็นแถบสีน้ำเงิน  หลังจากนั้นก็ไปเปลี่ยนค่าตัวเลข layout ด้านซ้ายมือ  สังเกตการแสดงผลที่หน้าบราวเซอร์

firebuginblog

หากผลที่ได้พอใจ ให้เพื่อน ๆ ไปแก้ไข code html ในบล็อกของเราโดย login เข้า blogger >การออกแบบ>แก้ไข html  คลิ๊ก crtl+f เพื่อค้นหา code ที่จะเปลี่ยน โดยดูจากหน้าต่างฝั่งซ้ายของ firebug ที่เราแก้ไข  เมื่อหาเจอแล้วให้เปลี่ยนค่าไปตาม code ที่เราแก้ไขใน firebug เสร็จแล้ว เลือก แสดงตัวอย่าง  หากพอใจแล้วเลือกบันทึกแม่แบบค่ะ

 

บทความที่เขียน ก็แค่นำทาง ส่วนวีดีโอเพิ่มได้อีกนิด ที่เหลือคงต้องลงมือแล้วหล่ะค่ะ

0 comments:

แสดงความคิดเห็น