BlogGang.com : : Kluaytub :

<<<+++โค้ดทำพื้นหลัง [Background/bg]+++>>>

โค้ดทำพื้นหลัง [Background/bg]

การทำBACKGROUND

ถ้าใส่คำสั่งของ bg เข้าไปที่ช่องใส่ Script หรือ Slogan จะแสดงผลออกมาเหมือนกันทุกบล็อก

ถ้าต้องการให้แต่ละบล็อก มีรูป background ที่แตกต่างกันไป ให้เอาคำสั่งนั้นใส่ที่ Table (ช่องขียนเนื้อหาของบล็อก)นั้นเลย

คำสั่งใส่ background

ทำบล็อกให้ใส
<style>table {background:none;} td {background:none;}</style>

ใส่ bg แบบ tile
<style>body{background-image:url("XXX");}</style>

***ถ้าทำbgให้แต่ละหน้าแตกต่างกัน เอาไปใส่ ในด้านบนของหน้าที่จะเขียนก่อนทุกครั้ง***

ใส่ bg แบบ fixed ไม่ให้ bg เลื่อนลงตาม scroll bar
<style>body{background-attachment: fixed;background-image:url("XXX");}</style>

ใส่ bg เป็นรูปภาพเดียวทั้งหน้า
<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 code1', startColorstr='color code 2', gradienttype=0);">
gradienttype 0 ไล่สีตามแนวนอน
gradienttype 1 ไล่สีตามแนวตั้ง

ใส่ bg เฉพาะส่วนกลางบล็อก
เป็นของป้ามด
<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>

BG 1 จะเป็นสีที่ครอบคลุมไปถึงข้างล่าง
BG 2 เป็นกรอบที่แยกส่วนเนื้อหากับส่วนของ comment
BG 3 เป็นพื้นที่ตรงกลางของเนื้อหา

ใส่ bg แบบมุมใดมุมหนึ่ง
<style>Body{background-image:url("ใส่โค้ตภาพที่นี้");background-repeat: no-repeat;background-position: top right;background-color: "code color";}</style>

top right เราสามารถเปลี่ยนได้ จะเปลี่ยนเป็น :: top left / center / bottom right / left

ใส่ bg แบบมุมใดมุมหนึ่ง ไม่เลื่อนไปตามบล็อค
<style type>body{background:code color url(ใส่โค้ตภาพที่นี้) no-repeat fixed left bottom}</style>

Left bottom เราสามารถเปลี่ยนได้ จะเปลี่ยนเป็น :: right top / left top / center / right bottom

