2 THEME 4 FUN,,สอนทำธีม{2}

ตอนที่ 20 : ❚ How To ❚ :: แก้โค้ดธีม 100 เปอร์

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 3,046
    จำนวนคนให้กำลังใจ : 3 ครั้ง
    20 พ.ย. 53


 
 
 



<style type="text/css">

.head1 { background:#โค้ดสี; }
.head2 {  background:#โค้ดสี; }
table.story {  border-color:#โค้ดสี; }
span.desc_head {font-weight: bold;  color:#โค้ดสี; }


table {background:#โค้ดสี;border:0px dashed #โค้ดสี}
td {background:#โค้ดสี;border:0px dashed #โค้ดสี}

A:hover {
color:#โค้ดสี;
background:# โค้ดสี;
border-top:#โค้ดสี 1px dashed;
border-bottom:#โค้ดสี 1px dashed;
}
<style type="text/css">
BODY{
      color: #โค้ดสี;
            font-family: Tahoma;
            font-size: 12px;
            }
a:link {text-decoration:none; color:#โค้ดสี; }
a:visited {text-decoration:none; color: #โค้ดสี; }
a:active {text-decoration:none; color: #โค้ดสี; }

td,th,div,body,li,ul,p {
    color: #โค้ดสี;
    font-size:12px;
    font-family: 'Tahoma';
  }</style>



<style type="text/css">
BODY {
scrollbar-face-color:#โค้ดสี;
scrollbar-shadow-color:#โค้ดสี;  
scrollbar-highlight-color:#โค้ดสี;
scrollbar-3dlight-color:#โค้ดสี ;
scrollbar-darkshadow-color:#โค้ดสี;
scrollbar-track-color:#โค้ดสี;
scrollbar-arrow-color:#โค้ดสี;
}

body {background:url(http://);
background-repeat:repeat;
background-position: center;
background-attachment:fixed}
BODY   {  
BORDER:15px inset  #โค้ดสี;
}</style>

<style type="text/css">
INPUT, SELECT, TEXTAREA {
background-color:#โค้ดสี;
color:#โค้ดสี;
font-family: tahoma;
font-size: 12px;
border: solid 1px #โค้ดสี;
padding: 0;
}</style>

1.ก๊อปโค้ดธีม ไปวางที่ Notepad หรือ ใครสะดวกก็ อยากให้ลองเล่นเว็บนี้ดูค่ะ จิ้มที่นี้ เพราะมันสามารถเซฟโค้ดที่เราแก้ไว้ได้ด้วย (เว็บนี้ขอขอบคุณพี่เทม อุณหภูมิสูงด้วยจ้าา)
2.ทำความเข้าใจกับแต่ละส่วนของโค้ดธีม ^w^/ ก่อนอื่นไปอ่านส่วนต่างๆของบทความก่อนได้ตอนที่ 1


                  TipZ ดูซักกะติ๊ด ก่อนเริ่มลงมือทำ

 #โค้ดสี  ; ใส่โค้ดสีได้หากไม่เข้าใจ (จิ้ม)
ตัวอักษรสี น้ำเงิน ; ลักษณะเส้น
ตัวอักษรสี ชมพู ; ความหนาของเส้น/ขนาดตัวอักษร
ตัวอักษรสี แดง  ; ขนาดตัวอักษร
none ; ไม่มีเส้น /ว่าง/ใส

ปล.ในการแก้โค้ดจะมีวิธีทำแทรกไว้อีกที




<style type="text/css">/*โค้ดเริ่ม*/

.head1 { background:#โค้ดสี; }    >>> สีพื้นหลังตรงแถบชื่อเรื่องค่ะ
.head2 {  background:#โค้ดสี; }   >>> ส่วนรองลงมาเป็นแถบแสดงชื่อตอน
table.story {  border-color:#โค้ดสี; }  >>> สีตัวอักษรตรงตางรางแสดงชื่อตอนต่างๆ
span.desc_head {font-weight: bold;  color:#โค้ดสี; }  >>> สีตัวอักษรตรงแนะนำเรื่องแบบย่อๆ

นี้คือส่วนบนของบทความค่ะ




table {background:#โค้ดสี;border:none}  >>> พื้นรองส่วนบน
td {background:#โค้ดสี;
border:0px dashed #โค้ด สี} >>> พื้นรองส่วนล่าง

ส่วนนี้คือ ส่วนตรงพื้นรองของบทความค่ะ มี 2 พื้นรองน่ออ
ตรงคำว่า background:#โค้ดสี; ให้ใส่โค้ดสีเข้าไปหรือถ้าอยากให้ใสก็ ใส่คำว่า none 
เข้าไป background:none;

ตรง
border:0px dashed #โค้ด สี} เป็นส่วนของเส้นตารางของบทความ หากไม่ต้องการให้มีก็ใส่คำว่า none
- สีชมพู ขนาดเส้น ส่วนมากใช้แค่ 1px
- รูปแบบเส้น มีหลายแบบ (เลือกใช้ได้)














A:hover {
color:#โค้ดสี; /*สีลิ้งขณะชี้ลิงค์อยู่*/
background:# โค้ดสี; /*พื้นหลังขณะชี้ลิ้งค์*/
border-top:#โค้ดสี 1px dashed;  /*เส้นบนลิ้งค์ขณะชี้ลิงค์*/
border-bottom:#โค้ดสี 1px dashed; /*เส้นใต้ลิ้งขณะชี้ลิ้งค์*/
}   >>> โค้ดชี้ลิ้ง


border-top:#โค้ดสี 1px dashed;  /*เส้นบนลิ้งค์ขณะชี้ลิงค์*/
border-bottom:#โค้ดสี 1px double
; /*เส้นใต้ลิ้งขณะชี้ลิ้งค์*/
สามารถเปลี่ยนรูปแบบของเส้นได้ค่ะ หากไม่ต้องการก็ใส่คำว่า none
ความหนาของเส้น นิยมใช้เพียง 1px ค่ะ











<style type="text/css">
BODY{
color: #โค้ดสี; /*สีลิ้งค์*/
 font-family: Tahoma;  /*แบบตัวอักษรลิ้งค์*/
font-size: 12px;  /*ขนาดตัวอักษรลิ้งค์*/

a:link {text-decoration:none; color:#โค้ดสี; }  >>>สีลิ้งค์
a:visited {text-decoration:none; color: #โค้ดสี; } >>>สีลิ้งค์ที่กดไปแล้ว
a:active {text-decoration:none; color: #โค้ดสี; } >>>สีลิ้งค์ขณะที่กดอยู่

td,th,div,body,li,ul,p {
    color: #โค้ดสี; /*สีตัวอักษรทั้งหน้า*/
    font-size:12px; /*ขนาดตัวอักษรทั้งหน้า*/
    font-family: 'Tahoma'; /*แบบตัวอักษรทั้งหน้า*/
  }</style>  >>> โค้ดเปลี่ยนตัวอักษรทั้งหน้า


จบส่วนที่ 2


<style type="text/css">   โค้ดสกอบาร์
BODY {
scrollbar-face-color:#โค้ดสี;
scrollbar-shadow-color:#โค้ดสี;  
scrollbar-highlight-color:#โค้ดสี;
scrollbar-3dlight-color:#โค้ดสี ;
scrollbar-darkshadow-color:#โค้ดสี;
scrollbar-track-color:#โค้ดสี;
scrollbar-arrow-color:#โค้ดสี;
}


ส่วนประกอบต่างๆ ในสกอร์บาร์

 

body {background:url(url ของพื้นหลัง/บีจี)
background-repeat:repeat;
background-position: center;
background-attachment:fixed}
BODY   {  
BORDER:15px inset  #โค้ดสี; >>> โค้ดกรอบบทความ
}</style>
- สามารถเปลี่ยนแบบของกรอบบทความได้ เปลี่ยนตรงที่ทำตัวอักษรสีน้ำเงินคำว่า inset หากไม่ต้องการให้ใส่คำว่า none
- เปลี่ยนความหนาของกรอบบทความตรงคำว่า 15px














<style type="text/css">    โค้ดกล่องคอมเม้น
INPUT, SELECT, TEXTAREA {
background-color:#โค้ดสี;  /*สีพื้นหลังกล่องคอมเม้น*/
color:#โค้ดสี; /*ตัวอักษรตรงกล่องคอมเม้น*/
font-family: tahoma; /*รูปแบบตัวอักษร*/
font-size: 12px;  /*ขนาดตัวอักษร*/
border: solid 1px #โค้ดสี; /*เส้นกรอบคอมเม้น*/
padding: 0;
}</style>





จากนั้นก็ทำการแปลงโค้ดให้เป็นโค้ดสุกซะ *0* คราวหน้าจะเอาการแก้โค้ดธีมแบบเดิม
มาให้ดูเผื่อยังไม่เข้าใจ เพราะมาร์ทำไว้ประมาณ 2 แบบมั้ง 555+
ไม่เข้าใจถามได้เลยจ้าา



ให้กำลังใจนักเขียน
นักเขียนได้รับกำลังใจแล้ว!
นักเขียนได้รับกำลังใจแล้ว 3 ครั้ง

นิยายที่ผู้อ่านนิยมอ่านต่อ

loading
กำลังโหลด...

1,009 ความคิดเห็น

  1. #1001 pimnapat6771 (จากตอนที่ 20)
    วันที่ 13 มีนาคม 2561 / 23:53
    ขอบคุณคร้าาา ละเอียดมั้กกมากกกกก ช่วยได้เยอะเลย
    #1,001
    0
  2. #967 gst-lupintata (จากตอนที่ 20)
    วันที่ 18 เมษายน 2559 / 14:50
    ขอบคุณมากเลยน้าค้าาาาาา 
    #967
    0
  3. #872 gingdam (จากตอนที่ 20)
    วันที่ 6 กรกฎาคม 2557 / 13:04
    เอาไปแปะไว้ตรงไหนค่ะ อ่านที่ไหนไม่เข้าใจเยย

    #872
    0
  4. #845 4st-number9 (จากตอนที่ 20)
    วันที่ 30 มีนาคม 2557 / 17:34
    ขอบใจมากจ้าา จะลองไปทำดูน้าาา ^^
    #845
    0
  5. #820 101243 (จากตอนที่ 20)
    วันที่ 21 มีนาคม 2557 / 17:25
    ขอบพระคุณอย่างสูงส่งค่ะ-/\-
    #820
    0
  6. #814 annarein (จากตอนที่ 20)
    วันที่ 1 กุมภาพันธ์ 2557 / 11:46
    ขอบคุณคะ ขอบคุณมากๆ เลยค่ะ <3
    #814
    0
  7. #803 protuza (จากตอนที่ 20)
    วันที่ 7 มกราคม 2557 / 20:01
    ขอบคุณค่ะ<3
    #803
    0
  8. #794 kan333 (จากตอนที่ 20)
    วันที่ 6 พฤศจิกายน 2556 / 19:36
    ขอบคุณมากเลยค่ะ
    #794
    0
  9. #789 kaosuay_wanwisa (จากตอนที่ 20)
    วันที่ 2 พฤศจิกายน 2556 / 15:01
    ขอบคุณค่ะ ><
    #789
    0
  10. #784 rainbow_so_sweet (จากตอนที่ 20)
    วันที่ 20 ตุลาคม 2556 / 09:15
    ขอบคุณค่า~
    #784
    0
  11. #780 04022543 (จากตอนที่ 20)
    วันที่ 16 ตุลาคม 2556 / 15:59
    ขอบคุณมากค่ะ ได้ความรู้มาเยอะมากเลย
    #780
    0
  12. #774 panpun009 (จากตอนที่ 20)
    วันที่ 5 ตุลาคม 2556 / 14:40
    ใจค้าบบ ><
    #774
    0
  13. #762 Calolis (จากตอนที่ 20)
    วันที่ 25 กันยายน 2556 / 14:28
    ขอบคุณมาก ๆ เลยคะนะช่วยได้เยอะเลยค่ะ 
    #762
    0
  14. #760 prawsaranya (จากตอนที่ 20)
    วันที่ 21 กันยายน 2556 / 21:03
    ขขขอบคุรมากกกกกกค่ะ
    #760
    0
  15. #758 envy-nun (จากตอนที่ 20)
    วันที่ 1 กันยายน 2556 / 09:51
    ขอบคุณมากๆ เลย เข้าใจเลยค่ะ สอนดีมากๆ ><
    #758
    0
  16. #724 pumpkiin (จากตอนที่ 20)
    วันที่ 1 พฤษภาคม 2556 / 16:12
    ขอบคุณค่ะ
    #724
    0
  17. #717 zipperbears (จากตอนที่ 20)
    วันที่ 21 เมษายน 2556 / 17:35
    ขอบคุณมากๆนะคะ
    #717
    0
  18. #715 memory-rw (จากตอนที่ 20)
    วันที่ 17 เมษายน 2556 / 10:46
    พอเอาไปทำธีมแล้วภาพพื้นหลังไม่ขึ้นอ่ะค่ะ มันกลายเป็นสีขาวๆ แต่นอกนั้นขึ้นหมด
    #715
    0
  19. #714 suwanna-1994 (จากตอนที่ 20)
    วันที่ 17 เมษายน 2556 / 10:27
    ขอบคุณนะคะ
    #714
    0
  20. #705 i3-butterfly (จากตอนที่ 20)
    วันที่ 24 มีนาคม 2556 / 20:11
    ขอบคุณค่ะ
    #705
    0
  21. #644 lemonade123 (จากตอนที่ 20)
    วันที่ 9 ตุลาคม 2555 / 17:35
    ขอบคุณค่ะ>0<
    #644
    0
  22. #614 amkatak (จากตอนที่ 20)
    วันที่ 7 กันยายน 2555 / 21:08
    ขอบคุณมากๆเลยคะ เป็นไกด์ไลน์ทางสว่างแท้ๆ 
    #614
    0
  23. #613 amkatak (จากตอนที่ 20)
    วันที่ 7 กันยายน 2555 / 21:08
    ขอบคุณมากๆเลยคะ เป็นไกด์ไลน์ทางสว่างแท้ๆ 
    #613
    0
  24. #612 amkatak (จากตอนที่ 20)
    วันที่ 7 กันยายน 2555 / 21:08
    ขอบคุณมากๆเลยคะ เป็นไกด์ไลน์ทางสว่างแท้ๆ 
    #612
    0