วันนี้รู้สึกอารมณ์ดี ชิวๆ เปิดเข้ามาดูบล๊อกปุ๊บ ก็เจอน้องนัททักเข้ามาว่า "อยากเปลี่ยนสีขอบได้มั้ยคะ" พี่ NJservice ก็เลยตอบว่า "ได้คับ ง่ายมาก น้องนัทสามารถเปลี่ยนสีขอบของกล่องต่างๆ ให้เป็นสีที่ต้องการได้ภายในหลายวินาทีเลยครับ" เพียงแค่เรารู้ว่าสีไหนใช้รหัสสีอะไร ก็สามารถเปลี่ยนสีได้กว่า 24 ล้านสีแล้วนะครับ เว้นแต่ว่า คอมน้องใช้หน้าจอ 256 สี หรือหน้าจอเขียวดำอยู่ ทั้งชีวิตตูมีอยู่ 2 สี อันนี้พี่ก็คงจะช่วยอะไรไม่ได้นะคับ ส่วนรหัสสีก็สามารถหาได้จากโปรแกรมตกแต่งรูปพื้นฐานทั่วไป เช่น paint ที่มากับ window เมื่อก่อนจะใช้ชื่อว่า paintbrush หรือว่า โปรแกรม Adobe photoshop นะครับ ถ้าไม่มีโปรแกรมดังกล่าว ก็สามารถดูรหัสสีได้ที่ http://www.colourlovers.com นะคับ

          อันดับแรก เมื่อน้องอยู่ที่หน้าเขียนบล็อก ซึ่งต่อไปนี้พี่จะให้คำจำกัดความ (definition) ว่า "หลังบ้าน" ซึ่งเฉพาะเจ้าของบ้านเท่านั้นนะคับ ที่จะดูหลังบ้านของตัวเองได้ ก็ให้น้องกดไปที่ คำว่า Template นะคับ แล้วหน้าจอจะเปลี่ยนไปตามภาพประกอบด้านล่าง ซึ่งมีหน้าตาสำเร็จรูปให้เลือก(ปัจจุบันมีอยู่ 1 อัน) จากนั้นก็กดไปที่ Do-it-yourself นะคับ แปลเป็นภาษาไทยง่ายๆ ว่า "ทำเอง" นะครับ คิดเองทำเองครับ

            แล้วจะมีหน้า css ขึ้นมา ให้กด ปุ่ม Ctrl ค้าง แล้วกด f นะครับ จะเป็นการเปิดหน้าต่างค้นหาขึ้นมา แล้วเราก็พิมพ์คำว่า border ลงไปนะครับ แปลว่า "ขอบ" หรือ "กรอบ" แล้วกด next ไป 2 ที เพื่อให้หน้าจอเลื่อนส่วนโค้ดลงมาอยู่ตามภาพประกอบนะครับ ซึ่งจะมีโค้ดด้านล่างอยู่ ในส่วนของ about me box นะครับ

ดูที่ส่วนของ about_me_middle

#about_me_middle{
border-left:2px solid #8dc139; <-----เปลี่ยนเลขรหัสข้างหลังเครื่องหมาย #
border-right:2px solid #FF0505; <-----เปลี่ยนเลขรหัสข้างหลังเครื่องหมาย #
padding:5px 0 0 0;
}

จากตัวอย่าง พี่เปลี่ยนรหัสสีเป็นสีเขียวแก่ๆ นะครับ น้องจะเปลี่ยนเป็นสีอะไรก็ได้

       กด next ต่ออีก 2 ครั้ง จะเป็นส่วนเส้นขอบของ contact box นะครับ
         #contact_middle{
          border-left:2px solid #FF0505;   <----เปลี่ยนสีขอบซ้าย
          border-right:2px solid #FF0505; <----เปลี่ยนสีขอบขวา
          padding:5px 0 5px 10px;
          }

        กด next ต่ออีก 2 ครั้งเป็นส่วนเส้นขอบของ category box
          #category_middle{
           border-left:2px solid #FF0505;
           border-right:2px solid #FF0505;
           }

         กด next ต่ออีก 2 ครั้งเป็นส่วนเส้นขอบของ favourite friends box
           #friend_middle{
           border-left:2px solid #FF0505;
           border-right:2px solid #FF0505;
           padding:5px 0 5px 0;
           }

         กด next ต่ออีก 2 ครั้งเป็นส่วนเส้นขอบของ favourite links box
            #favorite_middle{
            border-left:2px solid #FF0505;
            border-right:2px solid #FF0505;
            word-wrap: break-word;
            padding:10px 0 5px 0;
            }

         กด next ต่ออีก 2 ครั้งเป็นส่วนเส้นขอบของ latest blog box
            #lastest_middle{
            border-left:2px solid #FF0505;
            border-right:2px solid #FF0505;
            border-bottom:2px solid #FF0505;
            word-wrap: break-word;
            padding:10px 0 5px 0;
            }

         กด next ต่ออีก 3 ครั้งเป็นส่วนเส้นขอบของ gallery box
            #gallery_middle{
            border-left:2px solid #FF0505;
            border-right:2px solid #FF0505;
            padding:5px 0 0 0;
            }

          กด next ต่ออีก 2 ครั้งเป็นส่วนเส้นขอบของ video box
            #video_middle{
            border-left:2px solid #FF0505;
            border-right:2px solid #FF0505;
            padding:5px 0 5px 0;
            }

      อาจจะดูเหมือนเยอะนะครับ แต่ก็เยอะจริงๆ นั่นแหละ มาถึงตอนนี้ พี่เริ่มกด next จนเหนื่อยแล้วเหมือนกัน

          ว่าแล้วก็กด next ต่ออีก 2 ครั้งเป็นส่วนเส้นขอบของ archive box นะครับ คือส่วน Past blog entries

              #archive_middle{
              border-left:2px solid #FF0505;            <----เปลี่ยนสีขอบซ้าย
              border-right:2px solid #FF0505;          <----เปลี่ยนสีขอบขวา
              border-bottom:2px solid #FF0505;       <----เปลี่ยนสีขอบล่างนะครับ
              padding:10px 0 0 0;
              }

          กด next ต่ออีก 3 ครั้งเป็นส่วนเส้นขอบของ vote box

              #vote_middle{
              border-left:2px solid #FF0505;
              border-right:2px solid #FF0505;
              }

           กด next ต่ออีก 3 ครั้งเป็นส่วนเส้นขอบของ เส้นผลโหวต นะครับ

  .border_result{
  width:275px;
  height:28px;
  border:1px solid red;    <---- ใส่เครื่องหมาย # ตามด้วยรหัสสีลงไปที่บรรทัดนี้แทนคำว่า red นะครับ 
  margin:0 0 8px 10px;
  }

