รวมโคดที่จำเป็นสำหรับการแต่งบล้อค(จัดรวมใหม่) สวัสดีค่ะ...วันนี้ได้รวบรวมโคดที่จำเป็นสำหรับการแต่งบล้อคมาฝาก... และขอขอบคุณสำหรับโคดบางส่วนที่นำมาจาก บล็อคป้ามด และ บล็อคคุณไหม ค่ะ   Create Date : 04 ตุลาคม 2553 24 comments Last Update : 23 ตุลาคม 2554 1:44:56 น. Counter : 8930 Pageviews. Share Tweet

เกี่ยวกับตัวพิมพ์ Bold Text <b>Bold Text</b> Italic Text <i>Italic Text</i> Underlined Text <u>Underlined Text</u> Striked-Out Text <strike>Striked-Out Text</strike> Sub Script Text <sub>Sub Script Text </sub> Super Script Text <sup>Super Script</sup> Popular special characters to use in text  ® = &reg;  « = &laquo;  » = &raquo; º = &ordm; ♥ = &hearts; · = &middot; © = &copy; ™ = &trade; Names of popular fonts <font face="Georgia">Georgia</font> andale mono,times - arial black,avant garde - book antiqua,palatino - comic sans ms,sand - courier new,courier - georgia,palatino - helvetica - impact,chicago - tahoma,arial,helvetica,sans-serif - terminal,monaco - times new roman,times - trebuchet ms,geneva - verdana,geneva - symbol = symbol webdings = webdings wingdings,zapfdingbats = wingdings,zapfdingbats สีของตัวพิมพ์ <font color="#ff69b4">..เขียนข้อความที่ต้องการ..</font> ใส่ขนาด ของตัวพิมพ์ <font size="2">..เขียนข้อความที่ต้องการ..</font> font sizes: 1 2 3 4 5 6 7 ระยะห่างระหว่างตัวพิมพ์ <font style="letter-spacing:2px">..เขียนข้อความที่ต้องการ..</font> ถ้าต้องการแบบชิดให้ใส่ ลบ นำหน้าหมายเลข <font style="letter-spacing:-1px">..เขียนข้อความที่ต้องการ..</font> แบบใส่พื้นหลังให้เฉพาะข้อความที่เราต้องการ <span style="background-color: #f7f3ff">..เขียนข้อความที่ต้องการ..</span> อยู่มุม ขวา <p align="right">อยู่มุม ขวา</p> อยู่ ตรงกลาง <p align="center">อยู่มุม ขวา</p> อยู่มุม ซ้าย <p align="left">อยู่มุม ซ้าย </p>   โดย: lozocat 4 ตุลาคม 2553 14:08:33 น.

เกี่ยวกับรูปภาพ ใส่รูป <img src="...ใส่..//..ของรูป..." border="0" /> ใส่รูปแบบกำหนด ความกว้าง x ความยาว <img src="...ใส่..//..ของรูป..." border="0" width="31" height="19"/> ใส่ข้อความให้กับรูป <img src="...ใส่..//..ของรูป..." border="0" alt="..เขียนข้อความที่ต้องการ.."> ใส่คำสั่งให้รูปอยู่ในมุมที่ต้องการ right center left <img src="...ใส่..//..ของรูป..." border="0" align="center"> ทำลิงค์ที่เปิดในหน้าเดียวกัน <A href="...ใส่..//..ของเวป...">..เขียนข้อความที่ต้องการ..</A> ทำลิงค์ที่เปิดอีกหน้านึง <a href="...ใส่..//..ของเวป..." target="_blank">..เขียนข้อความที่ต้องการ..</a> เอารูปมาทำเป็นลิงค์ <a href="...ใส่..//..ของเวป..." target="_blank"><img src="...ใส่..//..ของรูป..." border="0" ></a> โคดห้อยหน้าคอม <img src="..ใส่..//..ของรูป.." style="position: absolute; left: 0; top: 0;"> อธิบายโคด** ●กำหนดให้ตัวห้อยอยู่ในมุม ซ้าย(left) หรือ ขวา(right) และกำหนดระยะห่างจากขอบทั้ง ซ้าย และ ขวา ของหน้าคอม ●ระยะจากขอบของกน้าคอม จากบนลงมาล่าง กำหนดระยะห่างใส่ตัวเลขได้ตามความต้องการค่ะ ใส่มากห่างมาก เว้นระยะห่างระหว่างรูป-ใส่มากห่างมาก &nbsp; ตัวอย่าง **ใส่มากห่างมาก <img src="//i1038.photobucket.com/albums/a464/cathk/Small-gif/090123wd_m_j1.gif" border="0" />&nbsp; &nbsp; &nbsp;<img src="//i1038.photobucket.com/albums/a464/cathk/Small-gif/090123wd_m_j1.gif" border="0" /> ก็จะได้ **       เว้นบรรทัดของรูป-ใส่มากห่างมาก <br> ตัวอย่าง **ใส่มากห่างมาก <img src="//i1038.photobucket.com/albums/a464/cathk/Small-gif/090123wd_m_j1.gif" border="0" /><br><br><img src="//i1038.photobucket.com/albums/a464/cathk/Small-gif/090123wd_m_j1.gif" border="0" /> ก็จะได้ ** Borders ให้กับรูป <img style="border-style: solid; border-width: 1px; border-color: #ff69b4" src="..ใส่..//..ของรูป..">  อธิบายโคด** ●ใส่ชนิด ของ border ใส่ขนาด ใส่สี ชื่อขนิดของ Borders 2px solid 2px dashed 2px dotted 2px groove 2px ridge 5px double 2px outset 2px inset ตัวอย่าง **   โดย: lozocat 4 ตุลาคม 2553 14:09:35 น.

