เปลี่ยน Bullet (จุดกลมๆที่อยู่หน้า Group Blog) <style>ul{list-style: ;list-style-image: url(URL ของรูป);}</style>










โค้ดเปลี่ยนรูปตรง Rss Feed <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/icon_rss.png") {document.images[i].src="URL ของรูปที่ต้องการ"}</script>












โค้ดเปลี่ยนรูปตรง My FriendFlock <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/icon_network_mini1.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>












โค้ดเปลี่ยนรูปตรง ฝากข้อความหลังไมค์ <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/message.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>













เปลี่ยนรูปหัวใจ (Login ท้ายชื่อใน Comment) <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/smile.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>











เปลี่ยน Now Here <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/now.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>










โค้ดเปลี่ยนรูปถังขยะ ( ลบ Comment, ลบ Blog ) <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/delete.gif") {document.images[i].src="URL ของรูปที่ต้องการเปลี่ยน";document.images[i].height="ความสูงของรูป"; document.images[i].width="ความยาวของรูป";}</script>














โค้ดเปลี่ยนรูปกระดาษ ปากกา ( แก้ไข Blog) <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/iconnote.gif") {document.images[i].src="URL ของรูปที่ต้องการเปลี่ยน";document.images[i].height="ความสูงของรูป"; document.images[i].width="ความยาวของรูป";}</script>















โค้ดเปลี่ยนรูป เปิดหมวก <script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/icon_tip.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>














โค้ดเชคข้อความหลังไมค์ ต้อง Login ที่ Bloggang ก่อนค่ะ ถึงจะเชคข้อความหลังไมค์ได้

& lt;a href ="//www.pantip.com/cafe/krazip/index.php" target=_blank>เชคข้อความหลังไมค์</a>

หรือใส่รูป <a href="//www.pantip.com/cafe/krazip/index.php" target=_blank><img src="URL ของรูปที่ต้องการ" border="0"></a>

โค้ด ที่ทำให้ข้อความหรือรูปภาพ ที่เพื่อนๆคอมเม้นท์ ให้อยู่ตรงกลาง <style>div.comment{text-align: center;}</style>














เปลี่ยนสี Link <style>A:link{color:;text-decoration:none;}

A:visited{color:โค้ดสีที่คลิกแล้ว;text-decoration:none}

A:hover{color:โค้ดสีที่ลากผ่าน;text-decoration: none;}</style>













ชี้ลิ้งค์แล้วมีกรอบ <STYLE type="text/css">

