หัดเขียนโคดใส่ข้อความแบบยากๆๆกันค่ะ มาหัดเขียนโคดข้อความบนโนตดุ๊กดิ๊กแบบยากๆๆกันค่ะ ดูตัวอย่างโนตดุ๊กดิ๊ก  และ  โคด ด้านล่าง ถ้ารูปที่เห็นเป็นแบบนี้หมดก็จะทำให้เขียนข้อความได้ง่ายๆๆใช่มั้ยคะ   เขียนข้อความ   แต่ไม่ใช่...รูปมีแบบน่ารักๆๆแตกต่างกันไป  อย่างเช่น  รูปที่เห็นด้านล่าง.... เรามีวิธีเขียนข้อความให้อยู่ตรงช่องสำหรับเขียนแบบพอดีๆๆ...... สมมุตนี่คือรูปที่เราต้องการ....ให้เราใส่รูป  ใส่ขนาด  ความกว้าง คูณ ความสูง  ของรูปโดยใช้โคดด้านล่างค่ะ...     <table border="0" cellspacing="20" width="230" align="center" style="background-image: url('...ใส่..//..ของรูป..'); height: 230px"><tbody><tr><td align="center" valign="middle">ใส่กรอบอีกชั้นที่นี่</td></tr></tbody></table>   พอสร้างเสร็จแล้ว  เรามาดูที่รูปว่า  ช่องที่เราจะเขียนข้อความ อยู่ที่ด้านล่างของรูป ให้เราแก้ที่พิมพ์  สีแดง  (ที่จขบ. กำกับไว้ที่โคดด้านบน)...แก้ที่  align="center" valign="middle" เป็น  align="center" valign="bottom"  ซึ่งหมายถึง  ตอนกลาง แถวล่าง  ของรูปซึงมีช่องข้อความเล็กๆไว้ให้เราใส่ข้อความ... ให้เราสร้างกรอบที่มองไม่เห็นด้วยตาเปล่าขึ้นมาอีก1กรอบ...(...แต่ จขบ.  จะทำให้เห็นว่ากรอบที่เรามองไม่เไห็นด้วยตาเปล่าเป็นแบบใหน.....)  ใส่ขนาดให้มีขนาดเล็กเท่าๆๆกับช่องข้อความที่เราจะเขียน โดยดูที่รูปซึ่งมีขนาด  width="230" height: 230px"  เราก็ใส่ขนาดให้เล็กกว่ารูปเท่าไหร่คำนวน กันเอาเองนะคะ....จขบ.ใส่ขนาดที่...180px; height: 90px" เขียนข้อความ หรือ  ใส่ตามโคดด้านล่างค่ะ ..ซึ่งมีขาดเท่าๆกับช่องที่เราจะเขียนข้อความพอดีๆๆเลยค่ะ   <table border="0" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td align="center" valign="middle" style="width: 180px; height: 90px">เขียนข้อความ</td></tr></tbody></table>   จัดเสร็จแล้วก็อปปี้โคดทั้งหมดไปวางที่โคดที่เราใส่รูปและจัดขนาดเรียบร้อยแล้วด้านล่างค่ะ  <table border="0" cellspacing="20" width="230" align="center" style="background-image: url('...ใส่..//..ของรูป..'); height: 230px"><tbody><tr><td align="center" valign="bottom">ใส่กรอบอีกชั้นที่นี่</td></tr></tbody></table> พอจัดสร็จแล้วเราก็จะมีที่เขียนข้อความขนาดพอดีๆๆกับรูป ถ้าต้องการจะใส่  โคดมาคี  หรือ  ข้อความเลื่อนๆๆ  ให้ดู ที่โคดมาคีค่ะ เราจะใส่คำสั่ง  ความกว้าง คูณ ความสูง  ของข้อความเข้าให้มีขนาดเท่ากันกับ กรอบชั้นที่2 คือ  width=150 height=100  และใส่คำสั่งให้ข้อความอยู่ชิดซ้าย  ชิดขวา  หรือ กลาง หรือเว้นบันทัดให้อ่านได้ง่ายๆขึ้น......... โดยให้เราจัดข้อความที่ต้องการให้เลื่อนๆๆก่อนจะนำไปวางที่โคดด้านล่าง....ดูตัวอย่างที่ จขบ.เขียนก่อนที่จะนำไปวาง เพื่อความสวยงามแบบมืออาชีพ   <p align=left> เวลาอยู่ต่อหน้าคนที่คุณรัก หัวใจคุณจะเต้นแรง<br/><br/> แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ความสุขจะมาเยี่ยมเยือนคุณ<br/><br/> เวลาอยู่ต่อหน้าคนที่คุณรัก ฤดูหนาวจะดูเหมือนฤดูใบไม้ผลิ<br/><br/> แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ฤดูหนาวจะสวยสดงดงามกว่าปกติ</p> ปอลอ...อย่าลืมใส่ขนาด  ใส่สี  และรูปแบบ  ของฟอนท์ให้เหมาะกันด้วยนะคะ   <font face="tahoma,arial,helvetica,sans-serif" size="2" color="#FFA154">ใส่ข้อความ</font>   เมื่อเขียนเสร็จแล้วก็อปี้ทั้งหมดไปวางที่โคด  มาคี  ด้านล่าง.......ที่เราใส่ขนาด  ความกว้าง คูณ ความสูง  เรียบร้อยแล้ว   <marquee width=150 height=100 direction=up scrollamount=1>ใส่ข้อความที่ต้องการให้เลื่อนๆๆที่นีั่</marquee>   จัดวางจ้อความที่เราต้องการให้เลื่อนๆๆ เสร็จแล้ว ก็อปปี้โคดทั้งหมดมาวางที่โคด  ที่เราจัดเสร็จเรีบยร้อยแล้ว..ด้านล่าง    <table border="0" cellspacing="20" width="230" align="center" style="background-image: url('...ใส่..//..ของรูป..'); height: 230px"><tbody><tr><td align="center" valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" align="center"><tbody><tr><td align="center" valign="middle" style="width: 180px; height: 90px">ใส่ข้อความเลื่อนๆๆที่นี่ค่ะ</td></tr></tbody></table></td></tr></tbody></table>   ทีนี่...เราก็จะทีข้อความ  ที่เราเขียน  เลื่อนๆๆบน โนตดุ๊กกดิ๊กๆน่ารักๆๆที่ ผ่านการจัดวาง และนำเสนออวดเพื่อนๆๆที่เข้ามาเยี่ยมชมบล็อคของเราแบบมืออาชีพ...ตามตัวอย่างด้านล่างค่ะ   เวลาอยู่ต่อหน้าคนที่คุณรัก หัวใจคุณจะเต้นแรง แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ความสุขจะมาเยี่ยมเยือนคุณ เวลาอยู่ต่อหน้าคนที่คุณรักฤดูหนาวจะดูเหมือนฤดูใบไม้ผลิ แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ฤดูหนาวจะสวยสดงดงามกว่าปกติ   กับอีก1ตัวอย่างของรูป.....ถ้ารูปที่เราต้องการเป็นแบบด้านล่าง ให้ดูที่  โคดแลพดูที่  พิมพ์ที่เป็นสีๆๆที่จขบ. กำกับไว้ ทุกสีเปลี่ยนแปลงได้ค่ะ   ใส่ขนาด  ความกว้าง คูณ ความสูง  ของทั้ง2กรอบ รวมทั้ง โคดมาคี  หรือ ทั้ง 3 ขั้นตอนแล้ว...มาดูที่ พิมพ์สีแดง เปลี่ยนจาก   align="center" valign="bottom"  เป็น  align="center" valign="top"  หรือตอนกลาง แถวบนของรูป    เราก็จะได้  แบบนี้ค่ะ......   เวลาอยู่ต่อหน้าคนที่คุณรัก หัวใจคุณจะเต้นแรง แต่เวลาอยู่ต่อหน้าคนที่คุณชอบความสุขจะมาเยี่ยมเยือนคุณ เวลาอยู่ต่อหน้าคนที่คุณรักฤดูหนาวจะดูเหมือนฤดูใบไม้ผลิ แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ฤดูหนาวจะสวยสดงดงามกว่าปกติ   หรือ  จขบ. จะยกตัวอย่างแบบง่ายๆๆ ของ   align="right" valign="bottom" ที่อยู่กับกรอบชั้นแรกให้สังเกต์และนึกภาพแบบง่ายๆๆนะคะ..... กรอบทุกกรอบหรือ  table  ทั้งหมดที่สร้างด้วยโคด  html  แบบพื้นฐาน (..มีซับซ้อนกว่านี้อีกนะคะ.แต่เอาแบบพื้นฐานก่อนละกัน.) ใน1กรอบจะมีอยู่ 9 ช่องด้วยกัน ที่เราจะใช้คำสั่ง กับ  ข้อความที่กำหนดด้วย align="right" valign="bottom"  ดูตามหมาเลขนะคะ.....   11 22 33 . 44 55 66 77 88 99   11.......align="left" valign="top"  หรือ  มุมซ้าย  ตอนบน  ของกรอบ 22....... align="center" valign="top"  หรือ  กลาง  ตอนบน  ของกรอบ 33.......align="right" valign="top"  หรือ  มุมขวา  ตอนบน  ของกรอบ 44.......align="left" valign="middle"  หรือ  มุมซ้าย  ตอนกลาง  ของกรอบ 55.......align="center" valign="middle"  หรือ  กลาง  ตอนกลาง  ของกรอบ 66....... align="right" valign="middle"   หรือ  มุมขวา  ตอนกลาง  ของกรอบ 77.......align="left" valign="bottom"  หรือ  มุมซ้าย  ตอนล่าง  ของกรอบ 88.......align="center" valign="bottom"  หรือ  กลาง  ตอนล่าง  ของกรอบ 99....... align="right" valign="bottom"  หรือ  มุมขวา  ตอนล่าง  ของกรอบ ทั้งหมด  คือคำลั่งทีี่ใช้กับ   align="center" valign="middle"  ในแต่ละช่องกรอบ  table แต่ถ้าเราจะใช้คำสั่งนี้  กับกรอบ  table  ทังกรอบเลย  ดูที่ align="center"  แถวแรกของ  โคดกรอบ  table  ให้อยู่ี  align="center"  align="left"  align="right"   หรือดูโคดด้านล่าง  ที่  จขบ. จะใช้คำสั่ง  ทั้งหมด  ให้กับทั้ง  2  กรอบ ที่เขียนๆๆไว้ข้างต้นค่ะ ดูที่รูปด้านล่างนะคะ....จะจัดยังไง ให้ข้อความที่เราเขียนอยู่พอดีกับช่องที่กระดาษโนตดุ๊กดิ๊กกำหนดมาให้.....     ใส่ขนาด  ความกว้าง คูณ ความสูง  ของทั้ง2กรอบ รวมทั้ง โคดมาคี  หรือ ทั้ง 3 ขั้นตอนแล้ว...มาดูที่ พิมพ์สีแดง คำสั่งแรก  จขบ. สั่งให้  กรอบอยู่ตรงกลาง   หรือ  ไม่ว่าเพื่อนๆๆจะวางกรอบอันนี้ที่ใหนๆๆ ก็จะเห็นอยู่ตรงกลางตลอด ไม่ว่าโคดตัวใหนๆๆก็เปลี่ยนไม่ได้ค่ะ...ถ้าไม่แก้ที่  align="center"   align="left"  หรือ  align="right"  หรือสั่งให้กรอบย้ายมาอยู่  ด้านซ้าย  ด้านขวา  ตามความต้องการ จากนั้น มาดูืั้  พิมพ์ สีฟ้า  จขบ.  ใช้คำสั่ง    align="right" valign="bottom"   หรือ  มุมขวา  ตอนล่าง  ของกรอบ    จากนั้นมาดูที่  พิมพ์ สีเขียว  (กรอบชั้นที่2 ) ที่กำหนดให้มีขนาดเล็กว่ากรอบชั้นแรก  จขบ. ใช้คำสั่ง align="right" หรือสั่งให้กรอบวางอยู่ที่  มุมขวา   ของรูป แค่เปลี่ยนจาก   align="center"  เป็น   align="right"  เราก็จะได้  แบบนี้ค่ะ...... หรือถ้าช่องข้อความอยู่ด้านซ้าย  ก็เปลี่ยนจาก  ขวา  มาเป็น  ซ้าย  แค่นั้นเองค่ะ   <table border="0" cellspacing="20" width="200" align="center" style="background-image: url('//i410.photobucket.com/albums/pp188/p00nim/note-dookdik2/x1pPHu2K6HCG6qDaqSp3VHhE_AhDvnXiw0z.gif'); height: 200px"><tbody><tr><td align="right" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" align="right"><tbody><tr><td align="center" valign="middle" style="width: 95px; height: 70px">ใส่โคดข้อความเลื่อนๆๆที่นี่< /td></tr></tbody></table></td></tr></tbody></table>   เวลาอยู่ต่อหน้าคนที่คุณรัก หัวใจคุณจะเต้นแรง แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ความสุขจะมาเยี่ยมเยือนคุณ เวลาอยู่ต่อหน้าคนที่คุณรักฤดูหนาวจะดูเหมือนฤดูใบไม้ผลิ แต่เวลาอยู่ต่อหน้าคนที่คุณชอบ ฤดูหนาวจะสวยสดงดงามกว่าปกติ เห็นมั้ยคะ ง่ายๆๆไม่ยากเลย  แต่ถ้าอ่านแล้วไม่เข้าใจ  หรือสับสน หรือไม่สนใจ  หรือแค่อ่านผ่านๆๆไม่เป็นไรค่ะ  แต่ถ้าวันใหนเจอรูปที่รูปที่ถูกใจ  อยากจะใส่ข้อความไว้อวดเพื่อนๆๆลองเปิดเข้ามาอ่านดู ก็จะทำให้เข้าใชได้ง่ายขึ้นค่ะ   Create Date : 21 กันยายน 2551 19 comments Last Update : 24 กันยายน 2553 20:25:00 น. Counter : 6842 Pageviews. Share Tweet