ลบกรอบและสีขอบของบล็อก
(ใส่ใน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>

ใส่เฮดได หรือภาพบนสุดของหน้าเว็บ
<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>

***ใส่ที่ 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>

***ต้องใส่ ใส่ bg แบบ fixed ก่อน ในช่อง Script Area
<style>body{background-attachment: fixed;background-image:url("XXX");}</style>
แล้วเอาโค๊ดหับล็อกไปใส่ที่ช่อง Slogan
bg นี้จะแสดงทุกหน้าของบล็อก****

Create Date : 10 ตุลาคม 2550
28 comments

Last Update : 7 มกราคม 2557 1:49:20 น.

Counter : 3428 Pageviews.

Share
Tweet

บลอกน่ารักดีจ้า
โค๊ตเยอะดีค่า ชอบบ

โดย: bestcat 11 ตุลาคม 2550 13:37:56 น.

บล็อคน่ารักมากค่ะ ชอบจัง

โดย: มาเรีย ณ ไกลบ้าน 23 ตุลาคม 2550 19:21:49 น.

เก่งจัง...มือใหม่ค่ะ..ยังงง ๆ อยู่เลย

โดย: บ้าน"รัก" 4 พฤศจิกายน 2550 23:11:39 น.

เข้ามาขอโค้ดค่ะ..มีประโยชน์จัง ขอบคุณนะคะ

โดย: i'm not superman 14 พฤศจิกายน 2550 14:57:58 น.

แวะมาเยี่ยมเยียนค่ะ บล็อคน่ารักมากๆๆค่ะ

โดย: Ananta_Z 25 พฤศจิกายน 2550 15:51:34 น.

แวะมาขโมยโค้ดไปก็เยอะ ยังไม่มีโอกาสเม้มส์ซั๊กกะที
"ขอบคุณสำหรับโค้ดดี ให้กับ เด็กโง่คนนี้ค่ะ "

โดย: ชินโจมายุ 12 มกราคม 2551 14:08:26 น.

แอบมาขอโค้ดคอมเม้นป้า แต่ก้อทำไม่สวยเหมือนของป้า

อยากเปลี่ยนรูปหลังล็อกอินแต่เปลี่ยนไม่เป็นอ่าค่ะป้ากล้วย

แต่ก้อขอบคุณมากน่ะค่ะ สำหรับโค้ด

โดย: กระแสไฟฟ้า 3 พฤษภาคม 2551 1:48:10 น.

ขอบคุณป้ากล้วยมากค่ะ แต่งบล๊อกได้เพราะคุณป้าแท้ๆเลย

โดย: ไข่ดาวกับขนมปัง 21 พฤษภาคม 2551 15:56:37 น.

ขอบคุณค่ะ เข้ามาจิ๊กความรู้ดีๆค่ะ

โดย: บาร์บีคิวหมูกรอบ 18 กรกฎาคม 2551 4:07:58 น.

ทำกรอบนับ comment ต้องใส่โค้ดที่ไหนค่ะ...เผอิญใส่ไปที่ จัดการ script แล้วใส่ไม่ได้อ่ะค่ะ ใส่ไปแล้วมันขึ้น Network Error (tcp_error) ค่ะ ไม่ทราบเป็นอะไร

โดย: Chitamalai 23 กรกฎาคม 2551 15:39:41 น.

ขอบคุณป้ากล้วยมากค่ะ สำหรับโค้ดแจกมือใหม่หัดทำบล็อกอย่างหนู.....

ป.ล. ชอบบล็อกป้ากล้วยจังเยยยย อยากแต่งบล็อกได้สวย ๆ แบบนี้บ้างจัง

โดย: ปุ๊กปิ๊ก (Molajung ) 24 กรกฎาคม 2551 23:23:47 น.

ขอบคุณสำหรับคำแนะนำให้มือใหม่อย่างหนู
ขออนุญาต add นะคะ

โดย: alohabebe 8 กันยายน 2551 15:33:41 น.

ขอบคุณค่ะ เดี๋ยวจะลองเอาโค้ดไปใช้บ้าง ^^

โดย: YesterdayOnceMore 17 กันยายน 2551 16:53:31 น.

โดย: Glory Bloom 20 ตุลาคม 2551 21:52:35 น.

แอบมาเก็บโค้ดบ้านป้ากล้วยค่ะ
ขอบคุณมากเลยค่ะ
โค้ดเพียบเลยค่ะ

โดย: ladysamui 21 ธันวาคม 2551 11:52:39 น.

ตระเวนหาโค้ด bg ไปทั่ว ในที่สุดก็มาเจอ
โค้ดดีๆ ที่บล็อกป้ากล้วยนี่เองค่ะ ^^"

ทำไมไม่เข้ามาตั้งแต่แรกก็ยังงงๆ อยู่ค่ะ

ขอบคุณนะคะป้ากล้วย

โดย: อุ่นตะวัน 7 มกราคม 2552 0:13:38 น.

ขอบจายจร้า

โดย: นายดิวติ๊งต๊อง IP: 203.172.179.220 22 มกราคม 2552 16:20:50 น.

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

โดย: ต้นอ้อท้าลม (ต้นอ้อท้าลม ) 27 กุมภาพันธ์ 2552 13:15:18 น.

ป้ากล้วยมาอัพเดทด้วย น่ารักจัง

โดย: แมงโม้ที่รัก 4 มีนาคม 2552 3:05:45 น.

ขอบคุณค่า โค้ดเยอะมากกกกกกก ถ้าใส่หมดคงปวดหัวตาย

โดย: เยาวณีย์ 21 เมษายน 2552 19:44:10 น.

สวัสดีค่ะป้ากล้วย แวะมาหยิบโค้ดอีกแล้วค่ะ

ป้ากล้วยคงสบายดีนะคะ ^^

โดย: อุ่นตะวัน 20 มิถุนายน 2552 14:41:03 น.

ขอบคุณมากๆเลยค่ะ เข้ามาได้หมดเลย
บล๊อกสวย น่ารัก มากค่ะ

โดย: มือใหม่สร้างบล๊อก (wander_walker ) 30 กันยายน 2552 15:15:29 น.

เข้าใจง่ายดี blog น่ารักจังเลยค่ะ

โดย: gunpung (Gunpung ) 12 มิถุนายน 2553 6:37:23 น.

บล็อกน่ารักจังเรยค่ะ
ขอนำไปใช้บ้างนะคะ..
สีสรรสบายตา..อ่านเข้าใจง่ายดีค่ะ
ขอบพระคุณมากๆๆๆค่ะ

โดย: nokka28 4 กันยายน 2553 15:45:00 น.

blog น่ารักคะ
ขอบคุณนะคะ พร้อมกับขอนำไปใช้ด้วยคะ

โดย: Pa_Stang 11 ธันวาคม 2553 1:38:14 น.

ขอบคุณมากๆค่ะ ได้ตัวช่วยแบบนี้ แม่น้อง GodZillA รู้สึกปลื้มมากๆเลย

โดย: แม่น้อง GodZillA (LorLLy ) 18 มิถุนายน 2554 14:30:16 น.

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

โดย: Rote Tomate 27 สิงหาคม 2555 21:18:55 น.

สมาชิกใหม่มาศึกษาข้อมูลค่า

ก็อบโค้ดไปแต่รุปไม่ขึ้นง่าา สงสัยว่าจะใส่ผิดช่องแน่ๆเลยค่ะ

โดย: Zercyclosis 16 พฤศจิกายน 2555 11:59:25 น.

Kluaytub

Location :
กรุงเทพฯ Thailand

[ดู Profile ทั้งหมด]

ฝากข้อความหลังไมค์

Rss Feed

Smember

ผู้ติดตามบล็อก : 29 คน [?]

4 สิ่งในโลกที่เงินซื้อไม่ได้
ความรัก
เวลา
ชีวิต
มิตรแท้

วันเวลาในโลกนี้
มีอยู่แค่ 3 วัน
เมื่อวาน :
ซึ่งเราได้ใช้มันแล้ว
และไม่มีวันหวนกลับมา
วันนี้ :
เรากำลังใช้มันอยู่
และใช้ได้แค่ครั้งเดียว
พรุ่งนี้ :
ยังไม่รู้เลยว่า
จะได้ใช้หรือเปล่า?

เวลาใครทำอะไรไม่ดีกับคุณ
อย่าลืม
ขอบคุณเขา
ที่ช่วยเสียสละตัวเอง
ทำให้คุณ
รีบเดินออกไป พบสิ่งที่ดีกว่า

คนเราเปลี่ยน.....
ด้วยเหตุผลสองประการ
เปลี่ยนเพราะได้เรียนรู้มามากแล้ว
เปลี่ยนเพราะเคยเจ็บปวดมามากแล้ว

ชีวิต
ก็เหมือนการขี่จักรยาน
คุณต้องปั่นไปข้างหน้าเท่านั้น
ถึงจะประคองตัวเอาไว้ได้

ความซื่อสัตย์สุจริต
เป็นของขวัญล้ำค่า
อย่าไปคาดหวัง
ว่าจะได้มาจากคนไร้ค่า

คุณสามารถปิดตา
เวลาที่เจอสิ่งที่ไม่อยากเห็น
แต่คุณไม่สามารถปิดใจ
ในเวลาที่ไม่อยากรู้สึก

ถ้าตอนนี้ "หดหู่"
แสดงว่าอยู่กับอดึต
ถ้าตอนนี้ "กังวล"
แสดงว่าอยู่กับอนาคต
ความสุขคือ...
การอยู่กับปัจจุบัน
และทำมันให้ดีที่สุด

การรู้จักชื่นชมสิ่งต่างๆที่มีอยู่
จะทำให้เราตระหนักว่า
ทุกวันนี้...
เรามีความสุขมากมายอยู่แล้ว

#855FA8	#8B7D7B
#8B658B	#5D478B
#9AC0CD	#CD9B9B	#CDAA7D

คนที่กำลังดูบล็อก

Friends' blogs

[Add Kluaytub's blog to your web]

Links

BlogGang.com