กรอบใส่ข้อความคอมเม้น และ กล่องใส่ตัวเลขนับจำนวนคอมเม้น แบบกิ๊ฟเก๋
ตัวอย่างรูปแบบของกล่องใส่ตัวเลขนับจำนวนคอมเม้น


lozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocat 
lozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocat
lozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocat
lozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocat
lozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocat
lozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocat
lozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocatlozocat


สวัสดีค่ะเพื่อนๆๆวันนี้นำเสนอ กล่องใส่ข้อความคอมเม้น แบบน่ารักๆๆมาฝาาาก...เป็นการใส่กรอบให้กับตัวเลขนับจำนวนคอมเม้น 
อ่าน และ แก้ไขคำสั้ง ลายละเอียดตามที่พิมพ์สีกำกับไว้ด้านล่างค่ะ
●ใส่ขนาดความกว้างของกรอบ
●กำหนด ให้กล่องใส่จำนวนตัวเลขคอมเม้นอยู่ในตำแหน่ง  left center right ตามที่ต้องการ ณ ตรงจุดนี้ จะดึงข้อความต้องรับตามไปด้วยค่ะ..ถ้ากล่องอยู่มุมขวา ข้อความต้อนรับจะจะอยู่ในมุมขวาเช่นกัน..ไม่ งง นะคะ
ใส่สีให้ข้อความต้อนรับ - และเขียนข้อความ
●ขนาดควางกว้าง × ความสูง ของรูปกล่องใส่ตัวเลขนับจำนวน
●ใส่รูปของกล่องใส่ตัวเลขนับจำนวน
●ใส่สีให้กับตัวเลขนับจำนวน
ใส่ขนิดของเส้นรอบกรอบของกล่องใส่ข้อความคอมเม้น (เส้นรอยปะ) ใส่สี-ใส่ขนาดให้ส้นรอปะ**dashed คือชื่อของเส้นรอยปะ  และ ใส่รูปพื้นหลังให้กรอบคอมเม้น
●ใส่รูปพื้นหลังให้ับกล่องใส่ข้อความคอมเม้น
●กำหนดให้รูปการ์ตูนดุ๊กดิ๊กอยู่ในตำแหน่ง  left center right ตามที่ต้องการ

●ใส่สีตัวพิมพ์ให้กับข้อความที่เขียนคอมเม้น




Create Date : 24 กันยายน 2553
Last Update : 1 ตุลาคม 2553 12:39:37 น.
Counter : 6257 Pageviews.

29 comments
  
พี่อันดาแอบเข้ามายืมของน่ารักไปใช้เป็นประจำค่ะ..ชอบมากเข้าออกวันละหลายรอบ..ไม่ได้ขออนุญาต ถือโอกาส ขอเลยนะค่ะ..และขอขอบคุณ..สำหรับน้ำใจที่น่ารัก มาก ๆ ของน้องแคท..ขอให้สวย ๆ รวย ๆ นะค่ะ...จุ๊บ จุ๊บ ...
โดย: พี่อันดา (ทบทวน ) วันที่: 24 กันยายน 2553 เวลา:7:14:37 น.
  
ขออนุญาตินำbanner ไปแปะที่บ้านนะคะ
ขอบคุณที่นำของสวยๆมาแบ่งปันกัน

ขอให้ คุณแคทสวยวันสวยคืนเลยนะคะ
โดย: เก็บดาวที่ราวฟ้า วันที่: 24 กันยายน 2553 เวลา:8:50:03 น.
  
2.แบบที่มีข้อความต้อนรับอยู่ด้านหลังกล่องใส่จำนวนตัวเลข
ตัวอย่างที่ .1แบบที่ไม่มีพื้นหลัง
ดูหน้าตาของโคดเมื่อวางแล้วจะมีหน้าตาแบบที่เห็นด้านล่างค่ะ
หากเพื่อนๆ งง ไม่แน่ใจจะก็อปปี้โคดตัวอย่างด้านบนไปลองวางแทนก่อนก็ได้ค่ะ

