Bloggang.com : destiny_ying : โค้ดใส่ Back Ground

โค้ดใส่ Back Ground

BACK GROUND

(ใส่ใน script จะแสดงผลทุกบล็อก
ใส่ที่ช่องรายละเอียดจะแสดงเฉพาะที่บล็อกนั้น)

อย่าลืมเอาเครื่องหมายนี้ * ออกด้วยทุกครั้ง

ใส่แบบ Fix ไม่ให้เลื่อนตาม Scroll bar

<*style>body{background-attachment: fixed;background-image:url("XXX");}<*/style>

ใส่ bg แบบ tile

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

ใส่ bg โดยไล่เฉดสี (gradient)

<*body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='color code 1', startColorstr='color code 2', gradienttype=0);">

gradienttype 0 ไล่สีตามแนวนอน
gradienttype 1 ไล่สีตามแนวตั้ง

ให้ภาพมุมบล็อกอยู่..กลางบล็อก

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

ใส่รูปที่หัวบล็อก
(วางใน 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><*/center>

โค้ดหัวบล็อก
(ต้องใส่พื้นหลังแบบ Fix ไว้ที่ Script Areaก่อนนะคะ
แล้วเอาโค้ดข้างล่างไปใส่ไว้ที่ช่อง Slogan ค่ะ)

<*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 style="border: ridge 5px #ffcccc" width=450><*tbody><*tr><*td align="center" valign="middle" style="border: 2px ridge #ffcccc;padding:10px">ใส่ข้อความ<*/td><*/tr><*/tbody><*/table>

ridge=ชนิดของกรอบที่สามารถเปลี่ยนได้
มี solid ,dotted ,dashed ,double เป็นต้น
5px=ขนาดของกรอบ
#ffcccc=โค้ดสีที่ต้องการ

โค้ดทำกรอบและใส่BGในกรอบที่มีสีเดียวกัน

<*table style="background-color: #66CDAA" cellspacing=7 cellpadding=7 width=450><*tbody><*tr><*td style="border-right:4px solid;border-top:4px solid;border-left:4px solid;border-bottom:4px solid">ใส่ข้อความที่ต้องการเขียน<*/td><*/tr><*/tbody><*/table>

ลบกรอบและสีขอบของบล็อก
(ใส่ในscript จะแสดงทุกหน้า ใส่ใน table จะแสดงแค่table นั้น)

<*style>table {background-color: transparent;border-style: none;border-spacing: none;}TD {border: none;border-color: none;background: none;}<*/style>

จำนวนผู้ชมออนไลน์

<*script type="text/javascript" src="//fastonlineusers.com/on4.php?d=URL บล็อคของคุณ"><*/script> : Users Online

จำนวนผู้ชมทั้งหมด

รวมทั้งหมด<*script src="//fastwebcounter.com/secure.php?s=url บล๊อคของคุณ"><*/script> คน

Richard Clayderman - Romeo and Juliet

Create Date : 30 กันยายน 2553

Last Update : 22 ตุลาคม 2554 19:36:45 น.

2 comments

Counter : 593 Pageviews.

ขอบคุณมากค่ะ..ชอบมากๆ

โดย: มดตกดอย IP: 84.184.227.175 วันที่: 4 ตุลาคม 2553 เวลา:18:12:00 น.

ขอบคุณมากๆเลยค่ะ

โดย: quiet lady (quiet lady

) วันที่: 21 ธันวาคม 2553 เวลา:14:14:28 น.