โค้ดแต่งบล็อกเบื้องต้นสำหรับมือใหม่ค่ะ ฟังวิทยุออนไลน์ ที่ izeemusic นี่เป็นโค้ดนะคะ เวลาใส่เอา*ออกด้วยนะ เอาไปใช้แล้วเม้น ให้จะเป็นพระคุณอย่างมาก เครดิตจากป้ากล้วย ขอขอบคุณป้ากล้วยมากๆค่ะ back ground ใส่แบบ Fix ไม่ให้เลื่อนตาม Scroll bar (ใส่ใน script จะแสดงผลทุกบล็อก ใส่ที่ช่องรายละเอียดจะแสดงเฉพาะที่บล็อกนั้น) โค้ด= <*style>body{background-attachment: fixed;background-image:url("XXX");}<*/style> ใส่ bg แบบ tile (ใส่ใน script จะแสดงผลทุกบล็อก ใส่ที่ช่องรายละเอียดจะแสดงเฉพาะที่บล็อกนั้น) โค้ด= <*style>body{background-image:url(XXX);}<*/style> ใส่ bg เป็นรูปภาพเดียวทั้งหน้า (ใส่ใน script จะแสดงผลทุกบล็อก ใส่ที่ช่องรายละเอียดจะแสดงเฉพาะที่บล็อกนั้น) โค้ด= <*style>Body{background-image:url("http:XXX");background-position: center (bottom left..etc..);background-repeat: no-repeat;background-attachment: fixed;background-color:color code;}<*/style> ใส่ bg โดยใช้สี โค้ด= <*style>body{background:color code}><*/style> ให้ภาพมุมบล็อกอยู่..กลางบล็อก <*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:center;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style> ให้ภาพมุมบล็อกอยู่ ..มุมขวาบน <*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:right top;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style> ให้ภาพมุมบล็อกอยู่ ..มุมขวากลาง <*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:right center;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style> ให้ภาพมุมบล็อกอยู่ ..มุมขวาล่าง <*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:right bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style> <ให้ภาพมุมบล็อกอยู่ ..มุมซ้ายบน <*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:left top;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style> ให้ภาพมุมบล็อกอยู่ ..มุมซ้ายกลาง <*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:left center;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style> ให้ภาพมุมบล็อกอยู่ ..มุมซ้ายล่าง <*style>Body {background-image:url("ใส่ URLของภาพที่จะใช้");background-position:left bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "ใส่สี Bg ที่ต้องการ";}<*/style> บีจีจากภาพเล็กๆหลายภาพเรียงกัน <*style>body{background-attachment: fixed;background-image:url(ใส่ URLของภาพที่จะใช้);}<*/style> ใส่รูปที่หัวบล็อก วางใน Scrip Area โค้ด= <*script>document.images[0].src = "urlรูปที่ต้องการใส่" โค้ดใส่กรอบชั้นเดียวพร้อมใส่สี BGในกรอบ มีข้อความหรือรูป วางไว้ที Script Area โค้ด= <*center><*table style="background:#000000 url();border: 2px dotted #FFCCCC;" cellspacing=20><*tr><*td align=center>ใส่รูปหรือข้อความที่นี่<*/td><*/tr><*/table><*/center> โค้ดหัวบล็อก ใช้ทำบล็อกที่เห็นอยู่ตอนนี้ ต้องใส่พื้นหลังแบบ Fix ก่อนนะคะ <*table border="0" cellspacing="3" cellpadding="3" width="80%" align="center" style="background-image: url('//..ที่ใช้เป็นขอบกรอบ')"> <*tbody><*tr><*td align="center" valign="middle"> <*table border="0" width="100%" align="center" style="background-image: url('//..ของแบล็คกราว์ดของกรอบ')"> <*tbody><*tr><*td align="center" valign="middle"> <*img src="//..ของรูปที่มาทำหัวบล็อก" border="0" width="100%" height="300" /> <*table border="0" width="100%" align="center"><*tbody><*tr><*td align="center" valign="middle"> <*table border="0" width="100%" align="center"><*tbody><*tr><*td align="center" valign="middle"> <*/td><*/tr><*/tbody><*/td><*/tr> <*/tbody><*/td><*/tr><*/tbody><*/td><*/tr><*/tbody> height="300" สามารถเปลี่ยนขนาดได้ตามชอบ ใส่เฮดได หรือภาพบนสุดของหน้าเว็บ ใส่ที่ slogan โค้ด= <*img src='url ของรูปที่ใส่'border=0> ถ้าอยากจะให้รูปอยู่ตรงกลาง ต้องใช้โค้ดข้างล่างนี้เพิ่ม <*img src="images/spacer.gif" width="x" height="10"*> ใส่ต่อกันเลยและเปลี่ยนขนาดตรง x ไปเรื่อยๆ จนได้ขนาดที่ต้องการ ตามตัวอย่างข้างล่างนี้ เช่น <*img src='urlของรูปที่ใส่'border=0> <*img src="images/spacer.gif" width="100" height="10"> ใส่รูปเฮดบล็อกแบบกำหนดความยาว <*center><*img src="http: ภาพเฮดบล็อก " width="1224" height="140" /><*/center> สร้างกรอบเขียนข้อความแบบง่ายๆ <*table border="0" cellspacing="10" cellpadding="5" width="100%" align="center" style="background-image: url('ใส่//บีจีที่1')"><*tbody><*tr><*td align="center" valign="middle" style="background-image: url('ใส่//บีจีที่2')"><*table border="0" cellspacing="5" cellpadding="5" width="100%" align="center" style="background-image: url('ใส่//ของบีจีที่3')"><*tbody><*tr><*td align="center" valign="middle">เขียนข้อความ<*/td><*/tr><*/tbody><*/table><*/td><*/tr><*/tbody><*/table> 100% ลดให้เหลือ 80%-90% หรือน้อยกว่าตามต้องการ ส่วนที่เป็น ตัวเลขได้ตามต้องการ ตัวเลขมากช่องระหว่าง บีจี ต่อ บีจี ก็ห่างมาก ทำพื้นหลังและใส่กรอบให้ข้อความที่เขียนใน Script area เหมือนที่ทำในบล็อกนี้เลยค่ะ <*table style="background:#F8FBDF ;border: 1px dotted #D9DCC2;"cellspacing=20><*td align=center>...เนื้อหาและรูปทั้งหมด...<*/td><*/tr><*/table><*/center> สี background #F8FBDF เปลี่ยนได้ 1px =ขนาดของ border (กรอบ) dotted =ชนิดของ border เลือกแบบได้ คลิกดูได้ที่นี่เลยค่ะ #D9DCC2 =สีของ border เปลี่ยนได้ตามชอบเลยค่ะ td align=center เป็นตัวกำหนดตำแหน่งรูปและข้อความในหน้าทั้งหมด เปลี่ยนได้ เป็น left /right ตามชอบเลยค่ะ คลิกเม้าส์ที่ภาพ ภาพจะเปลี่ยนขนาด <*img src="urlของรูป" height="200" width="150" onclick="this.src='urlของรูป';this.height=400;this.width=300" ondblclick="this.src='urlของรูป';this.height=200;this.width=150"> ตัวเลขที่เป็นขนาดของรูปเปลี่ยนได้ตามความต้องการ cursor/เมาส์ โค้ด= <*body style="cursor:url( URLรูป.ani )"> ลบกรอบและสีขอบของบล็อก (ใส่ในscript จะแสดงทุกหน้า ใส่ใน table จะแสดงแค่table นั้น) โค้ด= <*style>table {background-color: transparent;border-style: none;border-spacing: none;}TD {border: none;border-color: none;background: none;}<*/style> ทำกรอบรอบๆบล็อก <*script language="JavaScript1.2"> if (document.all) document.body.style.cssText="border:10 ridge โค้ดสี"<*/script> เปลี่ยนรูปอมยิ้ม (log in) ท้ายชื่อ copy code ไปใส่ในช่อง script <*script>iLength = document.images.length; for(i=0;i เปลี่ยน Now Here (ใส่ในช่อง slogan) โค้ด= <*script>iLength = document.images.length; for(i=0;i ลูกเล่นเมื่อเปลี่ยน Webpage (ใส่ที่ช่องsloganหรือScript) โค้ด= <*="Page-Enter" content="RevealTrans (Duration=3, Transition=23)"> <*="Page-Exit" content="RevealTrans (Duration=2, Transition=23)"> กลับไปหน้าหลัก <*font face="MS Sans Serif" size="1"><*a href="//ของหน้าที่ตั้งเป็นหน้าหลัก">กลับไปหน้าหลัก<*/ ตัวอักษรและขนาดเปลี่ยนได้ตามความต้องการ ส่งหลังไมค์ โค้ด= <*a href ="URL หลังไมค์" target='_blank'> ส่งหลังไมค์ที่นี่<*/a> โค้ดหลังไมค์ มีคำว่าส่งข้อความถึง......แล้วมีรูปต่อข้างล่าง โค้ด= <*B>ส่งข้อความถึง......... <*/B> <*br> <*a href ='//www.pantip.com/cafe/krazip/write.php?nick_name=crumpler'border=0 target='_blank'><*img src = '//urlของรูป' border=0 Alt='หลังไมค์'><*/a> เปลี่ยนจุดหน้าหัวข้อ (bullet) (ใส่ในscript จะแสดงทุกหน้า ใส่ใน table จะแสดงแค่table นั้น) โค้ด= <*style>ul{list-style: ;list-style-image: url(รูปที่ต้องการ);}<*/style> เปลี่ยนรูปเรารักในหลวง อยู่หลังชื่อเวลาเขียน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="ใส่รูปที่นี่..................."}<*/script> ลบกรอบใน Profile โค้ด= <*style>img {border: none;}<*/style> ข้อความที่เราเขียนวิ่งไปเรื่อยๆที่ไตเติ้ลบาร์ โค้ด= <*SCRIPT LANGUAGE="JavaScript"> <*!-- Begin var scrl = "เขียนข้อความที่นี่ "; function scrlsts() { scrl = scrl.substring(1, scrl.length) + scrl.substring(0, 1); document.title = scrl; setTimeout("scrlsts()", 300); } // End --> <*/script> <*/head> <*BODY onLoad="scrlsts()"><*/body> ข้อความที่เราเขียนเปลี่ยนไปเรื่อยๆที่ 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> เปลี่ยนสี scroll bar ใสในscript จะแสดงทุกหน้า ใส่ใน table จะแสดงแค่table นั้น) โค้ด= <*style type="text/css">body {scrollbar-arrow-color: ใส่โค้ดสี;scrollbar-highlight-color:ใส่โค้ดสี; scrollbar-base-color:ใส่โค้ดสี;scrollbar-dark-shadow-color: ใส่โค้ดสี;scrollbar-track-color:ใส่โค้ดสี;}<*/style> เปลี่ยนรูปอมยิ้ม (log in) ท้ายชื่อ (ใส่ไว้ที่ช่อง script) โค้ด= <*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="//ของรูปที่ต้องการ"}<*/script> กรอบนับ 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:โค้ดสี groove 3px; padding:20"> <*legend align=center><*img src=URL ของรูป> ความเห็นที่ ' + i + ' <*img src=URL ของรูป><*/font><*/legend>';document.getElementById( i ).innerHTML = beforeHtml + originalHtml;}<*/script> โค้ดที่ใช้ในบล็อกนี้ <*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: โค้ดสี solid 1px; padding:4"> <*legend align=center style="background:โค้ดสี url();border: #009999 solid 1px; padding:2"><*font color= โค้ดสี size=-1><*img src=URLของรูป>คนที่ ' + i + ' ที่แวะมาทักทาย<*img src=URLของรูป><*/font><*/legend>'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml }<*/script> winamp แบบมีปุ่มเปิดปุ่มเดียว <*object id="mediaplayer" height="30" width="32" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"standby="Loading Microsoft Windows Media Player components..." viewastext> <*param name="url"value="ใส่urlของเพลงที่ฟัง"> <*param name="autostart" value="false"> เปิดเพลงแบบไม่มีคอนโซล <*BGSOUND balance=0 src="urlของเพลงที่ต้องการเปิด" volume=-600 loop=0> คำสั่งเปิดเพลงแบบมีคอนโซลใช้อยู่ที่บล็อก <*embed src="urlของเพลง" autostart="true" loop="false" height="45" width="170"> loop คือจำนวนรอบที่ต้องการเปิด คลิ๊ก MOUSE ขวาแล้วไม่มีอะไรขึ้นมาเลย <*script type="text/javascript" src ="//www.geocities.com/paradijs.bloggang/mouse.js"> <*/script> โค้ด กลับขึ้นข้างบนของ Page <*center><*a href="#top">TOP<*/a><*/center> ทำกรอบให้กล่อง summit <*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> Submit = เปลี่ยนเป็นคำที่ต้องการแทน Submit Reset = เปลี่ยนเป็นคำที่ต้องการแทน Reset 100 = ความยาวของกรอบ 30 = ความสูงของกรอบ black = สีพื้นหลังที่ต้องการ #e65c7c = สีตัวอักษรที่ต้องการ 3px double #e65c7c = ขนาด, ชนิด, และสีกรอบที่ต้องการ ใส่รูปให้ Reed <*script>iLength = document.images.length; for(i=0;i ตัวอักษรวิ่งบนแถบสี <*font color="โค้ดสีตัวอักษร "><*marquee direction="left" style="background:โค้ดสีพื้น ">ข้อความ<*/marquee> ตัวอักษรวิ่งในกรอบ <*marquee style="border:โค้ดสีกรอบ 2px SOLID">ข้อความ<*/marquee> ทำลิงค์ที่เปิดในหน้าเดียวกัน <*a href="ใส่..//..ของเวป">เขียนข้อความ<*/a> ทำ Link เปิดหน้าใหม่ <*a href =URL Link target=_blank>ข้อความที่ต้องการ<*/a> ทำ Link <*a href ="URL Link">ข้อความที่ต้องการ<*/a> ทำ Linkด้วยรูป <*a href ='ใส่ //ของหน้าเว็บที่ต้องการลิงค์' target='_blank'><*img src =ใส่ urlของรูปที่เอามาทำลิงค์><*/a> โค้ดเชคข้อความหลังไมค์ <*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> โค้ดเปลี่ยนรูปตรง My Network <*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> โค้ดเปลี่ยนรูปตรง 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> เปลี่ยนรูปฝากข้อความหลังไมค์ <*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> เปลี่ยนรูปถังขยะลบ Comment <*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 Language= "VBScript">alert("ใส่ข้อความตรงนี้เลยจ้า")<*/Script> ข้อความบอกลา <*Script Language="VBScript"> Sub Window_onUnLoad() alert("ใส่ข้อความตรงนี้เลยจ้า") End Sub <*/Script> โค้ดป้องกันการยืดของหน้าบล็อก เวลาคนอื่นใส่รูปใหญ่เกินไป <*style>div.comment{overflow: auto; width: 400px; height: auto;}<*/style> width: 400px ----- เปลี่ยนขนาดได้   อย่าลืมเอาเครื่องหมาย*ออกด้วยทุกครั้ง   Create Date : 07 กุมภาพันธ์ 2553 13 comments Last Update : 17 กุมภาพันธ์ 2553 19:27:22 น. Counter : 285 Pageviews. Share Tweet

