วิธีใช้งาน Firebug ช่วยปรับแต่ง Blogger Layout

Firebug คืออะไร ?
Firebug เป็นส่วนเสริมของ Firefox Browser ที่สามารถใช้เป็นเครื่องมือที่ช่วยในการปรับแต่ง Blogger Layout ได้เป็นอย่างดี เพราะเป็นเครื่องมือที่ทำให้เราทดลองปรับแต่งโค้ดต่าง ๆ ของหน้าเว็บที่เราต้องการ โดยที่การทดลองนั้นเป็นเพียงภาพสมมติ จะไม่ส่งผลเสีย หรือเกิดการเปลี่ยนแปลงใด ๆ ต่อหน้าเว็บจริง

สอนทำบล็อก วิธีสร้างบล็อก


Firebug ทำงานอย่างไร ?
หลักการทำงานของ Firebug คือเมื่อเราติดตั้ง Firebug แล้วเปิด Firefox Browser ก็สามารถเรียกใช้งาน Firebug กับหน้าเว็บที่ต้องการได้เลย ซึ่งมุมมองในการแก้ไข และใช้งาน ก็เหมือนกับเราเปิดดูหน้าเว็บบน Firefox Browser ตามปกติ

เมื่อเราทดลองแก้โค้ด CSS หรือ HTML หรือ จาวาสคริปต์ของหน้าเว็บนั้นๆ เราก็จะเห็นผลลัพธ์จากการปรับแต่งทันที  แต่ผลการปรับแต่งจะไม่ได้ถูกบันทึกเก็บไว้แต่อย่างใด ดังนั้นเมื่อเรา refresh หน้าเว็บนั้นใหม่ สิ่งที่เราได้ทดลองปรับแต่งก็จะกลับคืนสู่สภาพเดิมทันที

เพราะฉะนั้นหลักการทำงานของ Firebug คือใช้ช่วยในการทดลองปรับ แต่งหน้าเว็บ ไม่ใช่เครื่องมือปรับแต่งโค้ดของเว็บ หรือบล็อกโดยตรง

วิธีสร้าง blog ของ blogger blogspot


Firebug ช่วยปรับแต่ง Blogger ได้อย่างไร?
ด้วยหลักการตามที่กล่าวมาแล้วถ้าเราอยากจะปรับความกว้าง ปรับ CSS หรืออยากจะลบส่วนที่ไม่ต้องการออกจากหน้าบล็อกเราก็สามารถใช้เครื่องมือนี้ค้นหาโค้ดเหล่านั้นได้  และเมื่อปรับแต่งลงตัวแล้วก็คัดลอกวิธีปรับแต่งนั้นไปปรับแต่งโค้ดใน Blogger อีกทีโดยไม่ต้องแก้ไปแก้มา เพราะโค้ดที่เรานำมาแก้นั้นเป็นโค้ดที่เราได้ทดลองจนเป็นที่พอใจแล้ว



จะใช้ Firebug ต้องมีอะไรบ้าง?
การจะใช้เครื่องมือนี้ได้นั้นคุณจะต้องติดตั้ง Firefox Browser ดังนั้นหากท่านใดจะใช้เครื่องมือนี้ก็จะต้องติดตั้ง Firefox Browser บนคอมพิวเตอร์ของคุณเสียก่อน โดยคุณสามารถเข้าไปดาวน์โหลดและติดตั้งจากลิงค์ด้านล่างเลยครับ

http://www.mozilla.com/th/
สอนใช้งาน Firebug



วิธีติดตั้ง Firebug
เมื่อคุณได้ติดตั้ง Firefox Browser ที่คอมพิวเตอร์ของคุณแล้วให้ไปที่
https://addons.mozilla.org/en-US/firefox/addon/1843/
และทำการติดตั้ง Firebug ลงบน Firefox

ปรับความกว้ง blogger Templates ด้วย Firebug



การเรียกใช้งาน Firebug ?
หลังจากติดตั้ง Firebug ให้เป็นส่วนเสริมของ Firefox Browser  เรียบร้อยแล้ว การเรียกใช้ทำได้ 3 วิธีคือ
1. เรียกใช้โดยการ กด F12 บน Keyboard
2. เรียกใช้โดยการคลิกขวาและเลือก สัญลักษณ์ Inspect Element

สอนสร้าง blogger

3. เรียกใช้จากเมนูส่วนเสริม

สอนแต่งบล็อก สอนสร้างบล้อก สอนทำบล็อก

และไม่ว่าจะเรียกใช้ด้วยวิธีใดก็ตามแถบเครื่องมือของ Firebug จะปรากฎอยู่ที่ด้านล่างของ Browser ดังรูปด้านล่าง

blogger blogspot SEO



เครื่องมือของ Firebug
ก่อนดูตัวอย่างการใช้คุณควรรู้จักแถบเครื่องมือของ Firebug ดังนี้



วิธีทำบล็อก