เกี่ยวกับพืเนหลัง** สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด ใส่พื้นหลังโดยใช้โคดสี <style>body{background:#fffcf3}></style> ใส่พื้นหลังแบบTitle <style>body{background-image:url("..ใส่..//..ของรูป..");}</style> ทำให้พื้นหลังยึดติดกับที่ไม่เลื่อนตามเม้าท์ <style>body{background-attachment: fixed;}</style> สำหรับธีม (แบบ สไตล์เกาหลี ) <style type="text/css"><!--body{background:url(..ใส่..//..ของรูป..) repeat center top;background-color:#fffcf3;}--></style> สำหรับภาพพื้นหลังเพีบงรูปเดียว และ อยู่ติดมุมของหน้าคอม <style type="text/css"><!--body{background:url(..ใส่..//..ของรูป..) no-repeat fixed left bottom;background-color:#fffcf3;}--></style> อธิบายโคด** ●กำหนดให้รูปอยู่ในมุมที่ต้องการ ●กำหนดให้รูปอยู่ในแถวที่ต้องการ เช่น แถวบน แถวกลาง หรือ แถวล่าง ●และ อย่าลืมใส่โคดสีให้เหมาะกับรูปด้วยนะคะ left - มุมซ้าย top - แถวบน right - มุมขวา center - แถวกลาง center - กลาง bottom - แถวล่าง   โดย: lozocat 4 ตุลาคม 2553 14:20:33 น.

เกี่ยวกับสคริปเรีย** สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด โค้ดเปลี่ยนรูปแทนรูป ให้ทิป เปิดหมวก <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/icon_tip.gif") {document.images[i].src="....ใส่..//..ของรูป...."}</script> โค้ดเปลี่ยนรูปแทนรูป Rss Feed <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/icon_rss.png") {document.images[i].src="....ใส่..//..ของรูป...."}</script> โค้ดเปลี่ยนรูปแทนรูป ฝากข้อความหลังไมค์ <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/icon_message.gif") {document.images[i].src="....ใส่..//..ของรูป...."}</script> โค้ดเปลี่ยนรูปกระดาษ ปากกา ตรงรูปแก้ไข Blog <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/iconnote.gif") {document.images[i].src="....ใส่..//..ของรูป....";document.images[i].height="ความสูงของรูป"; document.images[i].width="ความกว้างของรูป";}</script> โค้ดเปลี่ยนรูปถังขยะ ตรงรูปลบ Comment, ลบ Blog <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/delete.gif") {document.images[i].src="....ใส่..//..ของรูป....";document.images[i].height="ความสูงของรูป"; document.images[i].width="ความกว้างของรูป";}</script> โค้ดเปลี่ยนรูปแทนรูป My FriendFlock <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/icon_friends.gif") {document.images[i].src="....ใส่..//..ของรูป...."}</script> เปลี่ยนรูปแทน รูปหัวใจสีแดงที่อยู่ท้ายชื่อเพื่อนในกล่องคอมเม้น <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/smile.gif") {document.images[i].src="....ใส่..//..ของรูป...."}</script> เปลี่ยนรูปของ bullet ●จุดเล็กๆที่อยู่หน้าหัวข้อ <style>ul{list-style: ;list-style-image: url(...ใส่..//..ของรูป....);}</style> ถ้าไม่ต้องการให้มีจุดเล็กๆข้างหน้าหรือรูปอะไรเลย ให้ใส่โคดด้านล่างแทนค่ะ <style>ul{list-style: ;list-style-image: url(//img153.imageshack.us/img153/7481/lozocat.gif);}</style> ห้ามคลิก ขวา <script type="text/javascript" src ="//www.mdn.fm/files/86634_koegw/mouse.js"></script> อีเมลล์ <a href="mailto:ใส่อีเมล์ของคุณ">เขียนข้อความที่ต้องการ</a> โค้ดป้องกันการยืดของหน้าบล็อค <style>div.comment{overflow: auto; width: 400px; height: auto;}</style> หลังไมค์ <a href ="...ใส่..//....ของหลังไมค์ที่เป็นชื่อคุณ." target='_blank'>เขียนข้อความที่ต้องการ</a> แบบใส่รูปแทนข้อความ <a href ="...ใส่..//....ของหลังไมค์ที่เป็นชื่อคุณ." target='_blank'><img src="....ใส่..//..ของรูป...." border="0" /></a> ตัวอย่างชื่อหลังไมค์ <a href ="//www.pantip.com/cafe/krazip/write.php?nick_name=lozocat" target='_blank'>เมลล์คุยกันโลด</a> โค้ด กลับขึ้นข้างบนของ Page <center><a href="#top">TOP</a></center> ตัวอย่าง TOP ข้อความต้อนรับเมือเปิดหน้าเวป <SCRIPT LANGUAGE="JavaScript"> <!-- Begin alert("เขียนข้อความที่ต้องการร") // End --> </script> ข้อความบอกลา <Script Language="VBScript"> Sub Window_onUnLoad() alert("เขียนข้อความที่ต้องการ") End Sub </Script> ทำกรอบรอบๆบล็อค <style>body{border: 10px ridge #FF7CA8 ;}</style> ลูกเล่นเมื่อเปลี่ยน Webpage <Meta http-equiv="Page-Enter" content="RevealTrans (Duration=3, Transition=23)"> <Meta http-equiv="Page-Exit" content="RevealTrans (Duration=2, Transition=23)"> โคดลบกรอบสีขาว <style>table {background-color: transparent;border-style: none;border-spacing: none;}td {border: none;border-color: none;background: none;}</style>   โดย: lozocat 4 ตุลาคม 2553 14:23:07 น.

ขอบคุณมากค่ะคุณแคท   โดย: kobnon 4 ตุลาคม 2553 14:27:22 น.

เกี่ยวกับสคริปเรีย และ กล่องใส่ข้อความคอมเม้น สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด ใส่โลโก้ บล็อคแก๊ง <script>document.images[0].src = "....ใส่..//..ของรูป...."</script> จำนวนผู้ชมทั้งหมด <script src="//fastwebcounter.com/secure.php?s=....ใส่..//..ของบล็อกคุณ...."></script>เขียนข้อความที่ต้องการ เพื่อนที่กำลังเยี่ยมชมบล็อกขณะนี้มีกี่คน <script type="text/javascript" src="//fastonlineusers.com/on4.php?d=....ใส่..//..ของบล็อกคุณ...."></script>เขียนข้อความที่ต้องการ  ตัวอย่าง <script type="text/javascript" src="//fastonlineusers.com/on4.php?d=//misscat.bloggang.com"</script>เพื่อนที่กำลังชมบล็อก ลด และ เพิ่ม ขนาดตัวพิมพ์ทั้งหน้าเวป + สีของตัวพิมพ์ <style>body, ul, li, p{font:bold MS Sans Serif;font-size:12pt;color:#ff0000;}</style> กรอบนับ Comment โดยคุณ กึ่งยิงกึ่งผ่าน <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:#819fb7 dashed 1px; padding: 2px"><legend align="right" style="border: #819fb7 dashed 1px; padding: 3px; background: #f3fffc"><font size="2" color="#990000">เขียนข้อความต้อนรับ ' + i + ' </font><img src=ใส่..//..ของรูป ></font></legend>';document.getElementById( i ).innerHTML = beforeHtml + originalHtml;}</script> อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับไว้นะคะ** ●ใส่ขนาดให้เส้นรอยปะ ใส่ชื่อให้เส้นรอยปะ ใส่สีให้รอยปะ(dashed คือชื่อของเส้นที่เป็นรอยปะ) ●วางตำแหน่องข้อความต้อนรับอยู่ในมุมที่ต้องการ คือ left center right ●ใส่สีให้เส้นกรอบ ใส่ชื่อชนิดกรอบ ใส่ขนาดของเส้นกรอบ และใส่พืเนหลัง ให้กับช่องที่เขียนข้อความต้อนรับ ●ใส่ขนาดข้อความ และ ใส่สีข้อความต้อนรับ ตัวอย่างของกล่องสำหรับเพื่อนที่ไม่เข้าใจคำสั่งนะคะ คนน่ารักแวะมาทักทายคนที่ 1 แวะมาทักทายจ้า... โดย: lozocat วันที่: 10 กันยายน 2551 เวลา:6:37:27 น. หรือแบบที่มีลูกเล่นน่ารักๆ คลิกที่ลิงค์ด้านล่างค่ะ ●กล่องใส่ข้อความคอมเม้นแบบที่มีระบาย ●กล่องใส่ข้อความคอมเม้นแบบมีกล่องเล็กๆใส่ตัวนับจำนวนคอมเม้น   โดย: lozocat 4 ตุลาคม 2553 14:31:30 น.

เกี่ยวกับสคริปเรีย กล่องเขียนข้อความคอมเม้น สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด ใส่พื้นหลังให้กล่องคอมเม้น <style>textarea{width: 400;height: 320;background: url(....ใส่..//..ของรูปพื้นหลัง...);color: #FF69B4;font-family: MS Sans Serif;font-size:15pt;border: dashed 1px #FF69B4;}input{background: #FFF694;color: #402840;border: 1px dashed #FF69B4;}</style> อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับไว้นะคะ** ●ใส่ขนาดความกว้าง × ความสูง ของรูปพื้นหลัง ●สีเขียนคอมเม้นม้-ใส่ชื่อของตัวพิมพ์-ใส่ขนาดของตัวพิมพ์ ●ใส่ขนาดให้เส้นรอยปะ ใส่ชื่อให้เส้นรอยปะ ใส่สีให้รอยปะ(dashed คือชื่อของเส้นที่เป็นรอยปะ) ●สีพื้นหลัง(พื้นที่เป็นสีเหลืองช่องสำหรับใส่ชื่อคนคอมเม้น)ใส่สีให้ตัวพิมพ์ ●ขนาดของเส้นรอยปะ (ช่องสีเหลือง)ใส่ชนิดให้เส้นรอยปะ ใส่ให้สีให้เส้นรอยปะ ( dashed คือชื่อของเส้นรอยปะ) ตัวอย่างของกล่องสำหรับเพื่อนที่ไม่เข้าใจคำสั่งนะคะ ชื่อ : สีพิมพ์ชื่อคนคอมเม้น * lozocat สีของข้อความคอมเม้น กรอบและเปลี่ยนข้อความแทน Submit และ Reset ตัวอย่างของกล่องสำหรับเพื่อนที่ไม่เข้าใจคำสั่งนะคะ Submit Reset <script> document.forms.reply.Submit.value = "Submit"; document.forms.reply.Reset.value = "Reset"; document.forms.reply.Submit.style.width = 100; document.forms.reply.Reset.style.width = 100; document.forms.reply.Submit.style.height = 30; document.forms.reply.Reset.style.height = 30; document.forms.reply.Submit.style.backgroundColor = "#F8EFEC"; document.forms.reply.Reset.style.backgroundColor = "#F8EFEC"; document.forms.reply.Submit.style.color = "#e65c7c"; document.forms.reply.Reset.style.color = "#e65c7c"; document.forms.reply.Submit.style.border = "2px solid #ff0000"; document.forms.reply.Reset.style.border = "2px solid #ff0000"; </script>  อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับไว้นะคะ** ●เขียนข้อความแทนข้อความ Submit  เขียนข้อความแทนข้อความ Reset ●ใส่ขนาดความกว้าง  ให้กับช่องทั้ง 2 ช่อง ●ใส่ขนาดความสูงให้กับช่องทั้ง 2 ช่อง ●ใส่สีให้กับพื้นหลังทั้ง 2 ช่อง ●สีตัวพิมพ์ที่เขียนของทั้ง 2 ช่อง ●ใส่ขนาด และใส่สี เส้นขอบของช่องทั้ง 2 ช่อง (dashed คือชื่อของเส้นรอยปะ)   โดย: lozocat 4 ตุลาคม 2553 14:36:58 น.

เกี่ยวสีลิงค์ และ สีตัวพิมพทั้งหน้าเวป สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด Mouse ชี้ที่ Link แล้วเป็นสีรุ้ง <script type="text/javascript" src ="//www.mdn.fm/files/86638_i5ytv/link.js"></script> เซตจัดสี ตัวพิมพ์ สีของลิงค์ <style type="text/css"> <!--body { color: #cc6699; background-color:#ffffff ;}a:link {color: #5b88ba;}a:visited {color: #986cc2;}a:active {color: #6b75ff;}--></style> อธิบายการแก้คำสั่ง ของพิมพ์สีที่ จขบ.กำกับไว้ ●bgcolor...#ffffff  ใส่สีให้พื้นหลัง ●fontcolor...#cc6699 สีของตัวพิมพ์ ●linkcolor...#5b88ba สีของลิงค์ ●vlinkcolor...#986cc2 สีของลิงค์เมื่อผ่านการคลิกไปแล้ว ●activecolor...#6b75ff สีกระพริบเมื่อวางเมาท์ที่ลิงค์ หรือจะเอาแบบที่จัดมาแบบเป็นเซตๆได้ที่้มนูด้านล่างค่ะ โทนสีม่วง โทนสีแดง โทนสีส้ม โทนสีพาสเทล โทนสีเทาดำ โทนสีเหลือง โทนสีชมพู โทนสีฟ้า โทนสีน้ำเงิน โทนสีเขียว โทนสีคลาสสิค โทนสีอมเทา โทนสีพื้นหลังขาว โทนสีสี่ฤดู สีเอิร์ธโทน โทนสีเบ็ดเตล็ด   โดย: lozocat 4 ตุลาคม 2553 14:38:59 น.

สัญลักษณ์แบบต่างๆของเม้าท์เมื่อวางบนลิงค์ สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: help; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: move; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: wait; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: text; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: crosshair; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: nw-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: w-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: sw-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: s-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: se-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: e-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: ne-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style> ลองเอาเม้ามาวางที่นี่ดูค่ะ <style>A:hover {BACKGROUND-IMAGE: url(); CURSOR: n-resize; COLOR: Red; BACKGROUND-COLOR: #; TEXT-DECORATION: none}</style>   โดย: lozocat 4 ตุลาคม 2553 14:40:57 น.

เกี่ยวกับ แถบสีน้ำเงินด้านบนสุดของหน้าคอม สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด ข้อความนี้จะขึ้นที่แถบสีน้ำเงินด้านบนสุดของหน้าคอมค่ะ <script>window.document.title=".เขียนข้อความที่นี่ .";</script> บอกวัน-เดือน-ปี-และเวลาเป็นภาษาไทยที่ไตเติ้ลบาร์.. <!-- Begin function clock() { var date = new Date() var year = date.getYear() var month = date.getMonth() var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() var months = new Array("", "มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน", "ธันวาคม") var monthname = months[month] if (hour > 12) { hour = hour - 12 } if (minute < 10) { minute = "0" + minute } if (second < 10) { second = "0" + second } document.title = "ขณะนี้ : เดือน " + monthname + " วันที่ " + day + "  ปี ค.ศ. " + year + "  เวลา " + hour + ":" + minute + ":" + second setTimeout("clock()", 1000) } //  End --> ก็อปปี๊โคดในสกอร์บ็อกด้านบนมาวางไว้ที่ จาวา โคดด้านล่างค่ะ** <SCRIPT LANGUAGE="JavaScript"> ..ใส่โคดในกล่องสกอร์บ็อกที่นี่.. </script> <body on+Load="clock()"  > </body> และ ก่อนที่จะนำโคดไปวางให้ลบเครื่องหมาย + ในแท๊กบอดี้ ที่เห็นด้านบนออกก่อนนะคะ มีอักษรขึ้นมาทีละตัวที่ไตเติ้ลบาร์ค่ะ var message="..เขียนข้อความที่นี่ ."     //specifys the title var message=message+"          " //gives a pause at the end,1 space=1 speed unit, here I used 10 spaces@150 each = 1.5seconds. i="0"                     //declares the variable and sets it to start at 0 var temptitle=""                 //declares the variable and sets it to have no value yet. var speed="150"                  //the delay in milliseconds between letters function titler(){ if (!document.all&&!document.getElementById) return document.title=temptitle+message.charAt(i)  //sets the initial title temptitle=temptitle+message.charAt(i)       //increases the title by one letter i++                        //increments the counter if(i==message.length)                //determines the end of the message { i="0"                        //resets the counter at the end of the message temptitle=""                    //resets the title to a blank value } setTimeout("titler()",speed)            //Restarts. Remove line for no-repeat. } ก็อปปี๊โคดในสกอร์บ็อกด้านบนมาวางไว้ที่ จาวา โคดด้านล่างค่ะ** <script language="JavaScript1.2"> ..ใส่โคดในกล่องสกอร์บ็อกที่นี่.. window.on+load=titler </script> และ ก่อนที่จะนำโคดไปวางให้ลบเครื่องหมาย + ในแท๊กบอดี้ ที่เห็นด้านบนออกก่อนนะคะ   โดย: lozocat 4 ตุลาคม 2553 14:43:23 น.

เกี่ยวกับ แถบสีน้ำเงินด้านบนสุดของหน้าคอม สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด แสดงเวลาว่าคุณอยู่หน้านี้นานเท่าไหร่ที่ไตเติ้ลบาร์ var d_title="...คุณเข้าหน้านี้มาเป็นเวลา : " var get_time //get the login time var login_h=new Date() var login_ms=login_h.getTime() function get_current_time(){ var one_sec=1000 current_time=new Date() current_time.getTime() //hold the login time of the user var login_time=Math.floor((current_time-login_ms)/one_sec) document.title=d_title+" "+login_time+" "+"วินาที" //if he pass the minute if  (login_time>60){ var m=Math.floor(login_time/60) var s=login_time%60 document.title=d_title+" "+m+" "+"นาที "+s+" "+"วินาที"  } } function loop_time() { setInterval("get_current_time()",100) } ก็อปปี๊โคดในสกอร์บ็อกด้านบนมาวางไว้ที่ จาวา โคดด้านล่างค่ะ** <SCRIPT LANGUAGE="JavaScript"> ..ใส่โคดในกล่องสกอร์บ็อกที่นี่.. window.on+load =loop_time --> </script> และ ก่อนที่จะนำโคดไปวางให้ลบเครื่องหมาย + ในแท๊กบอดี้ ที่เห็นด้านบนออกก่อนนะคะ ข้อความที่เราเขียนเปลี่ยนไปเรื่อยๆที่ไตเติ้ลบาร์ var tt = 0; var FMess = new Array("ข้อความที่ 1","ข้อความที่ 2","ข้อความที่ 3") function FTitle()     {     document.title = FMess[tt]     tt = (tt < (FMess.length -1)) ? tt + 1 : 0;     setTimeout('FTitle()',700);     } FTitle(); ก็อปปี๊โคดในสกอร์บ็อกด้านบนมาวางไว้ที่ จาวา โคดด้านล่างค่ะ** <SCRIPT LANGUAGE="JavaScript"> ..ใส่โคดในกล่องสกอร์บ็อกที่นี่.. </script> และ ก่อนที่จะนำโคดไปวางให้ลบเครื่องหมาย + ในแท๊กบอดี้ ที่เห็นด้านบนออกก่อนนะคะ ข้อความที่เราเขียนวิ่งไปเรื่อยๆทไตเติ้ลบาร์ <!-- Begin var scrl = " .เขียนข้อความที่นี่."; function scrlsts() {  scrl = scrl.substring(1, scrl.length) + scrl.substring(0, 1);  document.title = scrl;  setTimeout("scrlsts()", 300);  } //  End --> ก็อปปี๊โคดในสกอร์บ็อกด้านบนมาวางไว้ที่ จาวา โคดด้านล่างค่ะ** <SCRIPT LANGUAGE="JavaScript"> ..ใส่โคดในกล่องสกอร์บ็อกที่นี่.. </script> </head> <BODY on+Load="scrlsts()" > </body> และ ก่อนที่จะนำโคดไปวางให้ลบเครื่องหมาย + ในแท๊กบอดี้ ที่เห็นด้านบนออกก่อนนะคะ   โดย: lozocat 4 ตุลาคม 2553 14:44:26 น.

เกี่ยวกับ ลูกเล่นต่างๆ สิ่งที่สำคัญ...หากวางแล้วโคดไม่ขึ้น ให้นำไปวางใหม่โดยวางไว้แถวล่างสุดของหน้าที่วางโคด Menu จาวาสคริป สวยๆทั้งนั้นค่ะ สคริปใบไม้ร่วงหน้าบล็อก สคริปหัวใจหลายสีร่วงหน้าบล็อก สคริปทำตัวอักษรติดเม้าท์ สคริปดุ๊กดิ๊กเดินเล่นหน้าคอม สคริปเปลี่ยนลิงค์ให้มีสีสันต์เวลาเอาเม้าท์ไปชี้1 สคริปเปลี่ยนลิงค์ให้มีสีสันต์เวลาเอาเม้าท์ไปชี้2 สคริปฟองอากาศลอยขึ้นมาหน้าคอม สคริปลูกบอลเล็กๆหลายสีเด้งตามเม้าท์ สคริป "ทำตัวการ์ตูนติดเม้าท์"น่ารัก สคริปพื้นหลังค่อยๆเปลี่ยสีไปเรื่อยๆ สคริปหนู2ตัวแข่งรถหน้าคอม สคริปลูกไก่เดินตามเม้าท์ สคริปดาวร่วงหน้าบล็อก   โดย: lozocat 4 ตุลาคม 2553 14:45:42 น.

สร้างกรอบแบบที่ใช้บ่อยๆ 1 <table border="0" cellspacing="0" cellpadding="3" width="320" align="center" style="background-color: #d8d0b8">  <tbody><tr><td align="center" valign="middle" style="color: #500000; border: 2px dashed #500000">............เขียนข้อความ..........</td></tr></tbody> </table>  อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบ.กำกับไว้นะคะ** ●ใส่สีพื้นหลังให้กรอบข้อความ ●ใส่สีให้กับข้อความ ●ใส่สีให้กับเส้นกรอบ (เส้นรอยปะ) ชื่อขนิดของ Borders 2px solid 2px dotted 2px dashed 2px groove 2px ridge 3px double 3px outset 3px inset สร้างกรอบแบบที่ใช้บ่อยๆ 2 <table border="0" cellspacing="0" cellpadding="3" width="320" align="center" style="border: 2px dashed #500000"> <tbody><tr><td align="center" valign="middle" style="color: #500000; background-color: #d8d0b8">......เขียนข้อความ......</td></tr></tbody> </table>  อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบ.กำกับไว้นะคะ** ●ใส่สีพื้นหลังให้กรอบข้อความ ●ใส่สีให้กับข้อความ ●ใส่สีให้กับเส้นกรอบ (เส้นรอยปะ) ชื่อขนิดของ Borders 2px solid 2px dotted 2px dashed 2px groove 2px ridge 3px double 3px outset 3px inset   โดย: lozocat 4 ตุลาคม 2553 18:07:29 น.

สร้างกรอบแบบที่ใช้บ่อยๆ 3 <table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="background-color: #66ccff">  <tbody><tr><td align="center" valign="middle" style="color: #ffffff; border: 3px double #ffffff ">........เขียนข้อความ......</td></tr></tbody> </table>  อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบ.กำกับไว้นะคะ** ●ใส่สีพื้นหลังให้กรอบข้อความ ●ใส่สีให้กับข้อความ ●ใส่สีให้กับเส้นกรอบ ชื่อขนิดของ Borders 2px solid 2px dotted 2px dashed 2px groove 2px ridge 3px double 2px outset 2px inset แบบที่ใส่ 2 เส้นคู่กัน <table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px dotted #c875a; background-color: #fff0f5f">  <tbody><tr><td align="center" valign="middle" style="color: #c875a5; border: 2px dotted #c875a5">.......เขียนข้อความ.......</td></tr></tbody> </table>  อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบ.กำกับไว้นะคะ** ●ใส่สีพื้นหลังให้กรอบข้อความ ●ใส่สีให้กับข้อความ ●ใส่สีให้กับเส้นกรอบทั้ง สองเส้น ชื่อขนิดของ Borders 2px solid 2px dashed 2px dotted 2px groove 2px ridge 3px double 3px outset 3px inset หรือจะใส่สลับสีกันก็ได้ค่ะ 2px solid 2px dashed 2px dotted 2px groove 2px ridge 3px double 3px outset 3px inset   โดย: lozocat 4 ตุลาคม 2553 18:08:23 น.

ตัวอย่างโคดสี ในช่องตารางจะมีโคดสีซ่อนอยู่ #EAECF4 #ECF4EE #ECF4F9 #FFF4F8 #F1EDF3 #EFF8F5 #F1EDF3 #FFF4F7 #F4F8EF #D8BFD8 #EEE9E9 #CDC9C9 #8B8989 #EEE5DE #FFFAFA #CDC5BF #FFF5EE #FFEFDB #EEDFCC #CDC0B0 #8B8378 #FFE4C4 #CDB79E #8B7D68 #A8D0E8 #98CCD0 #F8B4B8 #8098B8 #A0B8A8 #F0C898 #C8A8B0 #A8D8F8 #A0A4A8 #989898 #D8CCB0 #E8D0D0 #C0BCFF #F9C6F8 #FFCDB5   โดย: lozocat 4 ตุลาคม 2553 18:09:14 น.

ลูกเล่นกรอบเขียนข้อความแบบต่างๆ ที่ จขบ.พอจะนึกออก .3 สร้างกรอบแบบง่ายๆ 8 <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">  <tbody><tr><td style="width: 5px; background-color: #CDC0B0; height: 6px"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td><td style="background-color:#CDC0B0"></td><td></td></tr><tr><td style="background-color: #CDC0B0"></td><td align="center" valign="middle" style="padding: 7px; background-color: #FFE4E1">............เขียนข้อความ..........</td><td style="background-color: #FFE4E1"></td></tr><tr><td></td><td style="background-color: #FFE4E1"></td><td style="width: 5px; height: 5px; background-color: #FFE4E1"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td></tr></tbody> </table>   อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับ กำหนดให้กรอบอยู่มุม left center right และ ใส่ขนาดให้กรอบ ใส่สีให้เงาของกรอบ ใส่สีให้พื้นหลัง สร้างกรอบแบบง่ายๆ 9 <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center">  <tbody><tr><td></td><td style="background-color: #F1EDF3"></td><td style="width: 5px; height: 5px; background-color: #F1EDF3"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td></tr><tr><td style="background-color: #CDC0B0"></td><td align="center" valign="middle" style="padding: 7px; background-color: #F1EDF3">............เขียนข้อความ..........</td><td style="background-color: #F1EDF3"></td></tr><tr><td style="width: 5px; height: 5px; background-color: #CDC0B0"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td><td style="background-color: #CDC0B0"></td><td></td></tr></tbody> </table> อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับ กำหนดให้กรอบอยู่มุม left center right และ ใส่ขนาดให้กรอบ ใส่สีให้เงาของกรอบ ใส่สีให้พื้นหลัง สร้างกรอบแบบง่ายๆ 10 <table border="0" cellspacing="0" cellpadding="0" width="100% " align="center"><tbody><tr><td></td><td style="background-color: #CDC0B0"></td><td style="width: 5px; height: 5px; background-color: #CDC0B0"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td></tr><tr><td style="background-color: #EAECF4"></td><td align="center" valign="middle" style="padding: 7px; background-color: #EAECF4">............เขียนข้อความ..........<br /></td><td style="background-color: #CDC0B0"></td></tr><tr><td style="background-color: #EAECF4; width: 5px; height: 5px"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td><td style="background-color: #EAECF4"></td><td></td></tr></tbody></table> อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับ กำหนดให้กรอบอยู่มุม left center right และ ใส่ขนาดให้กรอบ ใส่สีให้เงาของกรอบ ใส่สีให้พื้นหลัง สร้างกรอบแบบง่ายๆ 11 <table border="0" cellspacing="0" cellpadding="0" width="100%"  align="center">  <tbody><tr><td style="background-color: #FFFACD"></td><td style="background-color: #FFFACD"></td><td style="width: 5px; height: 5px"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td></tr><tr><td style="background-color: #FFFACD"></td><td align="center" valign="middle" style="padding: 7px; background-color: #FFFACD">............เขียนข้อความ..........</td><td style="background-color: #CDC0B0"></td></tr><tr><td style="width: 5px; height: 5px"><img src="//img821.imageshack.us/img821/7481/lozocat.gif" border="0" /></td><td style="background-color: #CDC0B0"></td><td style="background-color: #CDC0B0"></td></tr></tbody> </table> อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับ กำหนดให้กรอบอยู่ในมุมที่ต้องการ เช่น left center right ใส่สีให้เงาของกรอบ ใส่สีให้พื้นหลัง   โดย: lozocat 4 ตุลาคม 2553 18:14:24 น.

ลูกเล่นกรอบเขียนข้อความแบบต่างๆ ที่ จขบ.พอจะนึกออก .2 สร้างกรอบแบบง่ายๆ 4 <table border="0" cellspacing="0" cellpadding="5" width="100%" align="center" style="border-top: 3px double #F08080; border-bottom: 3px double #f08080"><tbody><tr><td align="center" valign="middle" style="background-color: #ffdab9">............เขียนข้อความ..........</td></tr></tbody></table>  พิมพ์สีที่เห็นด้านบน สามารถเปลี่ยงแปลงได้ค่ะ สร้างกรอบแบบง่ายๆ 5 <table border="0" cellspacing="0" cellpadding="4" width="100%" align="center" style="border: 5px double #cdb79e; background-color: #ffffff">  <tbody><tr><td align="center" valign="middle" style="border: 5px double #cdb79e; background-color: #ffffff">............เขียนข้อความ..........</td></tr></tbody> </table>  พิมพ์สีที่เห็นด้านบน สามารถเปลี่ยงแปลงได้ค่ะ สร้างกรอบแบบง่ายๆ 6 <table border="0" cellspacing="0" cellpadding="5" width="100%" align="center" style="border: 5px double #FF1493; background-color: #ffffff">  <tbody><tr><td align="center" valign="middle" style="border: 5px double #FFB6C1; background-color: #ffffff">............เขียนข้อความ..........</td></tr></tbody> </table>  พิมพ์สีที่เห็นด้านบน สามารถเปลี่ยงแปลงได้ค่ะ สร้างกรอบแบบง่ายๆ 7 <table border="0" cellspacing="5" cellpadding="2" width="100%" align="center" style="border: 5px solid #da70d6; background-color: #dda0dd">  <tbody><tr><td align="center" valign="middle" style="border: 5px solid #eed2ee; background-color: #ffffff">............เขียนข้อความ..........</td></tr></tbody> </table>   พิมพ์สีที่เห็นด้านบน สามารถเปลี่ยงแปลงได้ค่ะ สร้างกรอบแบบง่ายๆ 12 <table border="0" cellspacing="0" cellpadding="5" align="center" style="background-color: #ADFF2F; border: 2px ridge #ffffff"> <tbody><tr><td> <table border="0" cellspacing="0" cellpadding="5"><tbody><tr><td align="center" valign="middle" style="background-color: #FFFFFF; border: 2px ridge #ffffff">............เขียนข้อความ..........</td></tr></tbody></table> </td></tr></tbody></table> อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับ กำหนดให้กรอบอยู่ในมุมที่ต้องการเช่น left center right ใส่สีให้เส้นของกรอบ ใส่สีให้พื้นหลัง สร้างกรอบแบบง่ายๆ 13 <table border="0" cellpadding="5" align="center"  style="border-top:2px dotted #FF69B4;border-left:2px dotted #1E90FF;border-bottom:2px dotted #9ACD32;border-right:2px dotted #FFD700;background-color:#FFFFFF;" cellpadding="5"><tr><td>............เขียนข้อความ..........</td></tr></table> ดูตัวอย่างกรอบแล้วใส่สี ตามที่กำกับไว้ ชื่อชนิดของเส้นกรอบ สีเส้นด้านบน เส้นสีด้านซ้าย สีเส้นด้านขวา สีเส้นด้านล่าง กำหนดให้กรอบอยู่ในมุมที่ต้องการเช่น left center right ใส่สีให้พื้นหลัง สร้างกรอบแบบง่ายๆ 14 <table border="0" cellspacing="1" cellpadding="4" align="center" style="border: 1px solid #F5DEB3"><tbody><tr><td style="border-style: solid; border-width: 4px; border-color: #F5DEB3 #D2B48C #D2B48C #F5DEB3"bgcolor="#F5DEB3">............เขียนข้อความ..........</td></tr></tbody></table> ดูตัวอย่างกรอบแล้วใส่สี ตามที่กำกับไว้ กำหนดให้กรอบอยู่ในมุมที่ต้องการเช่น left center right ใส่สีให้เส้นรอบกรอบ ใส่สีให้เงาของกรอบ ใส่สีให้พื้นหลัง   โดย: lozocat 5 ตุลาคม 2553 2:57:41 น.

ลูกเล่นกรอบเขียนข้อความแบบต่างๆ ที่ จขบ.พอจะนึกออก .1 สร้างกรอบแบบง่ายๆ 1 <table border="0" cellspacing="0" cellpadding="6" width="100%"align="center" style="border: 1px dashed #8098B8">  <tbody><tr><td align="center" valign="middle" style="background-color: #8098B8"> <table border="0" cellspacing="0" cellpadding="5" width="100%"  align="center" style="border: 1px dashed #EAECF4">  <tbody><tr><td align="center" valign="middle" style="background-color: #EAECF4">............เขียนข้อความ..........</td></tr></tbody> </table>  </td></tr></tbody> </table>  พิมพ์สีที่เห็นด้านบน สามารถเปลี่ยงแปลงได้ค่ะ สร้างกรอบแบบง่ายๆ 2 <table border="0" cellspacing="0" cellpadding="5" width="100%"align="center" style="border: 1px dashed #CDC0B0"> <tbody><tr><td align="center" valign="middle" style="background-color: #CDC0B0"><table border="0" cellspacing="0" cellpadding="4" width="100%" align="center" style="border: 1pt dashed #ffffff">  <tbody><tr><td align="center" valign="middle">............เขียนข้อความ..........</td></tr></tbody> </table>  </td></tr></tbody> </table>  พิมพ์สีที่เห็นด้านบน สามารถเปลี่ยงแปลงได้ค่ะ สร้างกรอบแบบง่ายๆ 3 <table border="0" cellspacing="0" cellpadding="5" width="100%" align="center" style="border: 1px dashed #9ACD32">  <tbody><tr><td align="center" valign="middle" style="background-color: #9ACD32"><table border="0" cellspacing="0" cellpadding="5" width="100%"  align="center" style="border: 1px dashed #CCFF99">  <tbody><tr><td align="center" valign="middle" style="background-color: #CCFF99"> <table border="0" cellspacing="0" cellpadding="4" width="100%"  align="center" style="border: 1px dashed #ffffff">  <tbody><tr><td align="center" valign="middle" style="background-color: #ffffff">............เขียนข้อความ..........</td></tr></tbody> </table> </td></tr></tbody> </table> </td></tr></tbody> </table>  พิมพ์สีที่เห็นด้านบน สามารถเปลี่ยงแปลงได้ค่ะ   โดย: lozocat 5 ตุลาคม 2553 2:59:47 น.

แบบใช้รูปเป็นพื้นหลัง แบบที่ 1. แบบที่ใช้รูปเดียว <table border="0" cellspacing="4" cellpadding="2" width="100%" align="center" style="background-image: url('..ใส่..//..ของรูปพื้นหลัง..')"><tbody><tr><td align="center" valign="middle">แบบที่ 1.</td></tr></tbody></table> ตัวอย่าง แบบที่ 1. แบบที่ 1. แบบที่ใช้ 2 รูป <table border="0" cellspacing="6" cellpadding="4" width="100%" align="center" style="background-image: url('...ใส่..//..ของรูปพื้นหลัง1..')"><tbody><tr><td align="center" valign="top" style="background-image: url('...ใส่..//..ของรูปพื้นหลัง2...')">แบบที่ 2. </td></tr></tbody></table> ตัวอย่าง แบบที่ 2. แบบที่ 3. นำ Borders มาซ้อนเพื่อให้กรอบมีมิติมากขึ้น... <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center" style="border: 2px dashed #8b7d68"><tbody><tr><td align="center" valign="middle">แบบที่ 3. Borders</td></tr></tbody> </table>   ●ใส่ขนาด ใส่ชื่อของ Borders และใส่สี (dashed คือชื่อของเส้นรอยปะ) ตัวอย่าง แบบที่ 3.   โดย: lozocat 7 ตุลาคม 2553 3:09:51 น.

วิธีนำโคดมาซ้อนกันแบบง่ายๆ ตัวอย่างที่ 1..... แบบที่มี Borders อยู่ด้านนอก ให้นำโคดในแบบที่ 1. หรือ แบบที่ 2  มาซ้อนด้านในโคด Borders ตัวอย่าง.การนำโคด แบบที่ 1. มาซ้อนด้านใน โคด Borders <table border="0" cellspacing="4" cellpadding="2" width="100%" align="center" style="background-image: url('//img543.imageshack.us/img543/3117/bkm108.gif')"><tbody><tr><td align="center" valign="middle">แบบที่ 1.</td></tr></tbody></table> ซ้อนแบบนี้นะคะ** นำโคดด้านบนวางลงไปในโคดด้านล่าง <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center" style="border: 2px dashed #8b7d68"><tbody><tr><td align="center" valign="middle">วางโคดแบบที่ 1.ที่นี่</td></tr></tbody> </table>  ก็จะได้.... ตัวอย่างที่ 1.....แบบที่มี Borders อยู่ด้านนอก หากต้องการกำหนดความกว้างของกรอบ ให้แก้ที่ 100% ที่อยู่ ด้านนอกสุด ของกรอบนะคะ แก้เป็นตัวเลขเฉยๆ เช่น 320 - 450 หรือ ใส่เป้น 50% - 70% ก้ได้ค่ะ หมายเหตุ** ถ้าใส่เป็นตัวเลขเฉยๆ ความกว้าง จะกว้างแค่ที่เรากำหนด แต่ถ้าใส่เป็น % ความกว้างจะยืดออกตามหน้าเวปของคุณค่ะ วิธีนำโคดมาซ้อนกันแบบง่ายๆ ตัวอย่างที่ 2..... แบบที่มี Borders อยู่ด้านใน ให้นำโคดในแบบที่ 3. Borders   มาซ้อนด้านใน โคดแแบที่ 1. หรือ แบบที่ 2. ไม่ งง นะคะ  ตัวอย่าง.การนำโคด แบบที่ 3. Borders มาซ้อนด้าน โคดแบบที่ 2 <table border="0" cellspacing="0" cellpadding="0" width="100%" align="center" style="border: 2px dashed #8b7d68"><tbody><tr><td align="center" valign="middle">แบบที่ 3.</td></tr></tbody> </table> ซ้อนแบบนี้นะคะ** นำโคดด้านบนวางลงไปในโคดด้านล่าง <table border="0" cellspacing="6" cellpadding="4" width="100%" align="center" style="background-image: url('//img687.imageshack.us/img687/7753/bkm110.gif')"><tbody><tr><td align="center" valign="top" style="background-image: url('//img543.imageshack.us/img543/3117/bkm108.gif')">วางโคดแบบที่ 3.ที่นี่ </td></tr></tbody></table> ก็จะได้.... ตัวอย่างที่ 2.....แบบที่มี Borders อยู่ด้านใน หากต้องการกำหนดความกว้างของกรอบ ให้แก้ที่ 100% ที่อยู่ ด้านนอกสุด ของกรอบนะคะ แก้เป็นตัวเลขเฉยๆ เช่น 320 - 450 หรือ ใส่เป้น 50% - 70% ก้ได้ค่ะ หมายเหตุ** ถ้าใส่เป็นตัวเลขเฉยๆ ความกว้าง จะกว้างแค่ที่เรากำหนด แต่ถ้าใส่เป็น % ความกว้างจะยืดออกตามหน้าเวปของคุณค่ะ   โดย: lozocat 7 ตุลาคม 2553 3:28:49 น.

เพิ่มโคดที่เกี่ยวกับพื้นหลัง** สำหรับพื้นหลังเมื่อคลิกที่รูปพื้นหลัง พื้นหลังจะแสดงผลในหน้าเดียวกัน... เพื่อนๆสามารถก็อปปี้โคดไปวางที่ กล่องทดสอบโคดตามลิงค์ด้านล่างเพื่อดูตัวอย่างการแสดงผลค่ะ กล่องทดสอบโคด <a href="javascript:document.body.style.backgroundImage='url(&quot;...ใส่..//..ของรูปพื้นหลัง...&quot;)';document.close();"> <img src="...ใส่..//..ของรูปพื้นหลัง..." border="0" width="120" height="120" /></a> อธิบายโคด ●กำหนดขนาด ความกว้าง x ความยาว ของรูปภาพที่จะแสดงโชว์   โดย: lozocat 7 ตุลาคม 2553 3:29:41 น.

สกอร์บ็อก ......ใส่ข้อความที่ต้องการ..... <div style="width: 200px; height: 100px; background-color: #ffffef; overflow: auto; border-color:#c47a7a; border-style: dashed; border-width: 1px;">......ใส่ข้อความที่ต้องการ....</div> อธิบายการแก้ไขคำสั่งของพิมพ์สีที่ จขบกำกับไว้นะคะ** ●ใส่ขนาดความกว้าง x ความสูง และใส่โคดสี ให้กับพื้นหลังของกล่องสกอร์บ็อก ●ใส่สี ใส่ชื่อชนิดของเส้นกรอบ ใส่ขนาดของเส้นกรอบ แบบที่ 2. แบบที่ใช้รูป แบบที่ใช้รูปและ กำหนดให้กล่องสกอร์บ้อกนั้นๆ แสดงผลตามคำสั้งที่เรากำหนด <DIV style="OVERFLOW-Y: scroll; SCROLLBAR-FACE-COLOR: #8B0000; FILTER: chroma(color=#6B8E23); OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #ce9cbd; OVERFLOW: auto; WIDTH: 108px; SCROLLBAR-SHADOW-COLOR: #8B0000; COLOR: #8B0000; SCROLLBAR-3DLIGHT-COLOR: #8B0000; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #8B0000; SCROLLBAR-BASE-COLOR: #8B0000; HEIGHT: 116px">.....ใส่ข้อความที่ต้องการ.....</DIV> อธิบายการแก้ไขคำสั่ง ●ใส่ขนาดความกว้าง x ความสูง ●แก้ไขคำสั่งตามสีที่กำกับไว้นะคะ ตัวอย่าง**ที่จัดโคดแล้ว..ไว้จะสอนการจัดโคดแบบตัวอย่างด้านล่างนะคะ...อย่าลืมติดตาม สุขสันต์วันเกิดมีความสุขมากๆนะจ๊ะ สำหรับพื้นที่ ที่ ห้ามวางโคด เนื่องจากทางบล็อคแก๊งได้กำหนดให้บางโคดไม่สามารถวางได้ในบางพื้นที่(อย่างโคดด้านบนเป็นต้น) เช่น ห้ามวางที่ช่องเขียนลายละเอียดบล็อก เคล็ดลับเล็กๆ น้อยๆ...สำหรับที่ต้องการวางโคดในพื้นที่ ที่ห้ามวางโคดนะคะ** เมื่อต้องการวางในพื้นที่ห้ามวาง..แค่ลบ โคดตัวปิดออกก้จะสามารถวางโคดในพื้นที่ห้ามวางได้โดยไม่มีผลเสียหายไดๆ ตัวอย่าง**การลบโคดตัวปิดออก <table border="0" cellspacing="0" cellpadding="0" width="170" align="center" style="height: 140px; background-image: url('//img689.imageshack.us/img689/5350/as12p.gif')">  <tbody><tr><td style="height: 5px"></td><td></td></tr><tr><td align="right" valign="top"><DIV style="OVERFLOW-Y: scroll; SCROLLBAR-FACE-COLOR: #8B0000; FILTER: chroma(color=#6B8E23); OVERFLOW-X: hidden; SCROLLBAR-HIGHLIGHT-COLOR: #ce9cbd; OVERFLOW: auto; WIDTH: 108px; SCROLLBAR-SHADOW-COLOR: #8B0000; COLOR: #8B0000; SCROLLBAR-3DLIGHT-COLOR: #8B0000; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #C875A5; SCROLLBAR-DARKSHADOW-COLOR: #8B0000; SCROLLBAR-BASE-COLOR: #FFFFFF; HEIGHT: 116px"><font size="2" color="#8B0000" style="letter-spacing: 1px">สุขสันต์วันเกิดมีความสุขมากๆนะจ๊ะ<br><img src="//img134.imageshack.us/img134/5048/26894441.gif" width="10" border="0" height="514"></DIV></td><td style="width: 4px"></td></tr></tbody> </table> แค่ลบตัวปิดซึ่งก็คือ ตัวนี้ </DIV> ให้ลบออกก่อนที่จะนำโคดไปวางในพื้นที่ห้ามค่ะ   โดย: lozocat 7 ตุลาคม 2553 6:52:33 น.

textarea บ็อก กล่องสำหรับโคดที่คุณไม่ต้องการให้ โคดนั้นๆแสดงผลโดยที่ไม่ต้องใช้ตัวแปล..... textarea บ็อก <textarea  onclick="this.focus();this.select()" style="overflow-x: hidden;font-family: tahoma; font-weight: bold; font-size: 10; COLOR: #C0C0C4 ; background: transparent; border:0;  HEIGHT: 125px; WIDTH: 320px; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW-Y: scroll; FILTER: chroma(color=#ffffff); OVERFLOW-X: hidden;   SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #3A8CBE; SCROLLBAR-TRACK-COLOR: #ffffff;   SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #fffff; ">...วางโคดที่ต้องการที่นี่...</textarea> อธิบายการแก้ไขคำสั่ง ●ใส่ขนาดตัวพิมพ์ และ สีของตัวพิมพ์ ●ใส่ขนาดความกว้าง x ความสูง ●เปลี่ยนแปลงค่าตามสีที่กำกับไว้ ดูตัวอย่างจะเป็นแบบนี้นะ คะ**สมมุติ คุณอยากแสดงโคด ที่ยังเป็นโคด แค่คุณนำโตดทั้งหมดไปวางไว้ที่กล่องโคดข้างล่าง...โคดนั้นก็จะยังเป็นโคดอยู่โดยที่คุณไม่ต้องใช้ตัวแปล..ไม่ งง นะคะ ถ้า งง ดูตัวอย่าง การวางนะคะ**สมมุติคุณต้องการที่จะแสดงโคดตามที่รุปตัวอย่างด้านล่าง ซึ่งโคดที่ได้ก็คือ... <table border="0" cellspacing="2" cellpadding="2" width="" align="center" style="background-image: url('//img148.imageshack.us/img148/1489/14775739.gif')"><tbody><tr><td align="center" valign="middle"><img src="//img706.imageshack.us/img706/1224/sf01137740102.gif" border="0" /></td></tr></tbody></table> แค่คุณก็อปปี๊โคดของรูปไปวางในโคด textarea บ็อก..โคดนั้นก็จะแสดงเป็นโคดอยู่โดยที่คุณไม่ต้องใช้ตัวแปลไดๆช่วย  มันดีมากเลยใช่มั้ยคะ....และที่สำคัญแค่คุณคลิกลงที่บ็อกตัวโคดจะแสดงไฮไลน์เพื่อง่ายต่อการก็อปปี๊โคดอีกด้วยค่ะ ตัวอย่าง**ดูตามสีนะคะ.... <textarea  onclick="this.focus();this.select()" style="overflow-x: hidden;font-family: tahoma; font-weight: bold; font-size: 10; COLOR: #C0C0C4; background: transparent; border:0;  HEIGHT: 125px; WIDTH: 318px; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #; SCROLLBAR-HIGHLIGHT-COLOR: #; OVERFLOW-Y: scroll; FILTER: chroma(color=#ffffff); OVERFLOW-X: hidden;   SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #3A8CBE; SCROLLBAR-TRACK-COLOR: #fffff;   SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; "><table border="0" cellspacing="2" cellpadding="2" width="" align="center" style="background-image: url('//img148.imageshack.us/img148/1489/14775739.gif')"><tbody><tr><td align="center" valign="middle"><img src="//img706.imageshack.us/img706/1224/sf01137740102.gif" border="0" /></td></tr></tbody></table></textarea> ก็จะได้.... <table border="0" cellspacing="2" cellpadding="2" width="" align="center" style="background-image: url('//img148.imageshack.us/img148/1489/14775739.gif')"><tbody><tr><td align="center" valign="middle"><img src="//img706.imageshack.us/img706/1224/sf01137740102.gif" border="0" /></td></tr></tbody></table> แบบที่แสดงผลทั้งหน้าเวป แบบที่แสดงผลทั้งหน้าเวป <style> body { scrollbar-arrow-color:#FFFFFF ; scrollbar-track-color: #FFF0F5; scrollbar-face-color: #FF66CC; scrollbar-highlight-color: #FFFFFF; scrollbar-darkshadow-color: #FF3399; scrollbar-3dlight-color: #FF3399; scrollbar-shadow-color: #FF3399; }</style> อธิบายการแก้ไขคำสั่ง ●แก้ไขคำสั่งตามสีที่กำกับไว้นะคะ   โดย: lozocat 7 ตุลาคม 2553 6:54:40 น.

กล่องเก็บเมนูลิงค์ MENU เขียนชื่อเวปลิงค์เขียนชื่อเวปลิงค์เขียนชื่อเวปลิงค์เขียนชื่อเวปลิงค์นำโคดด้านล่างมาต่อกันตรงนี้**ถ้าไม่ต้องการต่อให้ลบข้อความตรงนี้ออก <p align="center"><select onchange="if (this.options[this.selectedIndex].value != 'null') { window.open(this.options[this.selectedIndex].value,'new','toolbar=no,location=yes,directories=no,status=yes,menubar=yes,scrollbars=yes,resizable=ys ') }" style="width: 200; border: #c875a5 dashed 1px; padding: 1px; background:#fff0f5; color: #ff0000; "> <option><font size="2" style="letter-spacing: 1px">MENU</option> <option value='...ใส่..//..ของเวปลิงค์..'>เขียนชื่อเวปลิงค์</option><option value='...ใส่..//..ของเวปลิงค์..'>เขียนชื่อเวปลิงค์</option><option value='...ใส่..//..ของเวปลิงค์..'>เขียนชื่อเวปลิงค์</option><option value='...ใส่..//..ของเวปลิงค์..'>เขียนชื่อเวปลิงค์</option>นำโคดด้านล่างมาต่อกันตรงนี้**ถ้าไม่ต้องการต่อให้ลบข้อความตรงนี้ออก</select></p> ตัวอย่าง**หากต้องทำลิงค์เยอะๆให้นำโคดลิงค์ด้านล่างมาต่อกันไปเรีอยๆ <option value='...ใส่..//..ของเวปลิงค์..'>เขียนชื่อเวปลิงค์</option> ●ใสขนาดความกว้าง ใส่สี ใส่ชื่อของเส้น ใส่ขนาด ให้กับ เส้นรอบกล่อง (เส้นรอยปะ) ●ใส่โคดสีให้กับพื้นหลัง และ ใส่ โคดสีให้กับสีของตัวพิมพ์   โดย: lozocat 7 ตุลาคม 2553 6:56:24 น.