Code กรอบข้อความ สวยๆ

Code message box,โค๊ดกล่องเลื่อน กรอบข้อความ หรือจะใช้เป็นกรอบรูปก็ได้นะ เปลี่ยนสีกรอบรูปได้ตามใจชอบ สวยๆ น่ารักๆ หลากหลายแบบ เลือกไปใช้ได้ตามชอบเลย

แบบที่ 1. กรอบข้อความสามชั้น พื้นหลังเคลื่อนไหว  อยากโพสอะไร ตรงนี้ได้เลย   <table cellpadding="4" cellspacing="0" style="border-bottom: #9400d3 5px   double; border-left: #9400d3 5px double; border-right: #9400d3 5px double; border-top:  #9400d3 5px double; height: 50px; width: 320px;"> <tbody> <tr> <td background=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtfKaTzpn9Np3r0tnCQi7Kp_hnNFSuCNAIAUG_iwxkcedQ-0RkoDsXDk9MVg0aO1RxOoSaMPozCZq6jKYbluxnRjs7w21ozj5BxdsCYn0DNHSzGaSDDE4UoIUss6CT-tqLN674-DzyuM/s1600/bg12.gif"  style="border-bottom: #ba55d3 5px double;  border-left: #ba55d3 5px double; border-right: #ba55d3 5px double; border-top: #ba55d3 5px double;">อยากโพสอะไร ตรงนี้ได้เลย</td></tr></tbody></table> อธิบาย code (โค๊ด) โค๊ดตัวหนังสือสีแดง คือ url รูปภาพ โค๊ดตัวหนังสือสีม่วง คือ สีกรอบวงนอก โค๊ดตัวหนังสือสีน้ำเงิน คือ สีกรอบวงใน ถ้าต้องการสีอื่น ก็แค่เปลี่ยนโค๊ดสี ดูโค๊ดตารางสีได้ที่นี่ Code สี โค๊ดตารางสี width คือ ความกว้าง,    heigth คือ ความสูง

แบบที 2. กรอบ 2 ชั้น กรอบด้านนอกทึบ ด้านในปรุ พื้นหลังเคลื่อนไหว เขียนข้อความ <table bgcolor="forestgreen" cellpadding="5" cellspacing="5" height="50" style="border-bottom-color: rgb(34, 139, 34); border-bottom-style: dashed; border-bottom-width: 3px; border-left-color: rgb(34, 139, 34); border-left-style: dashed; border-left-width: 3px; border-right-color: rgb(34, 139, 34); border-right-style: dashed; border-right-width: 3px; border-top-color: rgb(34, 139, 34); border-top-style: dashed; border-top-width: 3px; width: 480px;"><tbody> <tr> <td background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2qgYlrKmrPWy5NZAzAuopjXomibWTy39FnnPE7rCoUvCZpjTIJzU7-0FkpDkri9HW3ae9Ond7TWBPyFpBvIZSnIPHpwqCPNb1hcGcVY3oecPLnAoHo6_V8nNiaBdxRuWS6BRU1VyLKc/s1600/bg.48.gif" bgcolor="white" style="border-bottom: white 3px dashed; border-left: white 3px dashed; border-right: white 3px dashed; border-top: white 3px dashed;"><span style="color: white;">เขียนข้อความ</span> </td></tr> </tbody></table> ถ้าต้องการ เปลี่ยนกรอบข้อความเป็นกรอบรูป มีวิธีง่ายๆค่ะ 1. เปลี่ยน โค๊ด สีแดง เป็น url ของรูปที่เรา จะเอามาใส่กรอบ 2. เปลี่ยน ขนาด width และ height ของโค๊ด กรอบรูป หรือกรอบข้อความนี้ ให้ได้ขนาด เท่ากับรูปที่เราจะเอามาใส่กรอบ แค่นี้ก็ได้ กรอบรูปสวยๆ ไว้ใช้ได้แล้วล่ะ 3. อย่าลืมลบ คำว่า "เขียนข้อความ"ทิ้งไปด้วยนะ

แบบที่ 3. กรอบ 4 ช่อง  หรือ 4 กรอบเส้นขอบสีขาว พื้นหลังเปลี่ยนสีตามใจชอบได้และสามารถเพิ่มกรอบหลายอีก พิมพ์ไปเลยตรง33 พิมพ์ไปเลยตรงนี้ พิมพ์ไปเลยตรงนี้ พิมพ์ไปเลยตรงนี้   <table bgcolor="#ffffff" cellpadding="2" cellspacing="2" style="border-left: #ffffff 3px; border-right: #ffffff 3px; border-top: #ffffff 3px;"><tbody> <tr> <td bgcolor="#336633" style="border-left: 3px; border-right: 3px; border-top: 3px; width: 238px;">พิมพ์ไปเลยตรง33</td> <td bgcolor="#336633" style="border-bottom: 3px; border-left: 3px; border-right: 3px; border-top: 3px; width: 238px;">พิมพ์ไปเลยตรงนี้</td> </tr> <tr> <td bgcolor="#ccffcc" style="border-bottom: 3px; border-left: 3px; border-right: 3px; border-top: 3px;">พิมพ์ไปเลยตรงนี้</td> <td bgcolor="pink" style="border-bottom: 3px; border-left: 3px; border-top: 3px;"><span style="background-color: transparent;">พิมพ์ไปเลยตรงนี้</span></td> </tr> </tbody> </table>