โดย: lozocat 21 กันยายน 2551 4:01:13 น.

เป็นความรู้มากเลย ขอบคุณมากค่ะ คุณแคท   โดย: June4 21 กันยายน 2551 4:36:13 น.

น่ารักดีค่ะคุณแคท ไว้จะมาเอาไปใช้นะค่ะ ขอบคุณค่ะ   โดย: thattron 21 กันยายน 2551 8:06:14 น.

สวยและจะลองทำดูค่ะ   โดย: Cheria (SwantiJareeCheri ) 21 กันยายน 2551 12:19:30 น.

ขอบคุณคะมาเกบหน้าไว้ไปใช้คะ   โดย: หนึ่งคิด 21 กันยายน 2551 14:40:20 น.

ขอเก็บกระดาษโน้ตไปก่อนนะคะคุณแคท แต่เรื่องหัดทำต้องขอเวลาหน่อยค่ะ อิอิ เรื่องแบบนี้หัวช้ามากๆ ค่ะ   โดย: อุ่นตะวัน 21 กันยายน 2551 15:39:29 น.

สวัสดีค่ะ เวาะมา ขอบคุณคะ ส่วนใหญ่ก็จะ Copy Code ไปใช้เลย . เพราะถ้าทำเองคงไม่ไหว ทำ Link มาที่ Blog แล้วนะค่ะ   โดย: ต้อยตุ๋มต๋อง 23 กันยายน 2551 12:53:10 น.

