Code ที่พบเห็นบ่อยใน Blog

posted on 25 Feb 2007 11:38 by chubby in Review-Utilities

.
โค้ดพื้นฐานที่เห็นบ่อยๆ ในบล็อก ได้แก่ โค้ดแถบเล่นเพลง โค้ด Chat Box และโค้ด YouTube
ก่อนหน้านี้ มีคนถามวิธีลง Chat Box เหมือนกัน แต่เผอิญ Chat Box รุ่นก่อนไม่ค่อยถูกใจเท่าไร
ตอนนี้เปลี่ยนไปใช้ Chat Box เจ้าใหม่แล้วถูกใจ ก็ได้ฤกษ์นำเสนอวิธีการลงโค้ดทั้ง 3 แบบล่ะครับ
.
.
.
1. แถบเล่นเพลง
.
Pic.1
.

ตัวอย่างโค้ด
<embed style="LEFT: 10px; WIDTH: 300px; TOP: 15px; HEIGHT: 45px" src="xxxxx" width="300" height="45" type="text/plain; charset=TIS-620" autostart=0 />
.
width คือ ความกว้างของแถบเล่นเพลง จะกำหนดให้กว้างเท่าไรก็ได้ ขอให้ตัวเลขเท่ากันทั้ง 2 จุด
xxxxx คือ url ของเพลง ควรฝากไว้กับ Host เก็บข้อมูล ที่อนุญาตให้ทำ Direct Link ออกมาได้
autostart=0 คือ ต้องกดปุ่ม play เพื่อเล่นเพลง
autostart=1 คือ เพลงจะขึ้นมาเองโดยอัตโนมัติ
ทั้งนี้ Firefox ใช้เลข 0 , 1 แทนค่า false, true <-- ขอขอบคุณ จิน ที่ทักตรงจุดนี้ใน Entry ก่อน
ผมก็เลยทดลองใช้เลข 0 , 1 แทนค่าจนใช้งานได้ละครับ :D
.
Edit เพิ่มเติม สำหรับเพลง .mp3 : ขอบคุณคุณ Cyborg9 ที่อธิบายความรู้ใหม่ๆ ครับ :D
.
เดิม ---> type="text/plain; charset=TIS-620"
โค้ดข้างบนนี้สามรถใช้งานได้ตามปรกติกับไฟล์ .wma แต่บน Firefox จะมีปัญหากับไฟล์ .mp3
หากท่านใดจะลงเพลงที่มีนามสกุล .mp3 ล่ะก็ ให้ตัดไป หรือแก้ไขโค้ดตามบรรทัดข้างล่างนะครับ
แก้เป็น ---> type="application/x-mplayer2"
หากบล็อกเกอร์ท่านใดใช้งาน Internet Explorer เป็นหลัก สามารถใช้โค้ดเดิมได้ตามปรกติครับ
.
.
.
2. YouTube
.
Pic.2
.

ตัวอย่างโค้ด
<object width="425" height="350">..........</embed></object>
width คือ ความกว้างของพื้นที่แสดงภาพจาก YouTube ซึ่งเราสามารถปรับขนาดตัวเลขได้
height คือ ความสูงของพื้นที่แสดงภาพจาก YouTube ซึ่งเราสามารถปรับขนาดตัวเลขได้
.
YouTube เว็บรวมคลิปวีดีโอยอดนิยมในปัจจุบัน แต่ละคลิปจะมีโค้ดมาให้เรียบร้อยเสร็จสรรพแล้ว
.
Pic.3 ตำแหน่งของโค้ดในเว็บ YouTube
.

.
ขั้นตอนการลงแถบเพลงหรือคลิปวีดีโอ
.
Pic.4 ในหน้าต่างเขียน Entry ให้เปลี่ยนเป็น Text Mode โดยการกดปุ่มสัญลักษณ์ <>
.

.
Pic.5 เมื่อเปลี่ยนเป็น Text Mode แล้ว ให้ Copy โค้ดในข้อ 1 หรือ 2 แล้ว Paste ลงไป
.

.
แถบเพลงหรือคลิปถูกใส่ลงไปเรียบร้อยแล้ว กลับสู่โหมดเดิมด้วยการกดปุ่มสัญลักษณ์ <> อีกครั้ง
.
.
.
3. Chat Box
.
Pic.6
.