แฮะ..แฮะ ยังไม่ได้เอาไปใช้เลยค่ะ กำลังรอสมัครสมาชิกใหม่อยู่ แต่คาดว่าจะต้องมาขอความช่วยเหลือในเร็ววันนี้ก็เลยขอเม้นท์ให้เจ้าของบล๊อกก่อนละกัน กลัวจะเหงา   โดย: แม่ค้า...แม่ขาย (มาดามcheah ) 7 กุมภาพันธ์ 2553 16:48:55 น.

ทักทายค่า เข้ามาหาความรู้ค่ะ ขออนุญาตเอาไปใช้งานหน่อยนะคะ   โดย: natto (natto-kita ) 7 กุมภาพันธ์ 2553 21:21:03 น.

ขอบคุณกำลังมั่วอ เอ้ยยยย ทำอยู่ค่ะ อย่าลืมตามไปดูนะค่ะ อีก 5 วันอ่ะค่ะ คาดว่าวันเดียวคงยังไม่รุ่ง อิอิ   โดย: BeautySais 9 กุมภาพันธ์ 2553 9:18:40 น.

ขอบคุณค่ะ จะเอาไปศึกษาดูค่ะ ลองทำแล้วงงๆอยู่ค่ะ   โดย: Tonkra49 9 กุมภาพันธ์ 2553 10:40:24 น.

