เกี่ยวกับพื้นหลัง

สำหรับเทคนิคเกี่ยวกับพื้นหลังผมก็ได้เรียบเรียงมาจากที่เข้าไปดูในบล็อกของคนอื่นมาอีกทีนะครับ

ผิดพลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วย ถ้าจะช่วยโพสบอกก็จะขอบคุณเป็นอย่างสูงครับ

การลบเส้นขอบของเฟรมสีขาวที่เป็นกรอบรอบส่วนต่างๆของบล็อก 

ซึ่งอาจจะไปบังเอฟเฟ็คบางอย่างของเรา หรือกรณีต้องการเปลี่ยนรูปแบบพื้นหลังใหม่

<style>table {background-color:

transparent;border-style: none;border-spacing: none;}td

{border: none;border-color: none;background: none;}

การใส่พื้นหลังเป็นรูปภาพ ซึ่งจะมีผลกับทุกหน้า 

<style>body{background-image:url("ที่อยู่ของรูปที่จะนำมาทำพื้นหลัง");}</style> 

ถ้าเราต้องการเปลี่ยนรูปพื้นหลังบางหน้าก็ให้เซ็ตพื้นหลังที่หน้าเขียนข้อมูลได้เลย

การทำให้ background ติดอยู่กับที่

<style>body{background-attachment: fixed;}</style>

การกำหนดตำแหน่งของ background

ในกรณีที่เรานำภาพที่มีขนาดเล็กมาทำเป็นพื้นหลังซึ่งไม่ต้องการให้มันแปะต่อๆกันจนเต็มหน้า ก็จัดตำแหน่งให้มันอยู่ซะเลย

เนื่องจากว่ารูปไม่เต็มจอ ดังนั้นเราจึงต้องกำหนดสีของพื้นหลังด้วย ซึ่งจะต้องกำหนดสีให้ใกล้เคียงกับสีพื้นของรูปจะทำให้ภาพที่ออกมากลีนกันเหมือนพื้นหลังเป็นรูปเดียวทั้งหน้า

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

background-position คือ ตำแหน่งของ background

ได้แก่

center = ตรงกลาง

left top =มุมซ้ายบน 

left center =มุมซ้ายกลาง 

left bottom =มุมซ้ายล่าง 

right top =มุมขวาบน 

right center =มุมขวากลาง 

right bottom =มุมขวาล่าง 

ใส่รูปที่ช่องเขียนคอมเมนท์ แต่รูปจะไม่ปรากฏที่รายการคอมเมนท์

<style type=text/css>textarea{width:400;height:400;background:url(ที่อยู่รูปพื้นหลัง);color: #cccc00;font-family: MS Sans Serif;font-size: 15pt;border: dashed 2px #00BFF3;}input{background: #FFFFA4;color: #0099ff;border: 2px dashed #D66D82;}</style>

ช่องเขียนคอมเมนท์ เป็นคำสั่งของ textarea

width = ความกว้างของรูป

height =  ความสูงของรูป

color = สีตัวอักษรที่ช่องคอมเมนท์

font-family = ชนิดตัวอักษรที่ช่องคอมเมนท์

font-size = ขนาดตัวอักษรที่ช่องคอมเมนท์

border = ลักษณะ, ขนาด, สี ของเส้นขอบ

ช่องเขียนชื่อคนโพสข้อความ เป็น input box

กำหนดลักษณะคล้ายกับ textarea

 แต่ถ้าในบล็อกของเราใช้แท็ก <textarea> หรือแท็ก  <input> กล่องข้อความที่ปรากฏจะมีลักษณะเป็นไปตามที่เรากำหนดไว้นี้

ถ้าใครต้องใช้ textarea สำหรับใส่ข้อความภายในบล็อกผมว่าไม่ควรกำหนดรูปพื้นหลังเพราะดูไปจะเกะกะเปล่าๆ 

และเรากำหนดจำนวนแถวที่ต้องการแสดงไม่ได้ด้วย มันจะมีขนาดเท่ากับรูปพื้นหลังเราเลย

การเปลี่ยนรูปต่างๆของทางบล็อกแกงค์ในบล็อกของเราให้เป็นรูปที่ต้องการ 

เราสามารถใช้โค๊ด <script> ทีเดียวเปลี่ยนรูปให้หมดทั้งบล็อกก็ได้นะครับประหยัดคำสั่งดี

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="ที่อยู่ของรูปเดิม1") {document.images[i].src="ที่อยู่ของรูปใหม่ที่จะใช้แทนรูปเดิม1"}

iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="ที่อยู่ของรูปเดิม2") {document.images[i].src="ที่อยู่ของรูปใหม่ที่จะใช้แทนรูปเดิม2"}

</script>        

ที่อยู่เดิมของรูปต่างๆ

รูปข้อความหลังไมค์

//www.bloggang.com/images/message.gif

network รูปนี้อยู่ไหนไม่รู้ผมหาไม่เจอเลย

//www.bloggang.com/images/icon_network_mini1.gif

รูปเปิดหมวก

//www.bloggang.com/images/icon_tip.gif

รูป RSS

//www.bloggang.com/images/icon_rss.png

รูปกระดาษปากกา

//www.bloggang.com/images/iconnote.gif

รูปถังขยะ

//www.bloggang.com/images/delete.gif

รูปจขบ

//www.bloggang.com/template/theme/5/images/avatar.jpg

เปลี่ยนรูปตรง now here

//www.bloggang.com/images/now.gif

รูปด้านหลังชื่อคนคอมเมนท์

//www.bloggang.com/images/smile.gif

รูป emotion 

//www.bloggang.com/emo/emo1.gif

emotion มีรูปที่ 1 - 43 นะครับ เปลี่ยนให้หมดละกัน

กรณีของ emotion อาจจะต้องกำหนดขนาดของรูปด้วยโดยวางไว้ด้านหลังที่อยู่ของรูปที่เอามาแทนรูปเดิม(หรือเราจะไม่ใส่ขนาดก็ได้)ถ้าใส่ขนาดจะต้องแยกสคริปกับตัวที่ไม่ใส่ขนาด

เช่นกำหนดขนาดเป็น 50 x 50 pix ถ้าเรามีการกำหนดขนาดของรูปต้องแยกสคริปจากตัวที่ไม่กำหนดขนาดรูปนะครับเดี๋ยวมีปัญหา

;document.images[i].height="50"; document.images[i].width="50";

ตัวอย่าง

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="ที่อยู่ของรูปemo1เดิม") {document.images[i].src="ที่อยู่ของรูปใหม่ที่จะใช้แทนรูปเดิม1"};document.images[i].height="50"; document.images[i].width="50";}

iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="ที่อยู่ของรูปemo2เดิม") {document.images[i].src="ที่อยู่ของรูปใหม่ที่จะใช้แทนรูปเดิม2"};document.images[i].height="50"; document.images[i].width="50";}

....

....

....

iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="ที่อยู่ของรูปemo49เดิม") {document.images[i].src="ที่อยู่ของรูปใหม่ที่จะใช้แทนรูปเดิม49"};document.images[i].height="50"; document.images[i].width="50";}

</script>

เปลี่ยน Bullet 

<style>ul{list-style: ;list-style-image: url(URL ของรูป);}</style>

ขออนุญาตใช้ลิงค์ไปยังบล็อกอื่นนะครับ ผมไม่ถนัดในการหารูปมาโพส

บล็อกคุณญามี่- ของแต่งบล็อก

บล็อกคุณญามี่- ไอคอนเล็กๆ

บล็อกคุณsomjaidean100- ของแต่งบล็อก

บล็อกคุณlozocat- ของแต่งบล็อก

บล็อกคุณเนยสีฟ้า- ของแต่งบล็อก

โค้ด ที่ทำให้ข้อความหรือรูปภาพ ที่เพื่อนๆคอมเม้นท์ ให้อยู่ตรงกลาง 

<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>

เอารูปใส่ที่หน้าหัวข้อกรุ๊ปบล็อก

 <img src="URLของรูป">ชื่อกรุ๊ปบล็อก 

การเปลี่ยนข้อความบน 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>