เกี่ยวกับพื้นหลัง เกี่ยวกับพื้นหลัง สำหรับเทคนิคเกี่ยวกับพื้นหลังผมก็ได้เรียบเรียงมาจากที่เข้าไปดูในบล็อกของคนอื่นมาอีกทีนะครับ ผิดพลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วย ถ้าจะช่วยโพสบอกก็จะขอบคุณเป็นอย่างสูงครับ การลบเส้นขอบของเฟรมสีขาวที่เป็นกรอบรอบส่วนต่างๆของบล็อก ซึ่งอาจจะไปบังเอฟเฟ็คบางอย่างของเรา หรือกรณีต้องการเปลี่ยนรูปแบบพื้นหลังใหม่ <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> สวัสดีค่ะ แวะมาอ่าน และขอโค๊ดบีจีไปใช้ด้วยค่ะ ขอบคุณที่แบ่งปันนะคะ
 โดย: กิ่งฟ้า
 วันที่: 14 พฤษภาคม 2556 เวลา:10:55:52 น.//nanfufu.blogspot.com/2012/05/blog-post_6734.html#.UadCOdLIbHY
โดย: yaovarit
วันที่: 30 พฤษภาคม 2556 เวลา:19:21:23 น. |
บทความทั้งหมด
|
 |
|
ผู้ติดตามบล็อก : 33 คน [
ขอบคุณที่แบ่งปันนะคะ