<:: Closed { iDDream } 2.0!!

ลำดับตอนที่ #7 : ✖ Howto::> ทำไอดีดรีมแบบดั้งเดิม #4

และแล้วจากบทที่แล้วเราก็ใกล้เสร็จกันแล้วนะครับ เหลืออีกนิดเดียวคือผมยังไม่ได้สอนใส่ Shoutbox ซึ่งเราจะมารู้จักกับ Shoutbox และพอติดตั้งเสร็จก็ถึงเวลาเอาลงแล้ว!! >< สำหรับคนที่ไม่รู้ว่า Shoutbox คืออะไร ผมจะบอกให้เลยนะครับ

Shoutbox คืออะไร ?
Shoutbox แปลตรงตัวคือ กล่องตะโกน ซึ่งความหมายก็ไม่ต่างกันเท่าไหร่ Shoutbox นั้นเป็นกล่องสำหรับโพสข้อความทิ้งไว้นั่นเอง โดยเว็บที่ให้บริการทำ Shoubox ก็มีหลายเว็บ เช่น shoutmix, c-box แต่ที่ผมจะสอนคือ shoutmix เพราะว่าง่าย และมีปัญหาน้อยที่สุดครับ



หน้าตาของ Shoutbox จาก Shoutmix คร่าวๆ จากไอดีของผม

เอาหละ เมื่อทราบความหมายกันไปแล้ว ก็มาดูวิธีการใส่ shoutbox ลงไอดีดรีมของเรากัน ทำไมต้องใส่ Shoutbox น่ะหรอครับ ? ก็เพราะว่า Qmsg. ของเราหายไปแล้วไงครับ =) ถ้าไม่ได้ทำลิงก์ไปหน้า Qmsg. ก็ควรจะใส่ หรือแม้แต่ใส่ลิงก์แล้ว ถ้าใส่ Shoutbox ด้วยก็ดี เพราะบางคนขี้เกียจกดลิงก์ไป Qmsg ครับ

ก่อนอื่นเข้าไปที่เว็บของทาง Shoutmix http://www.shoutmix.com



เข้าไปแล้วก็กด Create Shoutbox ครับ



แล้วก็กรอก User,Password บลาๆๆ เหมือนสมัครเว็บทั่วไปเลย


อย่าลืมติ๊กตรง I have read and agree to the Terms of Service. แล้วก็กด Continue ครับ ทีนี้รอสักพัก มันก็จะเข้าหน้า Settings ให้เราทันที



พอเข้ามาแล้ว ผมจะสอนคร่าวๆ นะครับว่าปรับอะไรตรงไหน ก่อนอื่นเราต้องปรับหน้าตา,สี,บลาๆๆๆ ของกล่องนี้ดูก่อน ไปดูตรงส่วน Display แล้วเลือก Style & Colors ครับ



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



เราสามารถแก้สีส่วนต่างๆ ได้ ตรง Text,General,Input อันนี้อยากให้ลองเองมากกว่าครับว่าส่วนไหนเป็นอะไร เอาละ สมมุติว่าแต่งเสร็จแล้วก็กด Save Settings แล้วไปดูข้างๆ ตรง Navigation กด Back to settings



แล้วเราก็จะกลับมาหน้าเดิม ทีนี้ดูที่ Display เหมือนเดิม ไปที่ Date & Time เราจะปรับเวลากัน



พอเข้ามาแล้วก็เลือกตรง Timezone เป็น Asia/Bangkok



เสร็จแล้วที่เหลือจริงๆ ไม่จำเป็นต้องตั้ง Save Settings ไปเลยครับ เซฟเสร็จก็กด Back to Settings เหมือนเดิม



ทีนี้ ดูที่ Display เหมือนเดิม (อ่าๆๆ ใกล้หมดแล้วครับ ใจเย็นๆ) เราจะเปลี่ยนภาษากัน กดที่ Labels ครับ



กดเสร็จปั๊บ ก็จะมีหน้านี้ขึ้นมา ผมจะบอกคร่าวๆ ว่าส่วนไหน คืออะไรเวลาแสดงผลนะครับ