ส่วนที่ 1  เป็นเครื่องมือที่ใช้ระบุตำแหน่งที่เราต้องการปรับแก้ หรือระบุตำแหน่งที่เราต้องการทราบโค้ด ใช้งานโดยคลิกที่ 2010-06-28_123055 และนำไปคลิกยังเป้าหมายบนหน้าเว็บที่ต้องการปรับแต่งอีก 1 ครั้ง

ส่วนที่ 2  เมื่อใช้เครื่องมือในส่วนที่ 1 แล้วเราสามารถเลือกได้ว่าเราต้องการแสดงโค้ดชนิดใด เช่น HTML หรือ CSS หรือ จาวาสคริปต์เป็นต้น ซึ่งโดยค่าดังเดิมก็จะแสดงผลเป็น HTML โค้ด

ส่วนที่ 3 เป็นส่วนที่ใช้ทดลองปรับแต่ง HTML โค้ด โดยการคลิกที่ข้อความ EDIT ทางซ้ายสุด หรือคลิกที่ Class หรือ id ที่ต้องการ ตามที่แสดงผลบน bar ในส่วนที่ 3 ก็ได้

สอนสร้าง blogspot
 
ส่วนที่ 4  ส่วนที่ 4 เป็นส่วนที่ใช้ในการแสดง HTML โค้ดที่เราต้องการปรับแต่ง คุณสามารถค้นหา ชื่อของ Class หรือ id ที่ต้องการ จากการแสดงผลในส่วนนี้ได้และทำนำชื่อ Class หรือ id ไปปรับแต่งแม่แบบได้ง่ายขึ้นด้วย

ทำบล็อก แต่งบล็อก
 
ส่วนที่ 5 ส่วนที่ 5 เป็นตัวเลือกในการแสดงรายละเอียดของโค้ดในส่วนที่ 4 เช่นแสดง CSS แสดง Layout และยังสามารถทดลองปรับแต่งได้จากส่วนนี้ด้วย

วิธีแต่ง blogger  

ส่วนที่ 6 เป็นส่วนที่แสดงผลสืบเนื่องจากส่วนที่ 5 และคุณสามารถทดลองปรับแต่งโค้ดในส่วนนี้ได้ด้วย

สอนแต่ง blogspot

 

ตัวอย่างการใช้งาน Firebug
ในที่นี้ผมต้องการเพิ่มความสูงของ post ในหน้าแรก  ก็นำเมาส์คลิกที่ Inspect Element ไอคอน  2010-06-28_123055 และนำไปคลิกที่ส่วน Post ดังรูป

สอนแต่ง blogger

เมื่อปรากฎโค้ดของส่วนที่ต้องการแก้แล้ว ก็ลงมือทดลองปรับแต่งโดยใช้เครื่องมือที่ได้อธิบายการทำงานไปแล้ว

เช่น  ในที่นี้ผมต้องการแก้ความสูงให้มากกว่าเดิม จากเดิมที่เห็นในรูปคือ height: 321px; โดยผมจะเพิ่มเป็น height: 400px;  ก็แก้ CSS ทางขวามือ

blogger template

ผลที่ได้จากการแก้ไขก็จะแสดงให้เราเห็นทันที

วิธีสร้างบล็อกส่วนตัว

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

ส่วนที่เหลือลองศึกษาเพิ่มเติมด้วยตนเองครับ และสำหรับท่านที่ไม่ถนัดเรื่องโค้ดและอยากศึกษาเพิ่มเติม แนะนำให้ศึกษาเรื่อง CSS และ HTML เพื่อเป็นความรู้พื้นฐานเกี่ยวกับการปรับแต่งโค้ดต่าง ๆ ได้ที่ www.w3schools.com  


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

ตอนนี้มีความคิดเห็น : 9 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. สะดวกดีครับ

  1. @KINGRPG: ใช่แล้วครับ เชียร์ให้ blogger ทุกคนใช้กันครับ รับรองไม่ผิดหวัง

  1. สุดยอดคับ ว่างๆๆเลยแว๊ะมาทั๊กคับพี่ HacKBlog

  1. บล็อของ AngelofDeath หนังดี ๆ ทั้งนั้นเลยครับ Confirm ลองไปเยี่ยมชมกัน
    http://webofdeath.blogspot.com

  1. ถ้าใน Chrome ไม่ต้องลงเพิ่มนะครับ คลิกขวา มีให้ใช้ได้เลย realtime เหมือนกัน

  1. สุดยอดเลยครับ น่าจะเห็นตั้งนานแล้ว
    คราวนี้เจอ template ยาก เราก็หา id ได้ง่ายขึ้นแล้วหล่ะครับ

  1. เริด สะ แมน แตน คะ! ขอบคุณสำหรับข้อมูล Firebug

  1. คือว่าผมอยากใส่พืื้นหลังของหัวอะคับ
    http://xn--42cg7cudj0a.blogspot.com/
    ทำไงหรอคับ

  1. ท่านอาจาร์ครับ พอดีผมโหลดเทมเพจมาแล้วมันเอียงแบบนี้ครับใช้ Firebug หาและแก้ในfirebug ได้ครับแต่หา code ไปแก้ในBlogไม่ได้ครับ ช่วยชี้แนะด้วยครับ

    http://thaihotvariety.blogspot.com/

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

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel