• ใช้ไฟร์ฟอกซ์กันเถอะ
  • คำแนะนำ24ข้อที่บล็อกเกอร์ควรรู้

 

 

Web Developer ที่ว่าเนี่ย มันเป็นหนึ่งในโปรแกรมเสริม หรือ extension ของเวบบราวเซอร์หมาไฟ Firefox ซึ่งมันจะช่วยให้การแต่งบล็อกนั้นเห็นภาพเสมือนจริง ซึ่งมันมีฟังก์ชันช่วยปรับแก้อะไรๆ เยอะแยะ โดยที่เราไม่ต้องแตะต้อง css ของจริงก่อนเลยก็ได้ เพราะบางครั้งเราแต่งๆอยู่ ดันพลาดไปลบอะไรๆที่เราไม่รู้ บล็อกก็เละขึ้นมาสิครับ แล้วความเลิศเลอของเจ้า Web Developer นั้นอยู่ที่การพรีวิวแบบจะจะ ซึ่งจะไม่เหมือนกับที่เราแก้ใน css editor ผมอธิบายมาอาจจะงง ดูเลยดีกว่า

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

 

ღLoveYouForEverMore™ღ

 

 

ที่ผมเลือกบล็อกของท่านนี้เพราะว่ามีการปรับแต่งน้อยมาก ดูเลยแล้วกันครับ เล่นอะไรสนุกๆ

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

พื้นหลัง

 

 

ทดลองเปลี่ยนสีพื้นหลังก่อนครับ

เข้าเมนู css editor

 

ที่ด้านล่าง..

 

ทดสอบการเปลี่ยนพื้นหลัง

 

โค้ดเดิมๆ

 

ผมจะทดลองแปลง

 

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

ทีนี้มาปรับแก้ตรง #neck กันเล่นๆครับ

 

ผมจะเปลี่ยนสี #neck ละนะ

 

ทีนี้จะลองแก้ส่วนอื่นๆตรงคอบล็อก ให้มันสีสดใส สอดคล้องกับพื้นหลังดูนะครับ

 

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

 

 

โค้ดตรงเส้นข้างๆ

 

ทันทีที่เอาเมาส์ไปวาง

เอาเมาส์ไปลองวาง ก็จะัได้อย่างใจ

 

จริงๆ รหัสสีขาว พิมพ์แค่ #FFF ก็ใช้ได้แล้วครับสามารถย่อได้

 

 

ข้อควรระวังในการใช้ css editor ของ Web Developer คือ ถ้าเราเปลี่ยนไปเวบอื่นของเก่าที่เราทดลองทำมันจะหายหมดครับ ซึ่งเราก็สามารถเซฟ css ที่เราทดลองปรับแก้ได้ลงเครื่องเราเลย

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

 

ง่ายๆ.. และมันยังมีความพิเศษ สามารถทดลองปรับแก้ข้อความอะไรลงไปได้เช่น

จากเมนู Web Developer เข้าไปตรงนี้เลยครับ

 

 

 

ต้องอาศัยความรู้ภาษา html เล็กน้อยครับ (จริงๆใช้การสังเกตเอาก็ได้งิ)

 

แก้เป็น

 

 

มาลองดูตัวอย่างบล็อกที่ผมปรับแก้เล่นๆครับ ของเจ้านี้

ย่อมาเหลือความกว้าง 420px ของจริงไปดู ที่นี่

 

เลิศไหม

 

เอาไปใช้งานฟรี คลิ้กรูปเลย

 

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

ส่วนเจ้าของบล็อกสาธิต ไม่ต้องตกใจครับ บล็อกท่านไมไ่ด้โดนผมแอบเข้านะ เดี๋ยวจะตกใจไปกันใหญ่

Comment

Comment:

Tweet

add-on ตัวนี้ฟรีไหมครับ?

#44 By ninetar on 2011-11-10 16:27

เ่อ่อ พี่คะ ลงไงอ่า T^T
ว้ากก สวยมากเจ้าค่ะ เห็นแล้วอิจฉาquestion

#42 By zaяaz' on 2010-07-20 12:05

Hot! Hot! surprised smile

ขอบคุณมากๆนะคะที่แนะนำโปรแกรมดีๆเอาไว้แต่งบล็อก

ปอก็เป็นอีกคนที่ชอบแก้ธีมบล็อกบ่อยๆ(เหนื่อยsad smile )

อีกอย่างก็คือ เป้นสาวกหมาไฟมาระยะนึงแล้วค่ะ

ไออีนี่คงต้องลาขาดไปเลยopen-mounthed smile

#41 By PorChan~support Yunho&Jaejoong on 2009-09-07 20:26

ขอบคุณมากๆนะคะ

ปวดหัวกะบล็อกมากเลยเนี่ย~

จะลองเอาวิธีที่แนะนำมาไปทดลองดูนะคะ^^

#40 By Lee MinNam~ on 2009-08-01 15:13

blog นี้สวยจัง...แหม! เห็นแล้วอยากโยน...เอาไปทำให้หน่อย อิอิ...แต่ก็นั่นแหละนะ...ขืนทำเสร็จแล้วดีเลิศประเสริญศรีก็เบื่อแย่พอดี...ต้องมีไรทำเรื่อยๆถึงจะไม่เบื่อ...ป่านนี้คงนอนหลับแล้วซิเจ้าของบล็อก...Hot!

#39 By gohome356 on 2009-05-22 02:09

ดีค่ะเพิ่งเข้าวันแรกแล้วก็ทำวันแรกเหมือนกันได้เท่านี้เองอิอิHot!

#38 By gohome356 on 2009-05-22 02:06

รู้อย่างนี้ ดูดมาใช้ดีกว่าครับHot! Hot!

#37 By Zeedprogram on 2008-12-14 09:37

สุดยอดเลยครับ

#36 By Tosspol (125.26.145.160) on 2008-11-18 15:24

good job เลยครับเอนทรี่นี้Hot!

#35 By iQ180 on 2008-09-19 08:57

สุดยอดเลยค่ะ
จะลองเอาไปใช้นะ^___^

#34 By YUUTSUKI ]] on 2008-09-12 10:19

เข้ามาสำรวจก่อน...

55...

เดี๋ยวมาแอบจิ๊กไปใช้บ้าง...

question Hot! Hot! Hot!

#33 By Blue Bird Planet on 2008-09-09 01:31

ผมลงไว้นานแล้ว อาไว้ส่งโค้ดอย่างเดียว เพิ่งรู้ว่าทำอย่างนี้ก็ได้ด้วย ขอบคุณครับ ให้ดราก้อนบอลด้วย Hot! Hot! Hot!

#32 By เจ้าชายน้อย on 2008-09-05 22:00

โอ้ว จอร์จ พระเจ้า

มันเยี่ยม จริงๆ big smile

#31 By i - m e i i on 2008-08-28 07:40

อยากทำแบบนี้บ้าง แต่ใช้ IE อ่ะจิ

#30 By (^_^ ) (^_^) on 2008-06-27 20:46

โปรแกรมที่ว่าเนี่ย มานอยู่ตรงไหนอ่ะคะ หนูงงอ่ะ

คือหนูโง่อ่ะ เหอะๆๆ open-mounthed smile open-mounthed smile

#29 By Eternal-u.know on 2008-06-06 22:45

แวะเข้ามาเก็บจ้า ^ ^
แจ่มมากๆ เลย
เหมาะกับคนชอบแก้ css อย่างเราดี cry

#28 By DreamChaser on 2008-05-07 20:48

ลองไป แต่งบล๊อกให้ joumjim บ้างก็ดีนะคะ จืดชืดกว่าตัวอย่างข้างต้นอีกค่ะ sad smile
ลืมค่ะ ธีมใหม่สวยงามตระการตามากมาย สวยจริง ๆ ค่ะ
เก่งจังsurprised smile

#26 By sora no hime★空のひめ on 2007-12-02 20:29

Hot!ว้าว ยอดไปเลย วไม่คิดว่ามีตัวเสริมแบบนี้ด้วย ดีจัง

ขอบคุณนะคะที่นำมาฝาก ขอนำไปใช้บ้างก็แล้วกันนะคะconfused smile

#25 By sora no hime★空のひめ on 2007-12-02 20:29

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

โทนสีชมพูก็สวยดี แต่นาวอยากได้สีเขียวค่ะ เพราะที่รักของนาวเขาชอบสีเขียว

big smile จุ๊บๆ

#24 By MaNowZaa™ on 2007-12-01 19:50

#3ผมแก้ตัวหนัังสือตรง Footer ให้คมชัดแล้วนะครับbig smile

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

#20 เรื่องภาษาไทยนั้น ให้ไปติ๊ก minimum font size ผมเขียนเอนทรี่นี้ไว้เหมือนกัน
http://palermos.exteen.com/20071021/entry-3

# สิ่งที่หมาไฟทำไม่ได้ผมว่าอาจจะเป็นเรื่องของการเรนเดอร์ภาพซ้อนแบบในเอนทรี่นี้
http://palermos.exteen.com/20071024/entries-ie

# ขอบคุณทุกเสียงครับที่ชื่นชอบธีมนี้ ผมเปิดดู Stat วันนี้วัันเดียวม pageview ไปแล้ว 1,100+ ตกใจมากๆ เพราะปกติแค่ 300 ผมก็ฉลองเลี้ยงเหล้าเพื่อนแล้วครับ

# ว่างๆอารมณ์ดีๆ จะสอนแต่งบล็อกแบบจับมือพิมพ์ ทำให้อ่านแล้วกันครับ

#23 By palermos on 2007-12-01 19:43

ใส่ Flash ส่วน Head นี่จิ

ยังทำไม่ได้

ให้ Hot!

#22 By Maxtrix™ on 2007-12-01 19:34

ง่ะ หลินไม่ฉลาดป่าวอะ อ่านแล้วงงๆอะ

