ในตอนแรกของบทความ How to>>Tutorials ID ,,Story นี้
เทมได้มาสอนทำธีมอย่างละเอียดยิบๆ
โดยแน่นอนว่า ควาวนี้ต้องมีอะไรพิเศษอย่างแน่นอน
ซึ่งสิ่งที่เพิ่มเติมเข้ามาจากภาคต้นฉบับ มีดังนี้
เพิ่มความละเอียด และใช้ภาษาที่ง่ายขึ้น -_-
สร้างสีสันให้สวยงามแจ่วแจ๋ว =_= (เฉพาะด้านบน)
เพิ่มลูกเล่นแฟลชสวยงาม ที่หัวบทความ
เพิ่มลูกเล่นที่เมาส์
ลดส่วนของโค้ดที่ไม่จำเป็นออกไป เพื่อให้หน้าบทความโหลดเร็วขึ้น
และที่สำคัญเพิ่มโค้ดเฮดบทความให้ด้วย...>_<
เอาหละค่ะ เรามาเริ่มกระบวนการ "แก้โค้ด" กันเลยดีกว่า
สิ่งที่พึงตระหนัก (เวลาแก้โค้ด) : จงอ่านทุกประโยคให้เข้าใจ เพราะหากไม่เข้าใจ อาจนำหน้าบทความไปสู่หายนะ =_=''
ปล. ตอนต่อไป เป็นตัวอย่างโดยแยกแยะ แต่ละวรรคของโค้ด พร้อมกับวิธีแก้โค้ด
แต่ไม่ใช่โค้ดที่จะสามารถก็อปไปได้นะคะ!!!! หากจะก็อปโค้ด กรุณาก็อปที่กล่องสี่เหลี่ยมด้านบนเท่านั้น!!
...................................................
หลายคนอาจเกิดคำถามที่ว่า เอ...พอได้โค้ดแล้วจะทำไงต่อดี -_-a
ไม่ยากค่ะ เทมได้พิมพ์วิธีการแก้โค้ดทุกอย่างที่ (ค่อนข้าง) จำเป็นในการแต่งธีมบทความ
เอาไว้ข้างล่างนี้เรียบร้อยแล้ว ลองศึกษากันดูค่ะ ไม่เข้าใจตรงไหนก็ถามได้ที่คอมเม้นท์ข้างล่าง
เดี๋ยวเทมจะรีบตอบให้อย่างเร็วไว..=O=;
<SCRIPT>document.images[0].src =
"ใส่ url รูป (เฮด)";
document.images[0].width =500; document.images[0].height =70 </SCRIPT>
/*ให้นำ url ของรูปเฮดที่ต้องการมาใส่แทนคำว่า ใส่ url รูป (เฮด) ในโค้ด โดยรูปเฮดที่จะนำว่าใส่ ต้องมีขนาดความกว้าง*ยาว = 500*70 เท่านั้น
การหา url
เริ่มแรกให้คลิกขวาที่รูป แล้วเลือก Properties > ดูส่วน address แล้วก็อปช่องของ address มาให้หมด ตั้งแต่ http://....... เรื่อยไปจนถึงนามสกุลไฟล์ เช่น .jpg .gif .png เป็นต้น*/
t
<style type="text/css">
.head1 { background: # ; }
/* ตรง # สีแดง ให้ใส่โค้ดสีของ “ชื่อบทความ” ลงไปค่ะ ดูตัวอย่างโค้ดสีได้โดย คลิกที่นี่ */
.head2 { background: # ; }
/* ตรง # สีเขียว ให้ใส่โค้ดสีของ “ชื่อตอน” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
table.story { border-color: # ; }
/* ตรง # สีเหลือง ให้ใส่โค้ดสีของ “ตารางแสดงชื่อตอนต่างๆ ในหน้าแรกของบทความ” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
span.desc_head {font-weight: bold; color: # ; }
/* ตรง # สีม่วง ให้ใส่โค้ดสีของ “ตัวอักษรของคำว่า แนะนำเรื่องแบบย่อๆ หน้าบทความ” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
BODY {
scrollbar-face-color: # ;
scrollbar-shadow-color: # ;
scrollbar-highlight-color: # ;
scrollbar-3dlight-color: # ;
scrollbar-darkshadow-color: # ;
scrollbar-track-color: # ;
scrollbar-arrow-color: # ;
}
/* ตรง # สีน้ำเงิน ให้ใส่โค้ดสีของ “สกอล์บาร์” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
table {background: # ;border:none}
/*ตรง # ให้ใส่โค้ดสีของ “ส่วนที่เขียนเนื้อหา” ลงไป
ถ้าต้องการให้ส่วนเนื้อหาใสเห็นพื้นหลัง ** ก็เว้นช่องว่างตรงนี้ไว้ ดูตัวอย่างโค้ดสี คลิกที่นี่ */
td {background: # ;border:0px solid #}
/*ตรง # ให้ใส่โค้ดสีของ “ส่วนที่เขียนเนื้อหา(เหมือนข้างบน) แต่จะซ้อนทับกับข้างบนอีกทีหนึ่ง)” ลงไป
*** ถ้าต้องการให้ส่วนเนื้อหาใสเห็นพื้นหลัง ก็เว้นช่องว่างตรงนี้ไว้ ดูตัวอย่างโค้ดสี คลิกที่นี่ */
A:hover {
color:# ;
/*ตรง # ให้ใส่โค้ดสีของ “สีตัวอักษารเวลาชี้ลิงค์” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
background: # ;
/*ตรง # ให้ใส่โค้ดสีของ “สีไฮไลท์ตัวอักษรเวลาชี้ลิงค์” ลงไป โดยถ้าไม่ต้องการใส่ให้เว้นว่างไว้ ดูตัวอย่างโค้ดสี คลิกที่นี่ */
border-top: 0px solid # ;
/*ให้เปลี่ยนตรงเลข 0 เป็นเลขอะไรก็ได้ (ยิ่งมากจะยิ่งหนา) *ควรใช้เพียง 1 เท่านั้น
ตรง # ให้ใส่โค้ดสีของ “สีเส้นขีดบนตัวอักษรเวลาชี้ลิงค์” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่
ถ้าไม่ต้องการให้มีเส้น ให้ข้ามไป ไม่ต้องแก้โค้ด */
border-bottom: 0px solid # ;
}
/*เช่นเดียวกับด้านบน*/
A:active {color: # }
/*ตรง # ให้ใส่โค้ดสีของ “ตัวอักษรที่กำลังกดลิงค์” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
body {background: # url(ใส่ urlที่นี่);
/*ตรง # ให้ใส่โค้ดสีของ “พื้นหลัง” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ โดยสีตรงนี้จะแสดงเวลาที่กำลังรอโหลดบีจีอยู่
สำหรับการใส่บีจี เป็นรูป ให้ใส่ url ของรูปแทนคำว่า ใส่ urlที่นี่ ค่ะ
background-repeat:repeat;
background-position: left bottom;
background-attachment:fixed}
BODY {
BORDER-top:15px solid # ;
BORDER-bottom:15px solid # ;
BORDER-right:15px solid # ;
BORDER-left:15px solid # ;
/*ตรง # ให้ใส่โค้ดสีของ “ขอบเว็ป” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่
15px คือความหนาของขอบเว็ป
Solid คือรูปแบบของขอบเว็ป เปลี่ยนได้หลายแบบดังนี้ค่ะ
*/
}</style><style type="text/css">
td,th,div,body,li,ul,p {color: # ;font-size:12px; /* ขนาด font*/
font-family: Tahoma; /*จะเปลี่ยน font แก้ที่นี่ได้เลย*/ }
/* ตรง # สีแดง ให้ใส่โค้ดสีของ “ตัวอักษรทั้งหน้าบทความ” ลงไปค่ะ ดูตัวอย่างโค้ดสีได้โดย คลิกที่นี่
ส่วนตรง 12px คือขนาดของตัวอักษรค่ะ */
a:link {
color:# ;
}
/* ตรง # สีเหลือง ให้ใส่โค้ดสีของ “ตัวอักษรที่เป็นลิงค์” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
a:visited {
color: # ;
/* ตรง # สีฟ้า ให้ใส่โค้ดสีของ “ตัวอักษรที่เคยลิงค์ไปแล้ว” ลงไป ดูตัวอย่างโค้ดสี คลิกที่นี่ */
}</style>
<EMBED style="LEFT: 0px; WIDTH: 820px; POSITION: absolute; TOP: 0px; HEIGHT: 370px" align=right src=ใส่ url แฟลชตรงนี้ width width=820 height=370 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
/* ตรง “ใส่ url แฟลชตรงนี้” ให้ใส่ url “แฟลช” ลงไป ดูตัวอย่างโค้ดแฟลช คลิกที่นี่
สามารถสังเกต url ของแฟลชง่ายๆ ก็คือจะลงท้ายด้วย นามสกุล .swf */
<style type="text/css"><!--body {
cursor:url(ใส่ url เมาส์)}//-->
a{ cursor:url(ใส่ url เมาส์)}</style>em
/* ตรง “ใส่ url เมาส์” ให้ใส่ url ของ “เมาส์” ที่ต้องการลงไป
โดย url ของเมาส์ จะลงท้ายด้วยนามสกุล .ico .cur หรือ .ani เสมอ ดูโค้ดเมาส์ คลิกที่นี่ */
อ่านต่อ :
http://writer.dek-d.com/dek-d/writer/viewlongc.php?id=365877&chapter=3#ixzz1K6r76Hmvหมด!!! สิ่งจำเป็นสำหรับทำธีมก็หมดไปแล้น ต่อไปก็นั่งปั่นทำธีมให้เส้นเลือดแตกไปโลด - -*
ความคิดเห็น