Title ไม่ต้องแก้ครับ ไม่มีผลอะไรเท่าไหร่
link,mail คือเวลาคนโพสลิงก์มันขึ้นคำนี้แทนลิงก์ยาวๆ ส่วนเมลก็ทำนองเดียวกัน แต่เป็นอีเมล ดูจากรูปได้ครับ (แนะนำให้ใส่คำว่า "ลิงก์" กับ "เมล")
On,Off ไม่ต้องเปลี่ยนครับ ไม่ได้ใช้ Premium
Link Label ไม่ต้องเปลี่ยนครับ ไม่ได้ใช้ Premium
Link URL เว้นว่างครับ
Register ไม่ต้องเปลี่ยนครับ ไม่ได้ใช้ Premium
User online นับจำนวนคนใช้ shoutbox ครับ เปลี่ยนก็ได้ (แนะนำให้ใส่คำว่า "ออนไลน์")
Name คำที่นำหน้าช่องใส่ชื่อครับ (แล้วแต่จะใช้ครับ นาม,ชื่อ,นามการ,ใครอ่ะ ?)
Website/Mail คำนำหน้าช่องใส่เว็บ/อีเมล (ใช้คำว่า "เว็บ" เฉยๆ ก็โอเคครับ)
Message คำนำหน้าช่องใส่ข้อความ (อะไรก็ได้ จะพลิกแพลงให้แนวๆ อย่าง "บอกไรอ่ะ ?" ก็ได้ แต่แนะนำว่าไม่ควรยาวมาก)
Refresh ข้อความของปุ่มรีเฟรช Shoutbox เพื่อให้แสดงข้อความใหม่ๆ ได้ (ปกติจะรีเฟรชอัตโนมัติ ถ้าไม่ทันใจจะใช้ปุ่มนี้ได้)
Shout ข้อความของปุ่มตะโกน พูดง่ายๆ คือปุ่มโพสข้อความอ่ะแหละ
Guest จะเป็นชื่อปกติของคนที่เข้ามา (ใส่อะไรก็ได้ เช่น "มนุษย์เร่ร่อน")
Previous คำแทนคำว่า Previous ใช้ดูข้อความก่อนหน้า (แนะนำ "ก่อน")
Next คำแทนคำว่า Next ใช้ดูข้อความที่ตกไปหน้าอื่นแล้ว (แนะนำ "หลัง")

เสร็จแล้วก็ Save Settings แล้วก็ Back to Settings เหมือนเดิมม



ทีนี้ตรง Display จริงๆ สามารถปรับได้อีกคือ Smileys แต่จะไม่สอนนะครับ แนะนำมั่วเองดีกว่า เพราะมันไม่สำคัญเท่าไรนัก ถึงตรงนี้ผมถือว่าปรับแต่ง Shoutbox เสร็จแล้วก็ได้เวลาเอาลง แต่เดี๋ยวก่อน ไปที่ Dreamweaver ก่อน แล้ววาด Layer ที่ต้องการจะใส่กล่อง Shoutbox รอไว้เลย



เสร็จแล้วก็ดูที่แถบข้างล่าง ตรง W & H (ความกว้าง ความสูง) จำไว้ให้ดีๆ นะครับ



แล้วก็กลับมาที่ Settings ของ Shoutmix อีกครั้ง ดูตรง Quick Start กด Get Codes



ดูตรงที่ปรับขนาด ไม่ควรให้ความกว้าง+ความสูงเกินที่เราจำไว้



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



แล้วทีนี้ก็กลับมาที่ Dreamweaver กดข้างในตัวกล่องที่วาดไว้ให้ cursor เราไปกะพริบข้างในก่อน



แล้วก็ไปที่แท็บโค้ด วางโค้ดลงไป



แล้วก็กลับมาที่แท็บ Design จะเห็นมันมีกล่องเทาๆ อยู่ กับลิงก์เขียนว่า Shoutmix chat widget ให้ลบลิงก์ทิ้ง มันเกะกะ



พอลบแล้วก็ไปที่แท็บโค้ดใหม่ หาโค้ดแถวๆ เดิมที่เราวางลงไป หาคำว่า View Shoutbox แล้วลบโค้ดตั้งแต่ <a href="....">...View Shoutbox...</a> ไปให้หมดครับ



พอลบทิ้งแล้ว เราควรจะให้กล่องนี้จัดกลางครับ (ในกรณีที่กล่องไม่ได้ใหญ่เท่า Layer ที่เราวาดไว้) โดยสามารถทำได้โดยหา <div.... ที่อยู่ก่อนหน้า โค้ดที่เราวาง แล้วเติม align="center" ลงไป ดังรูป



เสร็จแล้วเราก็พรีวิวได้แล้วครับ อย่าลืมเซฟก่อนน้า >w<



มาแล้วครับ >< Shoutbox ของเรา การติดตั้ง Shoutbox ก็เป็นอันเสร็จสิ้น

เอ้อ ลืมบอกไป ในกรณีที่ต้องการจะแก้การตั้งค่าของ Shoutbox ให้เข้าไปที่ Shoutmix แล้วล็อกอินจากหน้าแรกด้วย User & Password ได้เลยครับ

บทนี้พอแค่นี้ก่อนครับ บทหน้าเป็นบทสุดท้าย คือการเอาลงนั่นเอง >w< อย่าพลาดครับ จบบทหน้าแล้วผมยังมีทริคในการทำไอดีดรีมแบบอื่นๆ อีก โปรดติมตามมม!!