ขอบคุณอีกครั้งนะคะ สำหรับโค้ดดีดีที่มีให้เสมอ จะลองอ่านอยางละเอียดและลองหัดทำดูค่ะ   โดย: ตะไคร้หอม 25 กันยายน 2551 8:53:02 น.

ขอบคุณมาก ๆ นะคะ สำหรับความรู้ใหม่ ๆ จะลองเอาไปทำดูบ้างค่ะ   โดย: poon_ja7 26 กันยายน 2551 18:25:45 น.

ลูกศิษย์ของลงชื่อไว้ก่อนนะคะ จะมาเรียนภายหลัง ขอบคุณค่ะ   โดย: ดา ดา 25 ตุลาคม 2551 9:54:25 น.

♥ ชอบแบบสำเร็จ ง่ายดีค่ะ♥   โดย: ก้าวไปตามใจฝัน 13 มกราคม 2552 10:33:07 น.

แวะมาศึกษา ขอบคุณมาก ค่ะ ^ ^   โดย: ศรีสุรางค์ 31 มกราคม 2552 9:36:19 น.

สุดยอดฝีมือ แต่อ่านแล้วรู้สึกว่ายากมาก มีเวลาจะกลับมาอ่านอย่างจริงจังอีกครั้ง   โดย: pantipngon 20 กุมภาพันธ์ 2552 9:44:13 น.

