การเขียนบล็อก VII - เปลี่ยนรูปแบบธีมให้ดูเก๋ๆ


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


เพื่อนๆ เห็นธีมที่แมวใช้อยู่ในตอนนี้หรือเปล่าค่ะ วันนี้เรามาทำธีมแบบนี้กันค่ะ


บางท่านอาจจะไม่เห็นความแตกต่างของธีม แบบนี้กับธีมเดิมๆ ที่ใช้กันอยู่ มันแตกต่างกันอย่างไรมาดูกันค่ะ











ทั้ง 2 ภาพที่เห็น เป็นโค้ดธีมเดียวกันค่ะ แต่แสดงผลแตกต่างกันขึ้นอยู่กับ เบราเซอร์ที่เราใช้
รูปแรกที่เห็นเป็นการแสดงผลจาก Mozilla Firefox
รูปที่ 2 เป็นการแสดงผลจาก Internet Explorer


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




ข้อกำหนดของการเปลี่ยนรูปแบบธีม

1. เลือกรูปแบบธีมเป็นธีมอิสระ (แนะนำให้เลือก ธีมอิสระเมนูขวาค่ะ)

2. โค้ดธีมให้วางที่ช่อง Slogan ค่ะ

พร้อมแล้วเรามาเริ่มกันเลยค่ะ



:::โค้ด:::

<table width=700 style="border: ขนาดของเส้นกรอบบล็อกpx ลักษณะของเส้น #สีของเส้น align=center cellpadding=0 cellspacing=0>
<tr>
<td>


<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#99E0FFFF',endColorstr='#99E0FFFF')">
<tr>


<td width="700" height="0" background=""></td>


<tr style="background-image:URL();background-repeat:no-repeat;background-position:right top;">
<td>


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>


<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" style="filter:progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorstr='#99E0FFFF',endColorstr='#99E0FFFF')"></td></tr></table>




โค้ดส่วนที่เราต้องปรับเปลี่ยน ตามที่เน้นสีเลยค่ะ
สีแดง คือ ขนาดของเส้นกรอบบล็อกpx กำหนดให้เป็น 1, 2, 3,....... หรือหากไม่ต้องการให้มีกรอบ ก็กำหนดให้เป็น 0px ค่ะ
สีน้ำเงิน คือ ลักษณะของเส้น ซึ่งมีดังนี้ solid, double, dashed, dotted, groove, ridge, inset และ outset อยากรู้ว่าลักษณะของเส้นกรอบแต่ละเส้นเป็นอย่างไร ก็ไปดูที่นี่ค่ะ คลิก!!
สีม่วง คือ สีของเส้นกรอบ ใส่โค้ดสีที่เป็นตัวเลขต่อท้าย # ค่ะ



คงไม่ยากกันเกินไปใช่ไหมค่ะ


ดูการใส่ภาพพื้นหลัง :::คลิก:::


นำโค้ดสำหรับใส่ภาพพื้นหลังในมุมต่างๆ มาฝากด้วยค่ะ เพื่อนจะได้แต่งบล็อกสวยๆ แล้วนำมาให้ชมกัน



โค้ดใส่รูปให้รูปอยู่เรียงแนวยาวด้านบน

<style>body {background-image:url("……ใส่ URLของภาพ……") ;background-repeat : repeat-x ;background-attachment : fixed; background-color: "……ใส่สีพื้นหลัง……";}</style>




โค้ดใส่รูปให้รูปอยู่มุมขวาล่าง

