ห้องลับโค้ด

ลำดับตอนที่ #2 : วิธีสอนทำธีม

. how to | สอนทำธีมแบบละเอียด*ยิบ*☂

วันนี้วันว่างเวิ่นเว้อเลยมาสอนทำธีมจ้ะ ;)
จริงๆ มีคนมารีเควสนานแล้วล่ะ. แต่เพิ่งมานึกได้เอาป่านนี้ 5555
มาลงแล้วเน้อ :-D
ขอค่าเรียนเป็นเม้นง่ายๆ เม้นเดียว . ไม่ยากเลยใช่มั้ยล่ะ :D
ใครมีพื้นฐานอยุ่แล้วก็จะเข้าใจง่ายกว่านะ. ค่อยๆ ดูแล้วก็ฝึกทำกันไปนะเออ <3

กดแทรกโค้ด HTML ก่อนจะเริ่มเรียนกันนะจ๊ะ♥

beyo<style type="text/css">

 

 


a,body{cursor:crosshair;}

body {background:#000000 url();
background-repeat:repeat;
background-position:center;
background-attachment:fixed}

.head1 { background:#000000; }
.head2 {  background:#000000; }
table.story {  border-color:#000000; }
span.desc_head {font-weight: bold;  color:#000000; }
BODY {
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-track-color:#000000;
scrollbar-arrow-color:#000000;
}

table {background:#000000;border:none;}
td {background:none;border:none}

A:hover {
color:#000000;
background:#000000;
BORDER-top:1px dashed #000000;
BORDER-bottom:1px dashed #000000;}
A:active {color:#000000;}
BODY   {
BORDER:15px solid #000000;
}

td,th,div,body,li,ul,p {color: #000000;font-size:11px; /* ขนาด font*/
font-family: Tahoma; /*จะเปลี่ยน font แก้ที่นี่ได้เลย*/
}
a:link {
color:#000000;
}
a:visited {
color:#000000;
}

INPUT, SELECT, TEXTAREA {
background-color:#000000;
color:#000000;
font-family: tahoma;
border: dashed 1px #000000;
font-size:11px;
padding: 0;
}</style>ng

 

ในช่องข้างบนเป็นโค้ดดิบๆ เลยทีเดียว 555
อธิบายก่อนสอน.  อ่านตรงนี้ก่อนจ้ะ!
*ตัวอักษรสีชมพู : คำอธิบาย
ตัวอักษรสีฟ้า : ส่วนที่สามารถเปลี่ยนได้ (โค้ดสี / url)*


ไม่ได้หวงอะไร แค่อย่าก้อปปี้นะจ๊ะ สอนแบบนี้มันก็เหนื่อยนะเออ.
จะอธิบายเป็นส่วนๆ ไปเน้อ★

(อย่าไปสนใจคำว่า beyo ตรงหน้าโค้ดแล้วก็ ng ตรงหลังโค้ดนะจ้ะ! แปะไว้แล้วจะบอกทีหลัง 555)

และ! ถ้าก้อปอันข้างบนไปแปะ มันจะเป็นธีมดำๆ ทั้งอันเลยแหล่ะ =O=;
- - - - - -
แล้วก็ก่อนที่จะมาเริ่มเรียน. สำหรับใครที่ไม่รู้ไปหาโค้ดสีที่ไหน ไปดูได้ในนี้เลย↓
ในนี้มีโค้ดสีเยอะแยะ คลิกเลย♥ 
ของเขาเยอะมากแหล่ะ 555
หรือจะไปก้อปมาจากใน photoshop ก็ได้นะจ๊ะ แล้วแต่ถนัดเลย :)



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

<style type="text/css"> -เริ่มโค้ด~ {บอกทำไมวะ T_T}
a,body{cursor:crosshair;} - อันนี้เป็นโค้ดเมาส์จ้า :D ถ้ามี url เมาส์ ก็ใส่เป็นแบบนี้แทน↓
body, a, a:hover {cursor: url(ใส่ url เมาส์ตรงนี้~), progress;}
body {background:#000000 url(ใส่ url รูป); - ตรงนี้เป็นบีจีหลักจ้า :D เป็นรูปบีจีที่เปิดธีมมาก็เห็นนั่นแหล่ะ -.-
*ถ้าจะใส่เป็นสีก็ใส่โค้ดสีแล้วตรง url จะว่างไว้ก็ได้จ้า :)*

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

background-repeat:repeat;
background-position:center;
background-attachment:fixed}
- ตรงนี้ไม่ต้องไปสนใจมัน 5555 คือมันจะเป็นการจัดรูปแบบของรูปบีจีจ้ะ ใส่ไปทั้งดุ้นเลยไม่ต้องแก้

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

.head1 { background:#000000; } - อันนี้จะเป็นเฮดหลักอ่ะจ้ะ :) เป็นเฮดที่เขียนชื่อบทความ แนะนำให้ใช้สีเข้มกว่าเฮด 2~ :-)

ตามรูปเลยจ้า :D
.head2 {  background:#000000; } - อันนี้จะเป็นสีบีจีตรงที่บอกว่าเลือกอ่านตอนต่างๆ - อัพเดท... จ้ะ! เลือกสีโทนอ่อนกว่าเฮดหนึ่งจะสวยกว่าเนอะ (ถ้าในตอนย่อย จะเป็นเฮดส่วนที่เขียนว่า ตอนที่ x : x , ผู้เข้าชมตอนนี้ : xx , โพส :x  , Rating : x /x vote(s))
*เฮด 1 และเฮด 2 จะใส่เป็นรูปก็ได้นะจ้ะ! ให้ใส่เป็นโค้ด .head1 { background:#000000 url(ใส่ url รูป); } url(ใส่ url รูป); แทนเนอะ! และขอแนะนำให้เป็นรูปแนว pattern มากกว่าด้วยจ้ะ!*

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

table.story {  border-color:#000000; }
span.desc_head {font-weight: bold;  color:#000000; } - ตรงนี้จะเป็นสีตัวอักษรที่หน้าบทความตัวเล็กๆ ที่เขียนว่าแนะนำเรื่องแบบย่อๆ แล้วก็ข้อมูลเบื้องต้นของเรื่องนี้ จ่ะ! (ซึ่งตอนแรกๆ ที่บีงงก็ไม่ได้แก้ ดังนั้นอาจจะดูแปร่งๆ ไปบ้างเนอะ =O=;)

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

และมันคือจุดไคลแมกซ์! (ตรงไหน =_=) มันคือโค้ดสกรอบาร์ ฮ่าๆ :D
*แน่นอนว่ามันจะเห็นเฉพาะในไออี ดังนั้นถ้าธีมไหนโค้ดกากอย่าแปลกใจ หนูใช้หมาไฟทำ =_=;*
BODY {
scrollbar-face-color:#000000;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-track-color:#000000;
scrollbar-arrow-color:#000000;
} - ตรงนี้อธิบายไม่เก่ง 5555 เลยเอารูปมาให้ดูแทนล่ะ xD
สีจัดมากจริงๆ ใครดูไม่ออกให้มันรู้ไป 5555 ทำสีตัดกันซะขนาดนี้ -.-

table {background:#000000;border:none;}
td {background:none;border:none} - ตรงนี้เป็นบีจีรอง ถ้าพูดให้ถูกก็คือเป็นพื้นสีส่วนที่เราเขียนเนื้อเรื่องนั่นแหล่ะ :D 
บรรทัดที่สองจะเปลี่ยนก็ได้ แต่จริงๆ ไม่ต้องไปสนใจมันหรอก 5555 (อ้าว)
*ถ้าต้องการให้บีจีตรงที่เราพิมมันใสๆ เพื่อให้เห็นบีจีหลัก เราก็แก้ table {background:#000000;border:none;} ให้เป็น table {background:#none;border:none;} แทนเลย~

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

ส่วนอันนี้เป็นส่วนลิ้งที่มันจะมีกรอบน่ารักๆ ลายปะๆ ตามธีมที่เห็นๆ กันมาล่ะ~
A:hover {
color:#000000;
-ตรงนี้คือสีลิ้งในกรอบจ้า พวกลิ้งอันนี้(ตอนที่ยังไม่ได้คลิกนะ) [ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ]
background:#000000;
-นี่คือสีพื้นของตรงลิ้งจ่ะ! (งงมั้ย 555) ถ้าอยากให้เป็นสีเหมือนพื้นหลังจะเขียนว่า none ก็ได้♥
BORDER-top:1px dashed #000000; -อันนี้เป็นรอยประๆ ตรงกรอบลิ้ง~ รอยประด้านบนอ่ะ 555
BORDER-bottom:1px dashed #000000;} -อันนี้เป็นรอยประๆ ตรงกรอบลิ้งเหมือนข้างบน แต่เป็นข้างล่าง 55
A:active {color:#000000;} -นี่คือสีลิ้งเวลาคลิก >< ไม่ต้องไปสนใจก็ได้ 5555
BODY   {
BORDER:15px solid #000000; -อันนี้คือสีกรอบในบทความอ่ะจ้ะ แบบเวลาเปิดในไออีมันจะเป็นกรอบรอบๆ หน้าบทความ นั่นแหล่ะจ้า 555
}



แล้วถ้าอยากได้กรอบแบบอื่น เปลี่ยนตรง dashed ให้เป็นอย่างอื่นก็ได้จ้า♥
ดูตามข้างล่างแล้วเปลี่ยนตามใจชอบเลย♥

       
 

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

td,th,div,body,li,ul,p {color: #000000;font-size:11px; /* ขนาด font*/
font-family: Tahoma; /*จะเปลี่ยน font แก้ที่นี่ได้เลย*/ -อันนี้เป็นสีตัวอักษรในหน้าบทความ. โค้ดสีคือเวลาที่เราเปลี่ยนสีข้อความในหน้าบทความเป็นสีอัตโนมัติ จะขึ้นเป็นสีที่เราตั้งจ้า ♥
*แนะนำว่าบทความที่บีจีรองสีพื้นเป็นสีอ่อนให้ใช้สีเข้มๆ ส่วนพื้นสีเข้มๆ ดำๆ ให้ใช้สีเหลืองๆ ชมพูๆ ขาวๆ ก็สวยนะ♥*
}
a:link {
color:#000000; -นี่สีลิ้งในหน้าบทความ ควรใช้สีใกล้เคียงกับตัวอักษรหน้าบทความ แต่ไม่ต้องเหมือนกันก็ได้♥
}
a:visited {
color:#000000; -อันนี้เป็นสีลิ้งเวลาที่คลิกไปแล้วจ้ะ ใช้สีหม่นๆ กว่าสีลิ้งก็จะดูดีเหมือนกันนะ :D
}

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

และสุดท้ายยยยย ตรงส่วนคอมเม้นต์♥

INPUT, SELECT, TEXTAREA {
background-color:#000000; -สีพื้นตรงช่องที่ให้ใส่ยูเซอร์เนมตรงกรอบคอมเม้นต์จ้่า ใช้สีเหมือนสีพื้นก็ได้จะได้ดูไม่แปลกแยกไป 5555
color:#000000; -อันนี้เป็นสีตัวอักษรในกรอบเวลาเรากรอกอะไรลงไป. ใช้สีตัดกับสีพื้นจะสวยสวดดด♥
font-family: tahoma; -ตรงนี้เป็นฟ้อนต์ จะแก้ก็ได้จ้า แต่บีไม่ค่อยแก้หรอก 5555 มันดูเบสิกดี ;)
border: dashed 1px #000000;
-ตรงนี้เป็นส่วนของเส้นกรอบ (อะเกน) ใช้สีเหมือนกรอบลิ้งก็ได้

นะ แต่มันจะไม่เหมือนกันตรงที่มันมีแค่สีเดียว ฮ่าๆ ;-)
*จะเปลี่ยนรูปแบบเส้นกรอบอีกก็ได้ตามสะดวกจ้า*
font-size:11px; -ตรงนี้เป็นไซส์ฟ้อนต์ในช่องที่เรากรอก ไม่ต้องแก้ก็ได้ พอดีแล้วจ้า ยกเว้นว่าจะแก้ฟ้อนมัน ก็ปรับให้พอดีด้วยละกันเนอะ :D
padding: 0;
}</style> -จบโค้ดธีม โอวเย♥

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

และที่พูดตอนต้นพาร์ท. คำว่า beyo ตรงหน้าโค้ดดิบแล้วก็ ng ตรงหลังโค้ด.
ถ้าไม่ได้ลบออกไป พอกดแทรกโค้ด HTML กลับมาเป็นหน้าเพจของเรา มันก็จะมีคำว่า beyo ng ขึ้นมานะ ฮ่่าาา
คือมันเป็นการทำโค้ดดิบจ้า :-D วิธีทำก็ง่ายๆ เลย☆
ถ้าก้อปมาแต่โค้ด แล้วเราจะเอาไปแจกเป็นโค้ดดิบ ก็แค่พิมคำที่เราอยากพิมไว้ที่หน้าโค้ดส่วนนึง
แล้วก็พิมไว้ที่หลังโค้ดอีกส่วนนึง. (จัดตัวอักษรให้ดีเพื่อความสวยงามด้วยนะ ♥)
พอกดแทรกโค้ด html กลับ ก็จะได้โค้ดสุกแล้วนั่นเอง

*แต่อย่าเอาวิธีนี้ไปแก้โค้ดคนอื่นมาแจกเป็นของตัวเองนะจ๊ะ แบบนั้นถือว่าเป็นการขโมยนะเออ*


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

จบหลักสูตรสอนธีม เฮฮฮฮฮ *ทรุด*
 พาร์ทนี้ใช้เวลาทำถึงสองวันเลยทีเดียว เหนื่อยมากกกก ฮ่าา
อธิบายซะละเอียดยิบขนาดนี้. ใครไม่เข้าใจตบดิ้น! *ล้อเล่นนะ ฮ่า xD*
ใครมีคำถามถามได้เลยจ้า :-D ยินดีตอบ ไม่ตบด้วยนะเออ 5555
มีแรงฟิตมาอัพตอนสอนทำธีม แต่พออัพเสร็จหมดแรงเลยเชียว ฮ่าา
ใครเอาไปสอนต่อช่วยใส่เครดิตแล้วก็แปะแบนเนอร์ด้วยนะจ้ะ!
ช่วยหน่อยนะเพราะว่าสอนทีแทบรากเลือดเลยล่ะ โฮฮ TOT
ขอบคุณทุกคอมเม้นต์ที่ทำให้หายเหนื่อยนะจ้ะ! ขอบคุณมากจริงๆ♥
แล้วใครที่เป็นนักอ่านเงาช่วยเม้นหน่อยเถอะจ้าถ้าเอาไปใช้ บีแค่อยากรู้ว่ามีคนใช้ธีมไปกี่คนแค่นั้นเอง :-)


THank