` t.h.e S K Y ( code )

ลำดับตอนที่ #33 : อธิบายส่วนต่างๆ ในโค้ดธีม

อธิบายส่วนต่างๆ ในโค้ดธีม

ตาลจะมาอธิบายอย่างละเอียดเกี่ยวกับธีมที่ตาลเอามาแจกนะคะ -0-
คิดว่าคงมีหลายคนงงกับโค้ดมากๆ 555 ตาลเองก็งงเหมือนกัน
วันนี้จะมาอธิบายอย่างละเอียดเลยนะคะ
ส่วนจะเข้าใจหรือไม่นั้น ก็คงต้องแล้วแต่ท่านเลยล่ะ ฮ่าๆ -0-;
เพราะตาลก็อธิบายไม่เก่งหรอก

และนี่คือโค้ดที่แจกนะคะ อยู่ในตอนที่ 5 ของบทความ

 

<style type="text/css">

body { background:url(url ของภาพ) repeat fixed !important; }

table,td,tbody,tr { background: #โค้ดสี !important;
border:none !important; border-collapse:separate !important; }

td font { color: #โค้ดสี !important; }

td,th,div,body,li,ul,p,a,span,span.desc_head { color: #โค้ดสี !important; font-family:Tahoma; font-size: 12px; }

 

.head1 { background: #โค้ดสี !important; border: 0px dashed #โค้ดสี !important; }

.head1 h1 { color: #โค้ดสี !important;  font-family: Tahoma , tahoma; }
 

.head2 { background: #โค้ดสี !important; border: 0px dashed #โค้ดสี !important;
font-size: 12px; }

 

a:link { color: #โค้ดสี !important; }

a:active,a:visited { color: #โค้ดสี !important; }

a:hover { background: #โค้ดสี !important; color: #โค้ดสี !important; border: ขนาดpx รูปแบบ #สีของเส้นขอบ !important; }

 

input,select,textarea { background: #โค้ดสี !important; color: #โค้ดสี !important; border: ขนาดpx รูปแบบ #โค้ดสี !important; font-family: tahoma; font-size: 11px; }

</style>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

ส่วนที่ 1

body { background:url(url ของภาพ) repeat fixed !important; }

ตรงนี้คือส่วนของแบล็คกราวของบทความนะคะ
เช่น ธีมในตอนนี้เป็นรูปผึ้ง
url ของภาพ คือ ที่อยู่ของภาพที่เรานำรูปไปอัพโหลดไว้ผ่านเว็บต่างๆ
เช่น เว็บไซต์ upic.me , imgur.com เป็นต้น
ส่วน repeat ก็คือ ให้แสดงรูปซ้ำ
fixed คือ ภาพอยู่นิ่งกับที่ ถึงจะเลื่อนสกอบาร์ลงมาภาพก็ไม่เลื่อนตาม

**ใครที่มีปัญหาตรงที่บีจีไม่ขึ้น ให้ลองเปลี่ยนเว็บฝากรูปนะคะ และดู url ภาพด้วยว่ามีลงท้ายพวก .jpg/.png/.gif อะไรแบบนี้หรือเปล่า
ถ้าดูแล้วว่ามี แต่ยังไม่ติด ก็เปลี่ยนเบราเซอร์ที่ใช้ดูนะคะ เช่น ปกติใช้ IE/Firefox ลองเปลี่ยนเป็น Chrome นะคะ
ถ้ายังไม่ได้อีก (อะไรมากมายวะเนี่ย T^T) คลิกที่ลิงค์นี้เลยค่ะ >> ธีมบทความ
แต่ถ้าดูแล้วไม่มี ให้ดูที่หน้าเว็บที่เราฝากรูป ดูตรง Direct Link ตาลแนะนำเว็บ upic.me และ imgur.com นั่นแหละ ก๊อปปี้ตรงนั้นมาใส่เลยค่ะ (กะจะแคปรูปให้ดู แต่ดึกแล้วเดี๋ยวแม่มาไล่ - -.)

เพราะตาลลองโค้ดก่อนนำมาแจกแล้ว ตอนที่มีคนมาแจ้งว่ารูปไม่ขึ้นก็ลองดูอีกรอบ
มันก็ขึ้นนะ = =; ไอ้เราก็งงทำไมเราขึ้น แต่คนอื่นไม่ขึ้นวะ ? เอ้อ แปลกดี**

ส่วนที่ 2

table,td,tbody,tr { background: #โค้ดสี !important; border:none !important; border-collapse:separate !important; }

ตรงนี้เป็นส่วนของสีพื้นที่เนื้อหาทั้งหมดค่ะ เช่น เราใส่โค้ดสี #000000 ก็จะเป็นสีดำทั้งหมดดังรูปค่ะ



ส่วนที่ 3

td font { color: #โค้ดสี !important; }

ส่วนนี้เป็นสีตัวอักษรเฮด 2 ที่เป็นตัวเลขคนเข้าชม โพส และโหวต

ส่วนที่ 4

td,th,div,body,li,ul,p,a,span,span.desc_head { color: #โค้ดสี !important; font-family: Tahoma; font-size: 12px; }

ตรงนี้เป็นสีตัวหนังสือที่อยู่ในพื้นที่เนื้อหาเกือบทั้งหมด
ยกเว้นตรงแถบประเภทนิยาย ชื่อผู้แต่ง โหวต บลาๆๆ - -.
ข้างหลัง font-family คือ ชื่อฟ้อนท์ที่ต้องการ
font-size คือ ขนาดของฟ้อนต์

ส่วนที่ 5

.head1 { background: #โค้ดสี !important; border: 0px รูปแบบเส้น #โค้ดสี !important; }

ส่วนนี้คือเฮด 1 หรือตรงชื่อเรื่องนั่นแหละนะคะ
background ก็คือสีของเฮด 1 สามารถใส่รูปได้เหมือนบีจีบทความ
แต่ต้องเปลี่ยนเป็น background:url(url ของภาพ) repeat !important;
border ก็คือเส้นขอบ
0px คือความหนาของเส้นขอบ เลขยิ่งเยอะยิ่งหนา
รูปแบบเส้น ก็คือรูปแบบเส้นนั่นแหละ - -; ฮะๆ
ส่วนโค้ดสีก็คือสีของเส้นนะคะ

ตัวอย่างเส้น >>จิ้มๆ<<
Credit : Code สำหรับ My.iD2 [Beta] & ของตกแต่ง

ส่วนที่ 6

.head1 h1 { color: #โค้ดสี !important;  font-family: Tahoma , tahoma; }

ส่วนนี้ก็คือสีของตัวหนังสือบนเฮด 1 และรูปแบบฟ้อนต์

ส่วนที่ 7

.head2 { background: #โค้ดสี !important; border: 0px dashed #โค้ดสี !important;

font-size: 12px; }

ส่วนนี้คือส่วนของเฮด 2 ก็เหมือนกับเฮด 1 เลยค่ะ

ส่วนที่ 8

a:link { color: #โค้ดสี !important; }

a:active,a:visited { color: #โค้ดสี !important; }

a:hover { background: #โค้ดสี !important; color: #โค้ดสี !important; border: ขนาดpx รูปแบบ #สีของเส้นขอบ !important; }
 

ตรงนี้เกี่ยวข้องกับลิงค์ในบทความค่ะ เริ่มจากอันแรก
a:link ตรงนี้จะเป็นสีลิงค์ปกติที่แสดงหน้าบทความ
a:active,a:visited ตรงนี้คือสีลิงค์ที่เราเคยคลิกแล้ว
a:hover ตรงนี้คือสีลิงค์เวลาเราเอาเม้าส์มาชี้ที่ลิงค์ (มีลูกเล่นเยอะสุดๆ -..-b)

ส่วนที่ 9

input,select,textarea { background: #โค้ดสี !important; color: #โค้ดสี !important; border: ขนาดpx รูปแบบขอบ #โค้ดสี !important; font-family: tahoma; font-size: 11px; }

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



-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

สุดท้ายแล้วท้ายสุด ไม่เข้าใจตรงไหน ถามได้จ้า โพสถามในตอนนี้เลย เดี๋ยวถ้าตาลว่างๆ จะมาตอบนะคะ เพราะไม่มั่นใจเหมือนกันว่าอธิบายแล้วจะเข้าใจไหม - -;

Thanks Theme : ?Bachelor