<style>Body {background-image:url("……ใส่ URLของภาพ……");background-position: right bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>




โค้ดใส่รูปให้รูปอยู่มุมขวากลาง

<style>Body {background-image:url("……ใส่ URLของภาพ……");background-position: right center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>




โค้ดใส่รูปให้รูปอยู่มุมขวาบน

<style>Body {background-image:url("……ใส่ URLของภาพ……");background-position: right top;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>




โค้ดใส่รูปให้รูปอยู่มุมซ้ายล่าง

<style>Body {background-image:url("……ใส่ URLของภาพ……");background-position: left bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>




โค้ดใส่รูปให้รูปอยู่กลางบล็อกด้านซ้าย

<style>Body {background-image:url("……ใส่ URLของภาพ……");background-position: left center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>




โค้ดใส่รูปให้รูปอยู่มุมซ้ายบน

<style>Body {background-image:url(".…..ใส่ URL ของรูป….");background-position: left top;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}</style>



:::ขอให้สนุกกับการแต่งบล็อกนะค่ะ:::




Create Date : 20 สิงหาคม 2552
Last Update : 20 สิงหาคม 2552 10:46:10 น. 25 comments
Counter : 1125 Pageviews.
Share

 
ขอบคุณคะสำหรับสิ่งดีๆ ที่นำมาเสนอ อิอิ

พึ่งหัดเล่น กิกิ


โดย: Mooaumza วันที่: 20 สิงหาคม 2552 เวลา:13:27:16 น.  

 
แวะเข้ามาขอความรู้อีกแล้วจ้า

ขอบคุณคร้าบบคุณครูที่น่ารัก



โดย: My Happiness วันที่: 20 สิงหาคม 2552 เวลา:14:16:36 น.  

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


โดย: บุปผาลีลาวดี วันที่: 20 สิงหาคม 2552 เวลา:16:36:51 น.  

 
แวะมาทักทายค่ะ สบายดีนะคะ

Elbereth



โค้ดธีมให้วางที่ช่อง Slogan แล้ว BG จะเหมือนกันทุก blog หรือเปล่าค่ะ


โดย: Elbereth วันที่: 20 สิงหาคม 2552 เวลา:17:05:08 น.  

 
คลิกๆๆ รูปสวยๆน่ารักๆไว้ส่งต่อเพียบ...


โดย: พรหมญาณี วันที่: 21 สิงหาคม 2552 เวลา:9:51:19 น.  

 
ขอบคุณสำหรับ code ครับ
เดี๋ยวจะลองเอาไปปรับใช้ดูครับผม ^^



โดย: คนจนที่อยากรวย วันที่: 22 สิงหาคม 2552 เวลา:11:38:31 น.  

 
แอบมาดูของคุณน่ารักดี ของเรานะไม่มีอะไรเลยขอบอก


โดย: ชายเอ ทุ่งรังสิต วันที่: 1 กันยายน 2552 เวลา:1:59:52 น.  

 
แวะมาดูคุณครูที่น่ารัก ที่เกิดวันนี้

ขอให้มีความสุขเนื่องในวันคล้ายเกิดทุกปีๆนะค๊ะ



โดย: ยายเก๋า (ชมพร ) วันที่: 1 กันยายน 2552 เวลา:22:03:54 น.  

 


ป้าก็อยากเปลี่ยนทีมบ้างจังจ่ะ

แต่ก็กลัวว่า จะทำให้บล๊อกอื่นๆของป้า เพี้ยนไปอ่ะจ่ะ

นี่ป้าก็ขอร้องให้เจ้าลูกชายป้า เปิดบล๊อกขึ้นมาอีกบล๊อก

เพื่อป้าจะได้ลองทำดู หรือนู๋เหมียวคิดว่ายังไงดีคะ...

ช่วยป้าคิดทีน้า...




โดย: ป้าหู้เองจ่ะ (fifty-four ) วันที่: 12 กันยายน 2552 เวลา:17:09:27 น.  

 
ขอบคุณค่ะ ได้แต่มอง

แอบเข้ามาบ่อยๆ

แต่ไม่กล้าซะที

มันเป็นความแปลกใหม่นะ

สำหรับคนที่เพิ่งจะเปิดใจรับเทคโนโลยี

และอยากเรียนรู้ เพื่อจะตามโลก

และคุยภาษาเดียวกันกับคนรุ่นใหม่


ขอบคุณอีกครั้งที่แบ่งปัน



แอมอร


โดย: peeamp วันที่: 13 กันยายน 2552 เวลา:15:06:46 น.  

 
สวัสดีค่ะ คุณแมว...

ป้า-หาย คุณแมว-มา แล้วเมื่อไรจะเจ๊อะกันเสียที...เนอะ..อิ อิ

คลิกๆๆ รูปสวยๆน่ารักๆไว้ส่งต่อเพียบ...


โดย: พรหมญาณี วันที่: 14 กันยายน 2552 เวลา:14:11:06 น.  

 


ขอบคุณที่น้องเหมียว แนะนำป้าหู้นะจ๊ะ

จู๊ฟ...จู๊ฟ...




โดย: ป้าหู้เองจ่ะ (fifty-four ) วันที่: 14 กันยายน 2552 เวลา:20:22:32 น.  

 
อรุณสวัสดิ์ค่ะ

วันนี้อากาศดี

นกมาเกาะบนต้นลำใยหลังบ้าน


ส่งเสียงเจื้อยแจ้ว ตื่นดีกว่า




แอมอร




โดย: peeamp วันที่: 15 กันยายน 2552 เวลา:6:22:01 น.  

 
คลิกๆๆ รูปสวยๆน่ารักๆไว้ส่งต่อเพียบ...


โดย: พรหมญาณี วันที่: 16 กันยายน 2552 เวลา:11:18:23 น.  

 


สวัสดีตอนเย็น ของวันสีเขียวค่ะ นู๋เหมียว

ขอให้มีความสุข มากๆนะคะ

วันนี้ป้าพาคนสำคัญ มาแนะนำให้รู้จักอ่ะจ่ะ




โดย: ป้าหู้เองจ่ะ (fifty-four ) วันที่: 16 กันยายน 2552 เวลา:18:11:56 น.  

 
สบายดีน๊าขอรับ..


โดย: คนสาธารณะ วันที่: 17 กันยายน 2552 เวลา:3:19:48 น.  

 
อรุณสวัสดิ์ค่ะ



ขอให้เป็นเช้าที่สดชื่นนะคะ



แอมอร


โดย: peeamp วันที่: 17 กันยายน 2552 เวลา:7:09:49 น.  

 
สวัสดีค่ะ คุณแมว....

ป้ามาเป็นกำลังใจให้คุณแมว ทั้งหน้าไมค์และหลังไมค์เลย...ค่ะ

มีความสุขมาก ๆ ในทุกวันดี ๆ...นะคะ



โดย: พรหมญาณี วันที่: 17 กันยายน 2552 เวลา:10:31:51 น.  

 
มาแล้วมาแล้ว..เจ้าค่ะ..
ต้องขอโทษด้วยมีภาระกิจต้องทำเจ้าค่ะ


หมวกที่ถักถวายพระเจ้าค่ะ


โดย: yoja วันที่: 17 กันยายน 2552 เวลา:12:14:40 น.  

 


ขอบคุณสิ่งดีๆ ที่เอามาแบ่งปันกันนะคะ :))

Charlie มาชวนแวะไปชิมหมีผัดซอสแดง
บ้าน Charlie กันนนน:))





โดย: sierra whiskey charlie วันที่: 17 กันยายน 2552 เวลา:20:27:28 น.  

 
แวะมาตอนมืดๆ

คืนนี้ อย่านอนดึกน้า

ระวัง กุก กุก กู๋


แอมอร


โดย: peeamp วันที่: 17 กันยายน 2552 เวลา:22:37:51 น.  

 
แวะมาศึกษาอีกค่ะ


โดย: My Happiness วันที่: 18 กันยายน 2552 เวลา:13:46:58 น.  

 
กลับมาจาก ตจว. แย้ว คิดถุง มักๆ


โดย: พลังชีวิต วันที่: 20 กันยายน 2552 เวลา:17:11:32 น.  

 
แวะมาอีกแล้วค่ะ

พยักหน้าหงีก หงึก


แต่ยังไม่ได้ลงมือทำซะที

ยังไงก็ขอบคุณไว้ก่อนอะนะ


ฝากตัวเป็นศิษย์ด้วยคน


แอมอร


โดย: peeamp วันที่: 21 กันยายน 2552 เวลา:6:52:36 น.  

 
สวัสดีค่ะ คุณแมว...

ป้าไม่อยู่สองวัน คิดถึงคุณแมว...จัง
คุณแมว สบายดี...นะคะ

วันนี้ ปอ ป้า ขอเรียนเชิญทุกท่าน
ร่วมกันถวายพระพรให้ในหลวงของเรา
ขอให้พระองค์ทรงมีพระพลานามัยแข็งแรง
หายจากอาการที่ทรงพระประชวรโดยเร็ววัน

ขอพระองค์ทรงพระเจริญยิ่งยืนนาน เทอญ..






โดย: พรหมญาณี วันที่: 21 กันยายน 2552 เวลา:11:28:03 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

ผู้หญิงขี้รำคาญ
Location :


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

ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 2 คน [?]

Group Blog
 
<<
สิงหาคม 2552
 1
2345678
9101112131415
16171819202122
23242526272829
3031 
 
20 สิงหาคม 2552
 
All Blogs
 
Friends' blogs
[Add ผู้หญิงขี้รำคาญ's blog to your web]
Links
 

MY VIP Friend
 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.