1เพื่อนกันตลอดไป
เพื่อนกันตลอดไป
โดย: lozocat   16 กันยายน 2553 12:48:30 น.
สิ่งที่สำคัญ...ให้นำโคดทั้งหมดไปวไว้แถวล่างสุดของหน้าที่วางโคด
<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<table border="0" cellspacing="0" cellpadding="0" width="480" align="center">  <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: 32px; background-image: url(//img148.imageshack.us/img148/7894/s3204f.gif); height: 32px">' + i + '</td><td align="center" valign="bottom" style="color: #cc6699"><font style="letter-spacing:2px">เพื่อนกันตลอดไป</font></td></tr></tbody> </table>  </td></tr><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" width="475" align="center">  <tbody><tr><td align="center" valign="middle"><fieldset style="border: #FFA6D1 dashed 1px"><legend align="left"> <img src=//i1038.photobucket.com/albums/a464/cathk/Small-gif/080122piyo01_j1.gif></legend><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="middle" style="color: #FF6193">'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>
โดย: lozocat วันที่: 24 กันยายน 2553 เวลา:11:27:38 น.
  
ตัวอย่างที่ .2แบบที่มีพื้นหลังโดยใช้โคดสี
ดูหน้าตาของโคดเมื่อวางแล้วจะมีหน้าตาแบบที่เห็นด้านล่างค่ะ

1เพื่อนกันตลอดไป
เพื่อนกันตลอดไป
โดย: lozocat   16 กันยายน 2553 12:48:30 น.
สิ่งที่สำคัญ...ให้นำโคดทั้งหมดไปวไว้แถวล่างสุดของหน้าที่วางโคด
<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<table border="0" cellspacing="0" cellpadding="0" width="480" align="center">  <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: 32px; background-image: url(//img84.imageshack.us/img84/392/s3202a.gif); height: 32px">' + i + '</td><td align="center" valign="bottom" style="color: #cc6699"><font style="letter-spacing:2px">เพื่อนกันตลอดไป</font></td></tr></tbody> </table>  </td></tr><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" width="475" align="center">  <tbody><tr><td align="center" valign="middle"><fieldset style="border: #FFA6D1 dashed 1px; padding:0; background: #FFFCF3"><legend align="left"> <img src=//i1038.photobucket.com/albums/a464/cathk/Small-gif/piyo0829mouse.gif></legend><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="middle" style="color: #FF6193">'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>
โดย: lozocat วันที่: 24 กันยายน 2553 เวลา:11:32:15 น.
  
ตัวอย่างที่ .3แบบที่ที่ใช้รูปเป็นพื้นหลัง..**และลองเปลี่ยงตำแหน่งของกล่องใส่ตัวเลขนับจำนวนคอมเม้น
ดูหน้าตาของโคดเมื่อวางแล้วจะมีหน้าตาแบบที่เห็นด้านล่างค่ะ

1เพื่อนกันตลอดไป
เพื่อนกันตลอดไป
โดย: lozocat   16 กันยายน 2553 12:48:30 น.
สิ่งที่สำคัญ...ให้นำโคดทั้งหมดไปวไว้แถวล่างสุดของหน้าที่วางโคด
<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<table border="0" cellspacing="0" cellpadding="0" width="480" align="center">  <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: 32px; background-image: url(//img3.imageshack.us/img3/6025/s3208a.gif); height: 32px">' + i + '</td><td align="center" valign="bottom" style="color: #cc6699"><font style="letter-spacing:2px">เพื่อนกันตลอดไป</font></td></tr></tbody> </table>  </td></tr><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" width="475" align="center">  <tbody><tr><td align="center" valign="middle"><fieldset style="border: #FFA6D1 dashed 1px; padding:0; background-image: url(//img641.imageshack.us/img641/1469/k0001.gif)"> <legend align="right"> <img src=//i1038.photobucket.com/albums/a464/cathk/Small-gif/071016piyo01_j1.gif></legend><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="middle" style="color: #FF6193">'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>
โดย: lozocat วันที่: 24 กันยายน 2553 เวลา:11:34:04 น.
  

แวะมาทักทายค่ะ มีความสุขมากๆ นะคะ

น่ารัก ขอบคุณค่ะ
โดย: Elbereth วันที่: 24 กันยายน 2553 เวลา:11:39:05 น.
  
1.แบบที่มีข้อความต้อนรับอยู่ด้านหน้ากล่องใส่จำนวนตัวเลข

ตัวอย่างที่ .1 ไม่มีพื้นหลัง
ดูหน้าตาของโคดเมื่อวางแล้วจะมีหน้าตาแบบที่เห็นด้านล่างค่ะ
หากเพื่อนๆ งง ไม่แน่ใจจะก็อปปี้โคดตัวอย่างโคดไปลองวางแทนก่อนก็ได้ค่ะ
เพื่อนกันตลอดไป1
เพื่อนกันตลอดไป
โดย: lozocat   16 กันยายน 2553 12:48:30 น.
สิ่งที่สำคัญ...ให้นำโคดทั้งหมดไปวไว้แถวล่างสุดของหน้าที่วางโคด
<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<table border="0" cellspacing="0" cellpadding="0" width="480" align="center">  <tbody><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" align="center">  <tbody><tr><td align="center" valign="bottom" style="color: #cc6699"> <font style="letter-spacing:2px">เพื่อนกันตลอดไป</font></td><td align="center" valign="middle" style="height: 32px; width: 32px; background-image: url(//img148.imageshack.us/img148/7894/s3204f.gif)"><strong><font size="2" color="#FF6193">' + i + ' </font></strong></td></tr></tbody> </table>  </td></tr><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" width="475" align="center">  <tbody><tr><td align="center" valign="middle"><fieldset style="border: #FFA6D1 dashed 1px"><legend align="left"> <img src=//i1038.photobucket.com/albums/a464/cathk/Small-gif/080122piyo01_j1.gif></legend><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="middle" style="color: #FF6193">'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>
โดย: lozocat วันที่: 24 กันยายน 2553 เวลา:11:39:09 น.
  
ตัวอย่างที่ .2แบบที่มีพื้นหลังโดยใช้โคดสี
ดูหน้าตาของโคดเมื่อวางแล้วจะมีหน้าตาแบบที่เห็นด้านล่างค่ะ
เพื่อนกันตลอดไป1
เพื่อนกันตลอดไป
โดย: lozocat   16 กันยายน 2553 12:48:30 น.
สิ่งที่สำคัญ...ให้นำโคดทั้งหมดไปวไว้แถวล่างสุดของหน้าที่วางโคด
<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<table border="0" cellspacing="0" cellpadding="0" width="480" align="center">  <tbody><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" align="right">  <tbody><tr><td align="center" valign="bottom" style="color: #cc6699"> <font style="letter-spacing:2px">เพื่อนกันตลอดไป</font></td><td align="center" valign="middle" style="height: 32px; width: 32px; background-image: url(//img543.imageshack.us/img543/392/s3202a.gif)"><strong><font size="2" color="#FF6193">' + i + ' </font></strong></td></tr></tbody> </table>  </td></tr><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" width="475" align="center">  <tbody><tr><td align="center" valign="middle"><fieldset style="border: #FFA6D1 dashed 1px; padding:0; background: #FFFCF3"><legend align="left"> <img src=//i1038.photobucket.com/albums/a464/cathk/Small-gif/piyo0829mouse.gif></legend><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="middle" style="color: #FF6193">'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>
โดย: lozocat วันที่: 24 กันยายน 2553 เวลา:11:42:44 น.
  
ตัวอย่างที่ .3แบบที่ที่ใช้รูปเป็นพื้นหลัง..
ดูหน้าตาของโคดเมื่อวางแล้วจะมีหน้าตาแบบที่เห็นด้านล่างค่ะ
เพื่อนกันตลอดไป1
เพื่อนกันตลอดไป
โดย: lozocat   16 กันยายน 2553 12:48:30 น.
สิ่งที่สำคัญ...ให้นำโคดทั้งหมดไปวไว้แถวล่างสุดของหน้าที่วางโคด
<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<table border="0" cellspacing="0" cellpadding="0" width="480" align="center">  <tbody><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" align="center">  <tbody><tr><td align="center" valign="bottom" style="color: #cc6699"> <font style="letter-spacing:2px">เพื่อนกันตลอดไป</font></td><td align="center" valign="middle" style="height: 32px; width: 32px; background-image: url(//img3.imageshack.us/img3/6025/s3208a.gif)"><strong><font size="2" color="#FF6193">' + i + ' </font></strong></td></tr></tbody> </table>  </td></tr><tr><td align="center" valign="bottom"><table border="0" cellspacing="0" cellpadding="0" width="475" align="center">  <tbody><tr><td align="center" valign="middle"><fieldset style="border: #FFA6D1 dashed 1px; padding:0; background-image: url(//img641.imageshack.us/img641/1469/k0001.gif)"> <legend align="right"> <img src=//i1038.photobucket.com/albums/a464/cathk/Small-gif/071016piyo01_j1.gif></legend><table border="0" cellspacing="0" cellpadding="0" width="100%" align="center"><tbody><tr><td align="center" valign="middle" style="color: #FF6193">'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }</script>
โดย: lozocat วันที่: 24 กันยายน 2553 เวลา:11:43:27 น.
  
ขอบคุณสำหรับโค้ดค่ะคุณแคท
โดย: kobnon วันที่: 24 กันยายน 2553 เวลา:13:42:39 น.
  
ขอเอาโค้ดไปใช้น่ะค่ะ
ยังมือใหม่มั๊กๆกับบล็อคอยู่เลย ขอบคุณค่ะ
โดย: moonoicyber วันที่: 24 กันยายน 2553 เวลา:17:53:28 น.
  
ขอบคุณสำหรับโค้ดจ้า คนสวย
โดย: หัวใจสีชมพู วันที่: 24 กันยายน 2553 เวลา:18:05:49 น.
  
ขอจิ๊กไปใช้ค่ะขอบคุณนะคะ
โดย: อุ้มสี วันที่: 24 กันยายน 2553 เวลา:23:03:09 น.
  
ขอนำไปใช้ที่บล็อกบ้างนะค่ะ ขอบคุณสำหรับโค๊ดดีๆค่ะ แบบว่าเพิ่งหัดทำบล็อกค่ะ เลยต้องหา Copy Code จากเพื่อนๆ
โดย: yumi_lee วันที่: 25 กันยายน 2553 เวลา:0:33:46 น.
  
ขอบคุณค่ะ

นำไปใช้แล้ว
โดย: indexfuture วันที่: 25 กันยายน 2553 เวลา:13:49:31 น.
  
น่ารักจังเลยค่ะคุณแคท...ขอนำไปใช้นะคะ ขอบคุณค่ะ
โดย: nootikky วันที่: 25 กันยายน 2553 เวลา:19:16:16 น.
  
น่ารักมากค่ะ ขอยืมไปใช้ด้วยคนนะค่ะ
โดย: myminny วันที่: 26 กันยายน 2553 เวลา:7:44:32 น.
  
คลิกๆๆ รูปสวยๆน่ารักๆไว้ส่งต่อเพียบ...
โดย: แม่ออมบุญ วันที่: 27 กันยายน 2553 เวลา:16:04:34 น.
  
สวยๆ ทั้งนั้นเลยค่ะ ขอยืมไปใช่หน่อยค่ะ
ขอบคุณนะคะ

คลิกๆๆ รูปสวยๆน่ารักๆไว้ส่งต่อเพียบ...
โดย: แม่ออมบุญ วันที่: 28 กันยายน 2553 เวลา:10:15:32 น.
  
น่ารักมากค่ะ ขอยืมไปใช้ด้วยนะคะ ขอบคุณมากค่ะ
โดย: แม่น้องป๋อ วันที่: 1 ตุลาคม 2553 เวลา:12:04:14 น.
  
ขอบคุณมากน่ะค่ะ ได้รับความรู้เยอะมากๆ เลย
โดย: *Ladee* ladY ^^ วันที่: 11 ตุลาคม 2553 เวลา:0:53:54 น.
  
ขอยืมใช้ด้วยคนนะคะ ขอบคุณค่ะ
โดย: waresคอนหวัน (wares1612 ) วันที่: 21 ตุลาคม 2553 เวลา:23:01:31 น.
  
แวะมาขอบคุณค่ะ ขอนำไปใช้นะคะ
โดย: bbmit วันที่: 30 พฤศจิกายน 2553 เวลา:18:34:43 น.
  
..ขอแอบนำไปใช้หน่อยนะ...ขอบคุณคร้า
โดย: pearsher วันที่: 23 ธันวาคม 2553 เวลา:13:27:31 น.
  
ยกมือด้วย สวยทุกแบบ.....

แวะมาขอบคุณ...ที่แบ่งให้ทำทำบล๊อกไม่เก่งค่ะ
โดย: แนวเนี๊ยะ วันที่: 4 มกราคม 2554 เวลา:2:00:39 น.
  
ขอป้าลองเอาไปใช้หน่อยค่ะ ขอบคุณค่ะ
โดย: pa-kae-laew วันที่: 4 มีนาคม 2554 เวลา:13:12:29 น.
  
ขอยืมไปใช้หน่อยนะค่ะ อิอิ
โดย: Leo-Minor วันที่: 9 เมษายน 2554 เวลา:17:10:46 น.
  
น่ารักมากมายเลยค่ะ

แอบเก็บโค้ดไปใช้แล้วด้วย ขอบคุณมากนะคะ ขออนุญาติแอดบล็อกไว้นะคะ
โดย: Basil.CNC วันที่: 7 มิถุนายน 2554 เวลา:17:04:54 น.
  
ขอบคุณค๊า จะลองเอาไปทำดูนะคะ
กำลังหาอยู่เลยค่ะ
โดย: ดาวริมทะเล วันที่: 11 สิงหาคม 2554 เวลา:9:10:08 น.
ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Misscat.BlogGang.com

lozocat
Location :
  

[ดู Profile ทั้งหมด]
 ผู้ติดตามบล็อก : 13 คน [?]

บทความทั้งหมด