แบบที่ 4. กรอบข้อความ 4 ชั้น 2 สี    พื้นหลังเคลื่อนไหว ถ้าไม่ต้องการ background ก็เอา"โค๊ดสีน้ำเงิน"ออก เต็มที่เลยตรงนี้  <table cellpadding="4" cellspacing="0" style="border-bottom: #006600 5px double; border-left: #006600 5px double; border-right: #006600 5px double; border-top: #006600 5px double; height: 50px; width: 480px;"<tbody> <tr> <td style="border-bottom: hotpink 5px double; border-left: hotpink 5px double; border-right: hotpink 5px double; border-top: hotpink 5px double; height: 16px; width: 480px;">เต็มที่เลยตรงนี้</td> </tr> </tbody> </table>

แบบที่ 5. กรอบนอกทึบ กรอบในเป็นลายปรุ พื้นหลังสามารถเปลี่ยนสีตามใจชอบ พิมพ์ไปเลยตรงนี้   <table bgcolor="indianred" cellpadding="5" cellspacing="5" style="border-bottom-color: rgb(205, 92, 92); border-bottom-style: dashed; border-bottom-width: 3px; border-left-color: rgb(205, 92, 92); border-left-style: dashed; border-left-width: 3px; border-right-color: rgb(205, 92, 92); border-right-style: dashed; border-right-width: 3px; border-top-color: rgb(205, 92, 92); border-top-style: dashed; border-top-width: 3px; height: 50px; width: 480px;"><tbody> <tr><td bgcolor="wheat" style="border-bottom: 3px dashed; border-left: 3px dashed; border-right: 3px dashed; border-top: 3px dashed;">พิมพ์ไปเลยตรงนี้</td></tr> </tbody></table>

แบบที่ 6. กรอบนี้จะดูแตกต่างจากกรอบทั่วๆไป ตรงที่กรอบนอกดูคล้าวหุ้มด้วยโลหะสีเข็ม เขียนข้อความ   <table bgcolor="#000000" border="5" cellpadding="0" cellspacing="0" style="width:480px;height:45px"> <tbody> <tr> <td> <font color="#eeeeee">ใส่ข้อความ<br><br></font></td></tr></tbody></table>

แบบที่ 7. กรอบข้ความ 2 กรอบติดกันลงล่าง สามารถเพิ่มเป็นหลายๆกรอบ ต่อติดกันได้ ข้อความ ข้อความ   <table bgcolor="#330099" cellpadding="5" cellspacing="5" style="border-right:#330099 3px;border-top:#330099 3px;border-left:#330099 3px;width:480px;border-bottom:#330099 3px;height:50px"> <tbody> <tr> <td bgcolor="wheat" style="border-right:3px;border-top:3px;border-left:3px;width:480px;height:22px"> </td> </tr> <tr> <td bgcolor="#ccffcc" style="border-right:3px;border-top:3px;border-left:3px;border-bottom:3px;height:22px"> </td> </tr> </tbody> </table>

แบบที่ 8. แบบ 2 กรอบข้อความ ต่อติดกันไปด้านข้าง สามารถเพิ่มเป็นหลายๆกรอบได้เช่นกัน พิมพ์ไปเลยตรงนี้ พิมพ์ไปเลยตรง <table bgcolor="#330099" cellpadding="5" cellspacing="5" style="border-right:#330099 3px;border-top:#330099 3px;border-left:#330099 3px;border-bottom:#330099 3px"> <tbody> <tr> <td bgcolor="wheat" style="border-right-width:3px;border-right-style:initial;border-right-color:initial;border-top-width:3px;border-top-style:initial;border-top-color:initial;border-left-width:3px;border-left-style:initial;border-left-color:initial;border-bottom-width:3px;border-bottom-style:initial;border-bottom-color:initial;width:225px;height:16px">พิมพ์ไปเลยตรงนี้</td> <td bgcolor="#ccffcc" style="border-right-width:3px;border-right-style:initial;border-right-color:initial;border-top-width:3px;border-top-style:initial;border-top-color:initial;border-left-width:3px;border-left-style:initial;border-left-color:initial;border-bottom-width:3px;border-bottom-style:initial;border-bottom-color:initial;width:225px;height:16px">พิมพ์ไปเลยตรง</td> </tr> </tbody> </table>

แบบที่ 9. โค๊ตตัวกล่องเลื่อน    <div style="background-color: #ffffcc; border-bottom-color: currentcolor; border-bottom-style: solid; border-bottom-width: 3px; border-image: initial; border-left-color: currentcolor; border-left-style: solid; border-left-width: 3px; border-right-color: currentcolor; border-right-style: solid; border-right-width: 3px; border-top-color: currentcolor; border-top-style: solid; border-top-width: 3px; height: 100px; overflow-x: scroll; overflow-y: scroll; width: 475px;"> </div>

 หน้าหลัก Code นาฬิกา ข่าวหุ้นวิ่ง รูปภาพเลื่อน กรอบข้อความ ตารางสี