ตัวอย่างโค้ด
<iframe title="xxxxx" src="xxxxx" width="170" height="400"
frameborder="0" scrolling="auto"><a href="xxxxx"> View shoutbox</a></iframe>
.
ตอนแรกใช้ Cbox ( http://cbox.ws/ ) ตอนนี้ใช้ ShoutMix ( http://www.shoutmix.com/ )
เนื่องจากแสดงผลบน Firefox ได้ดีกว่า และโค้ดของ ShoutMix ก็สั้นกว่า Cbox ร่วมเท่าตัว
และยังสามารถลบหรือบล็อคข้อความจากหน้าต่าง Chat Box ได้โดยตรง โดยไม่ต้องเข้าไปแก้ในเว็บ
.
Pic.7 ตำแหน่งของโค้ดในเว็บ ShoutMix
.

.
ขั้นตอนการลง Chat Box
.
Pic.8 กดปุ่ม Manage Blog
.

.
Pic.9 ไปที่ Preferences --> Links
.

.
Pic.10 ไปที่ Add new Link และนำโค้ด Chat Box ที่ได้มาใส่ลงในช่อง Description
.

.
กดปุ่ม Add แล้วย้อนกลับไปหน้าบล็อกด้วย view your blog จะเห็น Chat Box ในแถบเมนู
.
.
.
บ่นไปเรื่อยเปื่อย
รถสีขาวก็คือรถสีขาว ต่อให้เขียนเป็น "รถที่มีสีขาว" "รถของนาย ก. ที่มีสีขาว" มันก็คือรถสีขาวอยู่ดี
รถสีขาวเอาไปลุยโคลนจนกลายเป็นรถสกปรก จะเขียนเป็น "รถที่สกปรก" "รถของนาย ข. ที่สกปรก"
มันก็คือรถสกปรก ไม่ใช่รถสะอาด (บางคนชอบตีความให้มันกำกวมขึ้น ไม่รู้มีปมด้อยอะไรกันนักหนา)

Tags: blog, chat box, code, youtube22 Comments

ขอบคุณสำหรับ code ต่างๆ ^^

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

#1 By Little Lamb on 2007-02-25 12:07

มีประโยชน์มากครับพี่

#2 By กรรมกรไซเบอร์ on 2007-02-25 12:37

ฮ่าๆ ตามไปบล๊อกนู้น แล้ว...

เราก็อย่าเป็นแบบนั้นก็พอครับ

#3 By ไอ้หมูหินจ้า on 2007-02-25 14:18

ช่วงนี้คงเครียดกัน เปิดidolm@ster ดูแก้เซ็งไปพลางดีกั่ว อิอิ

#4 By ไอ้หมูหินจ้า on 2007-02-25 14:19

ตลกดี lol
ขอบคุณสำหรับ code นะครับพี่ป๋อ

#5 By Yoshii on 2007-02-25 15:03

สงสัยอย่างนึง ทำไม entry บางอันอย่างทางน้ำไหลนี่ มันโผล่ใน google reader แต่ผมคลิกเข้ามา ก็ขึ้น entry นี้ถูกลบไปแล้ว แสดงว่ามัน hide อยู่ใช่มั้ยครับ ?

#6 By กรรมกรไซเบอร์ on 2007-02-25 15:27

google reader นี่ผมไม่ได้ใช้ ก็เลยตอบไม่ได้ครับ
แต่ search ปรกติด้วยคำว่า "กรณีศึกษาทางน้ำไหล" ก็เข้าจาก google ได้ตามปรกตินี่ครับ ?

#7 By chubby on 2007-02-25 15:31

มารับโค้ต chatbox ไปละครับ

#8 By gabbah on 2007-02-25 15:33

(ต่อ)
ยกเว้นว่าเจ้า reader ตัวนั้นจะบุ๊คปลายทางเอาไว้ที่ reply ที่ถูก hide ไว้ ก็เป็นไปได้ครับที่จะเปิดไม่ขึ้น
entry นั้นผม hide เกือบหมดเลยครับ เพราะมีคนมีปัญหากับคนนั้น คนนี้ คนโน้นในกล่อง comment หลายคน
หลังจาก hide คู่กรณีหลายคู่ รวมข้อความที่เกี่ยวกับเหตุการณ์ดังกล่าวแล้ว ผมก็กลับไปปรับเนื้อหาใน entry นั้นให้เป็นเหมือนเดิม อย่างที่ผมเขียนมาแต่แรก

#9 By chubby on 2007-02-25 15:37

พี่ป๋อเฝ้าดูทุกนาทีเปล่าเนี่ย ผมเข้ามาใหม่เห็นบล็อคกอัพเดท มีตัวสีเทาเพิ่มมาบ่อยจัง อิๆ

#10 By กรรมกรไซเบอร์ on 2007-02-25 17:53

ช่วงนี้ลองปรับสีไปมา ไม่ให้เนื้อหารองดูเด่นเกินเนื้อหาหลักน่ะครับ

#11 By chubby on 2007-02-25 18:11

ขอบคุณสำหรับวิธีติดตั้ง chatbox มากค่ะ Blog จะได้หรู IISD ไฮโซซะที โฮ๊ โฮะๆๆ

#12 By = HIMA = on 2007-02-25 20:26

ขอบคุณสำหรับโค้ดนะคะ :D
กำลังอยากลง chatbox พอดี กระจ่างขึ้นเยอะเลยค่ะ

#13 By ตาลเอง on 2007-02-26 14:45

โค้่ดเพลงตรงนี้
type="text/plain; charset=TIS-620"

ใช้กับไฟร์ฟอกซ์ไม่ได้ และมันก็ประหลาดๆด้วยครับ
ถ้าไม่ตัดออกไปเลย ก็ควรจะเปลี่ยนเ็ป็น

type="application/x-mplayer2"