lสวัสดีค่ะ เย้ๆ ๆ ทำได้ด้วยค่า คริ ๆ เชิญคุณครูตรวจงานที่บล็อกด้วยนะคะ คริ ๆ ขอบคุณสำหรับความรู้ใหม่ ๆ ค่า ช่วงนี้สนุกสนานกับการแต่งบล็อกมาก ๆ ค่ะ แล้วก็เข้าบล็อกคุณlozocat ทุกวันเลยค่ะ   โดย: -+-JuStThEgIrL-+- 11 เมษายน 2552 21:30:54 น.

บล๊อกนี้สีหวานจัง   โดย: kapeak 8 มิถุนายน 2552 10:53:15 น.

ทำบล็อคได้น่ารักมั่กมากเลยคะ ^ ^   โดย: YaWeN 9 สิงหาคม 2552 23:03:39 น.

จริง ๆ ค่ะ ถ้าก๊อปมาใช้เลย ก้อจะดีนะคะ เพิ่งจะเริ่มหัดทำค่ะ ก๊อปไปแล้วด้วยค่ะ อิอิ ว่าแต่จาเอาโค๊ตรูปภาพ หรือ อีโมทีให้มาจากไหนอ่ะคะ แล้ว ถ้าเราใช้ธีมสำเร็จรูปที่ ก๊อปมา เราสามารถจะเปลี่ยน หรือเพิ่มเติม ได้ไม๊คะ หรือว่าต้องใช้ตามนั้นเลย กวนหน่อยน๊าค๊า ไม่รู้จิง ๆ นิ รู้สึกว่าจาง่วงเพราะตาลาย ขอแน๊พหน่อยนะคะ หุหุ   โดย: eungeang 15 มกราคม 2553 1:19:29 น.

สวัสดีค่ะ ก้ามปูนะคะ ขอบคุณนะคะน่ารักทุกรูปเลย มาแอบจดแอบจำแอบดึงไปใช้ แต่ก้อยัง งงๆๆเง็งๆๆอยู่ค่า ลองเข้าไปดูหน้าบ้านก้ามปูได้นะคะ ยังไงก้อช่วยแนะนำหน่อยนะคะ ขอบคุณค่ะ   โดย: ก้ามปู (poo_puppo ) 25 กรกฎาคม 2553 15:15:17 น.

ขอบคุณมากๆ ค่ะ ทำเองคงตาลาย แค่อ่านเฉยๆ ก็ตาลายแล้ว อิอิ   โดย: KHUNie88 (สมาชิกหมายเลข 1041026 ) 30 ตุลาคม 2556 21:07:16 น.