กด next ต่ออีก 2 ครั้งเป็นส่วนเส้นขอบของ กล่องตรงกลางในหน้าแรกนะครับ

   /*  กรอบ blog */
  #center_data{
  border-left:2px solid #8dc139;
  border-right:2px solid #8dc139;
  border-bottom:2px solid #8dc139;
  padding:0 5px 5px 5px;
  width:95.75%;
  overflow:hidden;
  }

กด next ต่ออีก 3 ครั้งเป็นส่วนเส้นขอบของ กล่องเนื้อเรื่องในหน้าอ่านบล็อกนะครับ

  /*  กรอบ blog */
  #center_column_more #center_column_data #center_data{
  border-left:2px solid #8dc139;
  border-right:2px solid #8dc139;
  border-bottom:2px solid #8dc139;
  padding:0 5px 5px 5px;
  width:97.8%;
  }

กด next ต่ออีก 4 ครั้งเป็นส่วนเส้นขอบของ กล่อง comment ซึ่งแยกเป็นกรอบนอกและกรอบในนะครับ

   .comment_container{
   width:98%;
   border:2px solid #8dc139;    <---- เปลี่ยนสีที่บรรทัดนี้นะครับ
   margin:0 0 10px 0;
}
.comment_topic1{
 border:1px solid #8dc139;       <---- เปลี่ยนสีที่บรรทัดนี้นะครับ
 margin:10px 0 15px 0;
 width:98%;
}
.comment_topic2{
 border:1px solid #FF9797;       <---- เปลี่ยนสีที่บรรทัดนี้นะครับ
 margin:10px 0 15px 0;
 width:98%;
} 

       กด next ต่ออีก 4 ครั้งเป็นส่วนเส้นขอบของ แต่ละ gallery เวลากดไปดูรูปนะครับ

          div.album_div{
          margin:0 0 0 0;
          border:1px solid #8dc139;    <---- เปลี่ยนสีที่บรรทัดนี้นะครับ
          float: left;
          }

       ขอบวีดีโอ

          div.video_div{
          margin:0 0 0 0;
          border:1px solid #8dc139;      <---- เปลี่ยนสีที่บรรทัดนี้นะครับ
          float: left;
          }

      พิมพ์ search คำว่า " /*สีขอบรูป*/" เป็นส่วนสีกรอบด้านในนะครับ

          /*สีขอบรูป*/
         .border_img{
         border:1px solid #8dc139;     <------ เปลี่ยนสีที่บรรทัดนี้
         }

      พิมพ์ search คำว่า " #table_album_inner" เป็นส่วนสีกรอบรูปนะครับ

          #table_album_inner td{
          background:#FFFFFF;
          padding:3px;
          border:1px solid #8dc139;   <----- เปลี่ยนสีที่บรรทัดนี้
          }

      พิมพ์ search คำว่า " #table_video_inner" เป็นส่วนสีกรอบวีดีโอนะครับ

           #table_video_inner td{
           background:#FFFFFF;
           padding:3px;
           border:1px solid #FF0000;
           }

   การเปลี่ยนสีขอบเป็นเส้นประ
  ให้ search หาคำว่า solid แล้วเปลี่ยนเป็นคำว่า dashed ให้หมดนะครับ

   การเปลี่ยนสีขอบเป็นจุดประ
   ให้ search หาคำว่า solid แล้วเปลี่ยนเป็นคำว่า dotted ให้หมดนะครับ

   การเอาขอบออก
    ให้ลบบรรทัดที่ขึ้นต้นด้วย border ออกทั้งบรรทัดครับ