ขอบคุณทุกท่านที่เม้นให้นะค้า เด๋วจะตามไปดูแน่นอนค่ะ คุณBeautySais   โดย: little clover 9 กุมภาพันธ์ 2553 16:24:56 น.

ขอบคุณนะคะ...กำลังหัดทำ blog น่ะค่ะ ช่วยแนะนำหน่อยได้ไม๊คะ คือว่า ทำไมเวลาเปลี่ยนสีตัวอักษรในแต่ละ blog มันไม่เปลี่ยนให้ล่ะค่ะ ตัวอักษรและสีมันเหมือนเดิมกับที่หน้าหลักเลยค่ะ จะแก้ ก็แก้ไม่ถูก ช่วยแนะนำด้วยค่ะ...ขอบคุณค่ะ   โดย: daokookkai 15 กุมภาพันธ์ 2553 10:19:58 น.

ถึงคุณdaokookkai ลองเข้าไปลิงค์นี้ดูนะคะ งง เอ้ย แจ่มแจ้งดีค่ะ https://www.bloggang.com/viewdiary.php?id=oomameowoo&month=06-2009&date=30&group=27&gblog=4   โดย: little clover 15 กุมภาพันธ์ 2553 20:37:59 น.

ขอบคุณค่ะ   โดย: daokookkai 16 กุมภาพันธ์ 2553 10:14:18 น.

สวัสดึค่ะ ขอบคุณมากนะคะสำหรับการแบ่งปันความรู้ให้มือใหม่อย่างพวกเรา . . เย้ๆ   โดย: pat IP: 192.168.0.68, 58.64.21.100, 58.64.17.2 1 มีนาคม 2553 11:20:04 น.

เจ๋งมากเลยค่ะสำหรับข้อมูลต่างๆ ขออนุญาตนำไปใช้นะค่ะ อยากมี Blog สวยๆ เหมือนคนอื่นเขาบ้าง ^_^   โดย: BeN (LoMaBeN ) 8 มีนาคม 2553 21:54:51 น.

ขอบคุณค่ะ ถือเป็นแหล่งความรู้ คนหัดเขียนค่ะ   โดย: @NBC 10 มีนาคม 2553 0:08:03 น.

จะพยายามแต่งบล๊อกให้ได้ ขอบคุณคร้า   โดย: teung_pookie 11 มีนาคม 2553 19:31:02 น.

ขอบคุณ นะค๊า   โดย: ออร์ซิเด้ 14 มีนาคม 2553 21:30:59 น.