<!-- a:hover {border-width : 3px;border-style :

dotted;border-color : #โค๊ดสี; }--<</STYLE>







dotted สีแดงคือเปลี่ยนแบบลายเส้นได้ ดังนี้ค่ะ

none คือ ไม่มีเส้น

dotted คือ จุดๆ

dashed คือ เส้นประ

solid คือ เส้นเดี่ยว

double คือ เส้นคู่

ใส่รูปให้กล่อง Comment




<style>textarea{ width: ความกว้างของรูป; height: ความสูงของรูป; background: url (URL ของรูป); color: โค้ดสีเวลาพิมพ์; font-family : MS Sans Serif; font-size: ขนาดตัวหนังสือpt; }</style>




...ภาพดอกไม้สำหรับกล่องคอมเม้นท์พร้อมโค้ดสำเร็จรูป 1...คลิกที่นี่ค่ะ




...ภาพดอกไม้สำหรับกล่องคอมเม้นท์พร้อมโค้ดสำเร็จรูป 2...คลิกที่นี่ค่ะ




....ภาพกล่องคอมเม้นท์ สไตล์สดใสต้อนรับสปริง....พร้อมโค้ดสำเร็จรูป...คลิกที่นี่ค่ะ




.....ภาพกล่องคอมเม้นท์สวยหวานโรแมนติค....พร้อมโค้ดสำเร็จรูป...คลิกที่นี่ค่ะ

เอารูปใส่ที่หัวข้อเวปเพจ (หรือแต่ละกรุ๊ปบล็อก) <img border="0" src="URLของรูป"border="0"> ...ชื่อกรุ๊ปบล็อก..













โค๊ดกรอบปฏิทิน

<style>

calendarHeader {

background:white;

}

.calendarToday {

font-weight: bold;

background:white;

}

.calendar {

border:1px solid #000000;

}

</style>

หมายเหตุ เปลี่ยนสีตรง #000000 นะคะ ถ้ายากเปลี่ยนขนาดกรอบดูตรง border:1 ก็เปลี่ยขนาดตามใจชอบได้เลยค่ะถ้าอยากเปลี่ยนรูปแบบของขอบให้ดูตรงsolid (เส้นเดี่ยว)แล้วเปลี่ยนตามใจชอบดังนี้ค่ะ

- none คือ ไม่มีเส้น

- dotted คือ จุดๆ

- dashed คือ เส้นประ

- solid คือ เส้นเดี่ยว

- double คือ เส้นคู่













เมื่อคลิกที่ภาพเล็ก ภาพจะใหญ่ขึ้น <a href="url ภาพ ขนาดปกติที่เราจะให้คลิกไปดูภาพใหญ่" target="_blank"><img src="url ภาพที่เราทำให้มีขนาดเล็ก" width="50" height="50"></a>












เวลาที่ Status Bar <script type="text/javascript" src ="//www.mdn.fm/files/86641_8jmlc/time.js"></script>












คลิ๊ก MOUSE ขวาแล้วไม่มีอะไรขึ้นมาเลย ซึ่งก็คือ โค้ดห้ามคลิกขวานั่นเองค่ะ <script type="text/javascript" src ="//www.mdn.fm/files/86634_koegw/mouse.js"></script>














ลบพื้นหลังและลบกรอบสีขาว <style>table {background-color: transparent;border-style: none;border-spacing: none;}td {border: none;border-color: none;background: none;}</style>

เปลี่ยนรูป background



<style>body{background-attachment: fixed;background-image:url(URL ของรูป);}</style>







ใส่ background เฉพาะส่วนกลางบล็อก

BG 1 จะเป็นสีที่ครอบคลุมไปถึงข้างล่าง

BG 2 เป็นกรอบที่แยกส่วนเนื้อหากับส่วนของ comment

BG 3 เป็นพื้นที่ตรงกลางของเนื้อหา

<center><table style="background:none url(BG 1);";cellpadding="10" cellspacing="20"><tr><td align=center><table style="background:none url(BG 2);";cellpadding="10" cellspacing="20"><tr><td align=center><table style="background:none url(BG 3);";cellpadding="20" cellspacing="20"><tr><td align=center>...ใส่รายละเอียดที่นี่...

</td></tr></td></tr></center>






ใส่ background เฉพาะกลางของเนื้อหา



<center><table style="background:none url(..Urlของรูป..);";cellpadding="10" cellspacing="20">

<tr><td align=none> ข้อความที่ต้อง</td></tr></table>







....โค้ดใส่แบ็คกราวด์ตามมุมต่างๆ...

ให้ภาพอยู่ – กลางบล็อก



<style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position:center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>




Code ให้ภาพอยู่ – มุมซ้ายบน



<style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: left top;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – มุมซ้ายกลาง



<style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: left center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – มุมซ้ายล่าง



<style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: left bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – มุมขวาบน



<style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: right top;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – มุมขวากลาง



<style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: right center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>






Code ให้ภาพอยู่ – มุมขวาล่าง



<style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: right bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – เรียงแนวยาวด้านบน



<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ;background-repeat : repeat-x ;background-attachment : fixed; background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – เรียงแนวยาวด้านล่าง



<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ; background-position:bottom ;background-repeat : repeat-x;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – เรียงแนวตั้งด้านซ้าย



<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ;background-position:left ;background-repeat:repeat-y ;background-attachment : fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>







Code ให้ภาพอยู่ – เรียงแนวตั้งด้านขวา



<style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ;background-position:right;background-repeat : repeat-y;background-attachment : fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>

< font color=#693837>...ข้อแนะนำ....

สีพื้นหลังควรเลือกสีให้กลมกลืนกับ สีของรูปที่ใช้เป็นแบ็คกราวด์ค่ะ...ส่วนมากจะเป็นสีขาว หรือดำ หรือโทนสีอ่อนๆ

เปลี่ยน Title Bar (แถบสีฟ้าที่อยู่บนและล่างสุด) <script language="Javascript">

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>













ทำให้รูปไม่มีกรอบ <style>img {border: none;}</style>














เปลี่ยน Cursor <body style="cursor:url(URL ของรูป ไฟล์ .ani หรือ .cur)">















จำนวนผู้ชมออนไลน์ <script type="text/javascript" src="//fastonlineusers.com/on4.php?d=URL บล็อคของคุณ"></script> :..ข้อความที่คุณต้องการ..










ใส่รูปภาพ <img src="URL ของรูป" "border=0">











ใส่รูปภาพพร้อมคำพูด <img src="URL ของรูป" alt="ข้อความที่ต้องการ">















ส่งอีเมล์




<a href="mailto:ที่อยู่อีเมล์ของคุณ">ส่งอีเมล์</a>

ทำ Link




<a href ="URL Link">ข้อความที่ต้องการ</a>

ทำกรอบรอบๆบล็อค <script language="JavaScript1.2">

if (document.all)

document.body.style.cssText="border:10 ridge โค้ดสี"









ข้อความต้อนรับ

< font color=#891817> <SCRIPT LANGUAGE="JavaScript">

<!-- Begin

alert("ข้อความที่จะทักทาย")

// End -->

</script>









ข้อความบอกลา <Script Language="VBScript"> Sub Window_onUnLoad() alert("ข้อความที่ต้องการ") End Sub </Script>







ลูกเล่นเมื่อเปลี่ยน Webpage <="Page-Enter" content="RevealTrans (Duration=3, Transition=23)">

<="Page-Exit" content="RevealTrans (Duration=2, Transition=23)">

กรอบนับ Comment โดยคุณ กึ่งยิงกึ่งผ่าน < font color=#178918> <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:โค้ดสี double 3px; padding:20"><legend align=center><img src=URL ของรูป> Comment No. ' + i + ' <img src=URL ของรูป> </font></legend>';document.getElementById( i ).innerHTML = beforeHtml + originalHtml;}</script>

โค้ดทำกรอบและเปลี่ยนคำให้กับ 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 = "black";

document.forms.reply.Reset.style.backgroundColor = "black";

document.forms.reply.Submit.style.color = "#e65c7c";

document.forms.reply.Reset.style.color = "#e65c7c";

document.forms.reply.Submit.style.border = "3px double #e65c7c";

document.forms.reply.Reset.style.border = "3px double #e65c7c";

</script>

< font color=#009EA0>Submit = เปลี่ยนเป็นคำที่ต้องการแทน Submit

Reset = เปลี่ยนเป็นคำที่ต้องการแทน Reset

100 = ความยาวของกรอบ

30 = ความสูงของกรอบ

black = สีพื้นหลังที่ต้องการ

#e65c7c = สีตัวอักษรที่ต้องการ

3px double #e65c7c = ขนาด, ชนิด, และสีกรอบที่ต้องการ

ชนิดกรอบจะมี solid, inset, outset, groove, ridge, dashed, dotted, หรือ double









***************************************




ใส่ selection box ให้ friend's blog




การทำ selection จะทำให้รายชื่อของ links กระชับขึ้น ไม่ทำให้หน้าบล็อกของเรายาวเกินความจำเป็น

ถ้าต้องการใส่ชื่อของเว็ป ก็ให้ใส่ http ของเว็บนั้นๆเข้าไป

<select onchange="if (this.options[this.selectedIndex].value != 'null') { window(this.options[this.selectedIndex].value,'new','toolbar=no,location=yes,directories=no,status=yes,menubar=yes,scrollbars=yes,resizable=yes') }" style="background:aliceblue; width:165; color:royalblue; border:0; AutoSize:false;">ชื่อ field box name</option>

<option value='//www.................'>name</option></select>

< font color=#A05200>โค้ดใช้รูปทำ Background ให้กล่อง Emotion & lt;style>

fieldset{

background-image: url(ใส่ URL รูปที่ต้องการ);}

</style>






โค้ดใช้สีทำ Background ให้กล่อง Emotion

& lt;style>

fieldset{

background: ใส่สีที่ต้องการทำบีจี;}

</style>





< font color=#A05200>โค้ดทำกรอบให้กับ กล่อง Emotion (ทำกรอบอย่างเดียวค่ะ ไม่รวม BG)




& lt;style>

fieldset{

border: 3px double;

padding: 5px;

border-color : ใส่โค้ดสีกรอบที่ต้องการ;}

</style>

padding: 5px = ระยะห่างของรูปและตัวอักษรจากกรอบ

border: 3px = เปลี่ยนขนาดของกรอบได้ค่ะ

double = ชนิดของกรอบ เปลี่ยนเป็นแบบอื่นได้ค่ะ

ชนิดของกรอบจะมี

inset, outset, double, dotted, dashed, groove, ridge, solid

ดูตัวอย่างได้ที่ กล่อง Emotion ในบล็อกนี้ค่ะ

......โค้ดรูปแบบตัวหนังสือ....







Bold Text

<b>ข้อความ</b>

< i>Italic Text

& lt;i>ข้อความ</i>




Underlined Text

& lt;u>ข้อความ </u>




Striked-Out Text

<strike>ข้อความ</strike>







_{Sub Script Text}

_{ข้อความ}




_{Sub Script Text}

_{ข้อความ}




^{Super Script}

^{Super Script}





















เปลี่ยนสีตัวหนังสือ

<font color="โค้ดสี">ข้อความที่ต้องการ</font>




เปลี่ยนสี font ทั้งหน้า

<style>body, ul, li, p{font: normal MS Sans Serif,Tahoma;font-size:10pt;color:black;}</style>







ใส่ขนาด ของตัวพิมพ์

<font size="ใส่ขนาด ของตัวพิมพ์">..เขียนข้อความที่ต้องการ..</font>


















ตัวอย่างขนาดของตัวอักษร




.1 .2..3..4..5..6..7..8..9..10.








เปลี่ยนสีและแบบ Font

& lt;style>body, ul, li, p{font:bold MS Sans Serif;font-size:10pt;color:โค้ดสี;}</style>




เปลี่ยนตัวหนังสือให้ใหญ่และ Font

& lt;style>p b font {font:bold 13px MS Sans Serif;}</style>

ใส่กรอบ (Table) หลายๆแบบให้ข้อความ

ต้องการกรอบแบบไหนก็เปลี่ยนรายละเอียดได้ 3 ตำแหน่ง คือ

ความหน้าของกรอบ 2px

ชนิดของกรอบ dotted, dashed,solid, groove, ridge, inset, outset, double

สีของกรอบ

<table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px dotted #c875a; background-color: #โค้ดสี"><tbody><tr><td align="center" valign="middle" style="color: #โค้ดสี; border: 2px dotted #โค้ดสี">.......เขียนข้อความ.......</td></tr></tbody></table>

<table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px dashed #โค้ดสี; background-color: #โค้ดสี"><tbody><tr><td align="center" valign="middle" style="color: #c875a5; border: 2px dotted #โค้ดสี">.......เขียนข้อความ.......</td></tr></tbody></table>

<table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px groove #โค้ดสี; background-color: #fff0f5f"><tbody><tr><td align="center" valign="middle" style="color: #โค้ดสี; border: 2px dotted #โค้ดสี">.......เขียนข้อความ.......</td></tr></tbody></table> td>

<table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px dotted #โค้ดสี; background-color: #โค้ดสี"><tbody><tr><td align="center" valign="middle" style="color: #โค้ดสี; border: 2px dotted #โค้ดสี">.......เขียนข้อความ.......</td></tr></tbody></table>

<table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px dotted #โค้ดสี; background-color: #โค้ดสี"><tbody><tr><td align="center" valign="middle" style="color: #โค้ดสี; border: 2px dotted #โค้ดสี">.......เขียนข้อความ.......</td></tr></tbody></table>

<table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px inset โค้ดสี; background-color: #โค้ดสี"><tbody><tr><td align="center" valign="middle" style="color: #โค้ดสี; border: 2px dotted #โค้ดสี">.......เขียนข้อความ.......</td></tr></tbody></table>

<table border="0" cellspacing="3" cellpadding="3" width="320" align="center" style="border: 2px outset #โค้ดสี; background-color: #โค้ดสี"><tbody><tr><td align="center" valign="middle" style="color: #โค้ดสี; border: 2px dotted #โค้ดสี">.......เขียนข้อความ.......</td></tr></tbody></table>