ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    THEME {ของ Toru}

    ลำดับตอนที่ #8 : ...•วิธีทำธีมเองด้วยโค้ด•...

    • อัปเดตล่าสุด 21 เม.ย. 54







     ในตอนแรกของบทความ 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





    หมด!!! สิ่งจำเป็นสำหรับทำธีมก็หมดไปแล้น ต่อไปก็นั่งปั่นทำธีมให้เส้นเลือดแตกไปโลด - -*

    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

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

    อีบุ๊ก ดูทั้งหมด

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

    ความคิดเห็น

    ×