การเขียนบล็อก V - ทำกรอบนับคอมเม้นท์ สวัสดีค่ะเพื่อนๆ วันนี้มาคุยกันในเรื่องแต่งบล็อกในหัวข้อของการใส่กรอบนับคอมเม้นท์ที่เพื่อนๆ มาเม้นให้กับเรา ลักษณะหน้าตาของกรอบนับคอมเม้นเป็นแบบนี้ค่ะ Code: <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 = '<fieldset style="border:#ของเส้นกรอบ ลักษณะเส้นกรอบ ขนาดของเส้นpx; padding:0; background-color: #สีพื้นหลัง"><legend align=ตำแหน่งของข้อความนับคอมเม้น style="border:#สีเส้นกรอบ ลักษณะเส้นกรอบ ความหนาของเส้นpx; padding:0; background:none">พิมพ์ข้อความนับคอมเม้นตรงนี้ ' + i + ' </legend>';document.getElementById( i ).innerHTML = beforeHtml + originalHtml;}</script> จากโค้ดด้านบนจะเห็นว่าได้ทำไฮไลท์ให้แตกต่างกันถึง 3 สี ที่ต้องไฮไลท์ก็เพื่อให้เห็นความแตกต่างของโค้ดที่ใช้ และก็จะอธิบายไปทีละส่วนๆ นะค่ะ มาดูโค้ดในส่วนที่เป็นตัวหนังสือสีแดงกันดีกว่าค่ะ <fieldset style="border:#สีของเส้นกรอบ ลักษณะเส้นกรอบ ขนาดของเส้นpx; padding:0; background-color: ##สีพื้นหลัง"> โค้ดในส่วนนี้จะเป็นการกำหนดรูปแบบของกรอบนับคอมเม้น ซึ่งในส่วนที่เพื่อนๆ จะต้องปรับเปลี่ยนก็มีดังนี้ค่ะ 1.::: สีของเส้นกรอบ ::: ตรงส่วนนี้เพื่อนๆ ก็กำหนดสีตามที่ชอบเลยค่ะ 2.::: ลักษณะของเส้นกรอบ ::: จะมีให้เลือก 8 แบบคือ dotted, dashed, solid, double, groove, ridge, inset, outset          นี่เป็นตัวอย่างค่ะ dotted dashed solid double groove ridge inset outset 3.::: ขนาดของเส้นpx ::: จะต้องกำหนดเป็น px เสมอ ตัวเลขยิ่งมากเส้นกรอบจะยิ่งหนาค่ะ 4.::: สีของพื้นหลังหรือใส่ภาพพื้นหลัง ::: background-color: #" ใส่สีต่อท้าย # ได้เลยค่ะ :::หมายเหตุ ::: หากเพื่อนๆ ต้องการใส่ภาพพื้นหลังแทนที่จะกำหนดเป็นสีพื้นหลังเฉยๆ ก็แก้โค้ดในส่วนนี้ค่ะ background-color: #" ให้แก้โค้ดเป็น background-imager: url(URL รูปที่จะมาทำพื้นหลัง)" เพียงเท่านี้ก็เป็นอันเรียบร้อย จบเรื่องโค้ดในส่วนที่ 1 ค่ะ มาต่อกันด้วยโค้ดส่วนที่ 2 เลยค่ะ <legend align=ตำแหน่งของข้อความนับคอมเม้น style="border:#สีเส้นกรอบ ลักษณะเส้นกรอบ ความหนาของเส้นpx; padding:0; background:none"> โค้ดในส่วนนี้จะเป็นในส่วนข้อความที่เราเอาไว้นับคอมเม้นจากเพื่อนๆ ค่ะ สิ่งที่เพื่อนๆ ต้องเปลี่ยนมีดังนี้ค่ะ :::ตำแหน่งของข้อความนับคอมเม้น::: ตรงนี้ถ้าอยากให้ชิดซ้ายก็พิมพ์เป็น align=left / ชิดขวาเป็น align=right / อยู่ตรงกลางเป็น align=center :::สีเส้นกรอบและลักษณะเส้นกรอบ::: เส้นกรอบตรงนี้ เป็นกรอบที่เราใส่ให้กับข้อความนับคอมเม้น หากเราไม่ต้องการใส่โค้ดในส่วนนี้ก็ กำหนดความหนาของเส้นให้เป็น 0px ก็ได้ค่ะ :::ใส่พื้นหลังให้กับกรอบข้อความนับคอมเม้น::: วิธีการเดียวกับการใส่พื้นหลังให้กรอบในข้อ 2 เลยค่ะ มาต่อกันด้วยโค้ดส่วนที่ 3 เลยค่ะ พิมพ์ข้อความนับคอมเม้นตรงนี้ ' + i + ' </legend> โค้ดในส่วนนี้ไม่มีอะไรยุ่งยากเลยค่ะ หากเพื่อนๆ ต้องการใส่รูปลงเพื่อทำให้ข้อความนับคอมเม้นดูมีสีสันขึ้น ก็ไม่ยากเลย แค่เพิ่มโค้ดใส่รูป <img src=URL รูปภาพ> นำไปวางข้างหน้าหรือข้างหลังข้อความนับคอมเม้นก็เรียบร้อยแล้วค่ะ อธิบายมาซะยาวเหยียดเลยค่ะ ก็เนื่องจากต้องพยายามทำให้เพื่อนๆ เข้าใจมากที่สุด ลองไปทำดูกันนะค่ะ หากติดปัญหาก็เม้นทิ้งไว้ค่ะ   Create Date : 06 กรกฎาคม 2552 12 comments Last Update : 7 กรกฎาคม 2552 8:40:14 น. Counter : 1226 Pageviews. Share Tweet