#21 By LhinKo^_^ on 2007-12-01 19:25

เจ๋งดีอ่ะ

แต่ว่าชอบเล่น ie มากกว่า

เพราะบางเว็บ ดูใน firefox แล้วตัวอักษรเล็กเว่อร์

#20 By KatereKun on 2007-12-01 19:20

ธีมบลอคสวยมากเลยครับconfused smile
จะว่าไปผมก็ลงปลักอินที่ว่านี้ไปตั้งนานแหละbig smile
แค่ก็ยังมึนๆงงๆกะโค๊ดต่อไป sad smile

#19 By worapoj@~@ on 2007-12-01 19:05

ใช้ firebug อยู่ ไว้จะไปเอา web developer มาลองบ้างละ

#18 By เจนเนสซ่า on 2007-12-01 17:55

เริ่ดมากๆ เพิ่งรู้เลยนะเนี้ย เดี๋ยวจะลองทำตามบ้าง เพื่อบลอคจะสวยแบบชาวบ้านเค้าสักที แต๊งค์ฮับdouble wink

#17 By Juro on 2007-12-01 17:25

Hot! confused smile เราก็ใช้วิธีนี้ เยี่ยมมากๆconfused smile

#16 By เอกน้อย on 2007-12-01 15:43

ขอแอดไว้น้า~

เทพมากมาย

เดี๋ยวขอตัวไปลองทำมั่ง^^"

หมาไฟเครื่องซียังไม่ได้ติดอ่ะนะ

เดี๋ยวไปเอาจากเครื่องน้องชายมาติดแล้วจะลองมั่ง^^" confused smile


ปล. ธีมงามมากๆ เลยชอบจังเลย
เฮดบล็อคงามสุดๆ เลย
เก่งมากๆ ค่ะ confused smile

#15 By [ Lucifer*Z ] on 2007-12-01 14:11

โอ้ น่าสนใจมากค่ะ ขอบคุณนะคะสำหรับคำแนะนำดีๆ แหะๆ พอดีเพิ่งลองใช้ firefox ก็เลยยังไม่รู้อะไรเท่าไหร่ confused smile

#14 By - Ryoku - on 2007-12-01 13:22

อุ้ย ขอบคุณค่า
เดี๋ยวนี้ หันไปเปลี่ยนใช้FireFoxบ้างล่ะ

#13 By on 2007-12-01 11:47

โอ้ววว...
มาเอาไปทำมั่งๆๆๆ

#12 By =Oktas= on 2007-12-01 09:21

เจ๋ง ...

#11 By อุดมเสี่ยว on 2007-12-01 08:42

บล๊อกสวยมากเลยค่ะ

จะลองเอาไปทำบ้าง ขอบคุณค่ะ >_<!

#10 By คาโอเรนจ้า on 2007-12-01 07:10

ใช้ firebug ก็โอเคนะ อิอิ

#9 By ฟิวส์ on 2007-11-30 23:55

เยี่ยมจริงๆ กำลังคลำอยู่พอดี ว่าจะใช้ยังไง ว่าแล้วอาทิตย์นี้ต้องลองมันซะหน่อย confused smile Hot!

#8 By ตุ้มเป๊ะ on 2007-11-30 23:32

เดี๋ยวจะลองใช้ดุบ้าง น่าจะทำให้การแก้ธีมทำได้ไวขึ้นนะ
ช่วงนี้ขี้เกียจอ่ะ ทำสวยๆแบบนี้ไม่เป็นด้วยสิ

#7 By MamiLuv on 2007-11-30 22:46

ว๊าวววว
คงไม่ได้ไปเปลี่ยนให้บล็อกเค้าจริงๆใช่มั้ยครับ 555+

Hot!...

#6 By ◄KAPOOK•KUN►MagisteR on 2007-11-30 22:14

หนูไอชอบธีมนี้จังเลยค่ะ big smile

#5 By Airin on 2007-11-30 21:47

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

ให้รายละเอียดกับทุกส่วนเลยนะครับ อยากบอกว่าชอบดินสอด้านล่างสวยดี แต่ภาษาไทยล่างสุดอ่ะ อ่านไม่ค่อยรู้เรื่อง แต่โดยรวมใช้ได้

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

#4 By หนึ่ง on 2007-11-30 21:20

ผมก็ใช้ web Developer นีเหลาะครับในการศึกษาส่วนต่างใน css ของ Exteen และของคนอื่น confused smile

ธีมใหม่สวยดีครับ

#3 By bbx on 2007-11-30 21:14

surprised smile ทรงพระเจริญ

Header แจ่มแจ๋วมากๆเลยค่ะ

เครื่องหนูมี Fire Fox ว่างๆคงต้องแอบแปะบ้างแล้ว
แต่ตอนนี้ไม่ค่อยกว่ายุ่งกับ CSS กลัว เจ๊ง sad smile

#2 By ire_u on 2007-11-30 21:02

จะลองดูแล้วกันนะ

#1 By I ✖ しんめ ~* on 2007-11-30 20:58