พรหมญาณี...............................พรหมญาณี ปอ ป้า.......ปอ ป้า..................ปอ ป้า..........ปอ ป้า ปอ ป้า.............ปอ ป้า................ปอ ป้า...............ปอ ป้า ปอ ป้า...................ปอ ป้า.............ปอ ป้า...................ปอ ป้า ปอ ป้า........................ปอ ป้า........ปอ ป้า......................ปอ ป้า ปอ ป้า.............................ปอ ป้า ปอ ป้า...........................ปอ ป้า ปอ ป้า...................................ปอ ป้า................................ปอ ป้า ปอ ป้า...........................................................................ปอ ป้า ปอ ป้า..........................................................................ปอ ป้า ปอ ป้า.............................พรหมญาณี...........................ปอ ป้า ปอ ป้า....................................................................ปอ ป้า ปอ ป้า.......................เจิมให้ นะคะ......................ปอ ป้า ปอ ป้า.......................................................ปอ ป้า ปอ ป้า...............................................ปอ ป้า ปอ ป้า.......................................ปอ ป้า ปอ ป้า..............................ปอ ป้า ปอ ป้า.....................ปอ ป้า ปอ ป้า.............ปอ ป้า ปอ ป้า.....ปอ ป้า พรหมญาณี   โดย: พรหมญาณี 7 กรกฎาคม 2552 0:34:11 น.

สวัสดีค่ะ คุณแมว... วันนี้ ป้าไปทำบุญที่อยุธยามา...ค่ะ เลยขอนำบุญมาฝากคุณแมวด้วย...นะคะ มีความสุขมาก ๆ ในทุกวันดี ๆ ตลอดไป..นะคะ ราตรีสวัสดิ์...ค่ะ   โดย: พรหมญาณี 7 กรกฎาคม 2552 0:35:13 น.

ขอบคุณมากๆค่ะยากเหมือนกันน่ะค่ะ   โดย: T+c+ake Time 2002 11 กรกฎาคม 2552 3:16:13 น.

ขอแอดเป็นเพื่อนด้วยคนนะคะ   โดย: ลูกน้ำกว๊าน 22 กรกฎาคม 2552 9:25:58 น.

พยายามยังไงก็ทำไม่สำเร็จเลยค่ะ ท้อเลยหง่ะ   โดย: พิงกี้พิก (pinkypignuch ) 22 กรกฎาคม 2552 14:57:55 น.

ทำยังไง ก็ไม่ขึ้นอะคะ ช่วยแนะนำหน่อยนะคะ ขอแอดไว้ด้วยนะคะ   โดย: wtch3n 24 กรกฎาคม 2552 16:43:48 น.

ถ้าลองทำแล้วไม่สำเร็จ ส่งโค้ดที่ทำอยู่มาทางหลังไมค์นะค่ะ เดี๋ยวดูให้ แล้วก็โพสบอกที่กล่องฝากข้อความด้วยค่ะ   โดย: maew_kk 25 กรกฎาคม 2552 8:40:47 น.

ดีจัง คุณแมว สอนทำบล๊อคอีกแล้ว ขอบคุณแทนเพื่อนๆมือใหม่ เดี๋ยวยายเก๋าจะไปบอกเพื่อนที่ไปเยี่ยมบล๊อคยายเก๋า   โดย: ยายเก๋า (ชมพร ) 27 กรกฎาคม 2552 15:36:32 น.

ทำไม่สำเร็จจ้า ส่งไปทางหลังไมค์แล้วค่ะ   โดย: NuRara 12 สิงหาคม 2552 0:09:11 น.

ไม่สำเร๊จเช่นกัน ฮือ ๆ ๆ เส้าจาย ย ย ยย ฝากข้อความ + หลังไมค์ แล้วน๊ะ จะรอโค๊ดที่ใช้ได้นะค๊ะ อิอิ   โดย: เหม่ยหลิงจัง 15 ธันวาคม 2552 19:01:24 น.

ขอยืมโค้ดไปใช้นะคะ ขอบคุณค่ะ   โดย: hamstermania 2 กุมภาพันธ์ 2553 13:24:32 น.

ทำได้แล้ว ขอบคุณมากเลยค่ะ   โดย: thisisja 15 ตุลาคม 2553 13:30:54 น.