!!~ เ เ ต่ ง H i 5 กั ล น๊ะ จ๊ะ ~!!

ข้อมูลเบื้องต้น

ดี น๊ะ ค๊ะ ทุ ก ทุ ก ค น คั ย ที่ เ ล่ น H i 5 น๊ะ จ๊ะ เ ข้า มา สู บ เ ร ย ค๊ะ

1.

เนื้อเรื่อง

ห วั ด ดี ค๊ะ ทุ ก ทุ ก ค น มมา เ เ ต่ ง H i 5 กั ล เ ร ยน๊ะ ก๊ะ

ก่อนเราจะรู้จัก Code เราจะต้องทำการลบข้อมูลของเก่าออกซะก่อน

1.Remove Skin เดิมทิ้ง

2.แล้วใช้  Customize Profile
  ( หา ไม่ เจอ ก็ คลิ๊ก ที่ รูป นี้ ได้ เลย น๊ะ )

3.แล้วเราก็ใส่ Code ต่อไปนี้ลงในส่วน       Style: (Optional)   /   ( ใน ช่อง สี เหลี่ยม นะ )
Code สี ดู ใน Link นะ คับ


http://sukumal.brinkster.net/meaploy/angel/color.html




URL คือ File Link ของ รูป คับ

วิธีที่ จะ ได้ มัน มา คือ

- 1.  เอา รูป ที่ มี ใน เครื่อง โพส ไว้ ใน เวป  หรือ upload ลง เวป  หรือ ใน Hi5 เรา ก้ ได้

- 2.  คลิ๊ก ขวา ที่ รูป ที่ อยุ่ ใน เวป หรือ Hi5

- 3. เลือก Properties ( มัน จะ อยู่ ล่าง สุด)

- 4. ดู ที่ Address (URL) : ......ส่วน นี้ คือ URL ของ รูป
เริ่ม ใส่ Code กัน ได้ เลย



-------------------- ส่วน ของ BG ---------------------

Code : ใส่รูป Background พื้นหลัง  มี 4 แบบ 4 โค๊ต อ่ะ คับ ลอง ดู

แบบที่ 1

พื้นหลังล็อกติด
และไม่ทำรูปซ้ำ

<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:fixed;
background-repeat: no-repeat; }
</style>

ส่วน ใหญ๋ ใชั กับ รูปภาพ BG เต็ม จอ พอ ดี



แบบที่ 2

พื้นหลังล็อกติด
และทำรูปซ้ำ

<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:fixed;
background-repeat:repeat; } 
</style>

ส่วน ใหญ่ ใชั กับ รูปภาพ BG เล็ก ที่ ใช้ หลายๆ รูป จน เต็ม จอ



แบบที่ 3

พื้นหลังเลื่อนตามสกอบาร์
และทำรูปซ้ำ

<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:scoll;
background-repeat:repeat; }
</style>

ส่วน ใหญ๋ ใชั กับ รูปภาพ BG เต็ม จอ พอ ดี



แบบที่ 4

พื้นหลังเลื่อนตามสกอบาร์
และไม่ทำรูปซ้ำ

<style type="text/css">
body {
background-image: url(URLของรูป) ;
background-attachment:scoll;
background-repeat: no-repeat; }
</style>

ส่วน ใหญ่ ใชั กับ รูปภาพ BG เล็ก ที่ ใช้ หลายๆ รูป จน เต็ม จอ
Code : ลบเส้นขอบ บลอคต่างๆ

<style type="text/css">
#user-details { border: none; }
.section .content { border: none; }
</style>

Code : ใส่เส้นขอบให้บลอคต่างๆ

<style type="text/css">
#user-details {border:5px double :#ใส่โค๊ตสี}
.section .content {border:5px double #ใส่โค๊ตสี}
</style>

ส้ม = เปลี่ยน ได้ ตาม ใจ ชอบ นะ

double = เส้นคู่
dotted = เส้นจุดประๆ
solid = เส้นตรงเรียบกริ๊บ!

--------------------  Search Bar -------------------



Code : เปลี่ยนสีตัวอักษรช่วง Search Bar ทั้งหมด

<style type="text/css">
#top_header{color:#ใส่โค๊ตสี!important}
#top_header a.account_link { color: #ใส่โค๊ตสี; }
#top_header a.search_link { color: #ใส่โค๊ตสี; }
#top_header a.search_link_active { color: #ใส่โค๊ตสี; }
#top_header span { color: #ใส่โค๊ตสี !important; }
#p_nav_primary li#nav a { color: #ใส่โค๊ตสี; }
#p_nav_primary li#nav_select a { color: #ใส่โค๊ตสี; }
</style>

Code : ทำ Search Bar ให้ใส

<style type="text/css">
#p_nav_primary #nav_select {background-image:none;}
#p_nav_header {background:none; border:none; }
div#top_header {background:none; }
#p_nav_primary { background: none; border:none; }
</style>

Code : ใส่รูป แทบ log in

<style type="text/css">
#p_nav_primary #nav_select {background-image:none;}
#p_nav_header {background:url( ใส่ URL ของรูป ); border:none; }
div#top_header {background:none; }
#p_nav_primary { background:url(ใส่ URL ของ รูป Link  Home); border:none; }
</style>




Code : เอา Search Bar ทั้งหมดออก

<style type="text/css">
#p_nav_header{display:none}
</style

----------------------- รูป ต่างๆ ----------------------



Code : เปลี่ยนรูป Display ของเราให้ใหญ่ขึ้น

<style type="text/css">
#user-picture img {height: 180px !important;
width: 130px;visibility: hidden;}
#about-left {background:url( ใส่ URL ของรูปภาพ ) no-repeat 50% 0%;} }
 </style>




Code : เปลี่ยนรูป Display อยู่ตรงกลาง

<style type='text/css'>
#about-left{position: relative;left: 30em;}#about-right{position: relative;left: -52em;}#about-center{position: relative;left: 32em;}
</style>




Code : เปลี่ยนรูปช่วง Comment ให้ใหญ่ขึ้น

<style type="text/css">
.comment-picture {height:100px!important;
width:100px;border:solid #000000 1px;} .comment-picture a img {width:100px;height:100px;}
</style>




Code : เปลี่ยนรูป Top Friend ให้ใหญ่

<style type="text/css">
.friend-picture{height:100px !important;width:85px!important;
margin-left:0px;border:solid #000000 1px; } .friend-picture img {height:100px !important;width:100px!important;margin-left: 7px}
</style>



ส้ม = กรอบ รูป เปลี่ยน ได้ ตาม ใจ ชอบ นะ

double = เส้นคู่
dotted = เส้นจุดประๆ
solid = เส้นตรงเรียบกริ๊บ!

Code : เปลี่ยนรูปทุกรูปใน page มีหลายแบบลองไปใช้ดูคับ


แบบที่ 1 page เบลอๆ

<style type="text/css">
 a:link img {filter:blur(add = 0, direction = 225, strength = 10);}
a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}
</style>



แบบที่ 2 จะเปลี่ยนเป็นสีเทา

<style type="text/css">
 a:link img {filter:none;}
a:visited img {filter:none;} a:hover img {filter:gray;}
</style>



แบบที่ 3 ด้านซ้ายไปขวา จากขวาไปซ้าย

<style type="text/css">
a:hover img {filter:fliph;}
</style>



แบบที่ 4 อันนี้ต้องลองเอง

<style type="text/css">
a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}
</style>



แบบที่ 5 page ใส

<style type="text/css">
a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;}
</style>



แบบที่ 6 ขาวดำ

 <style type="text/css">
a:link img {filter:gray;} a:visited img {filter:gray;} a:hover img {filter:none;}
</style>



แบบที่ 7 เหมือน หิน
<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style>

---------------------- i con ------------------------



Code : ที่เปลี่ยนไอคอนใต้รูป Display ของเรา

<style type="text/css">
#user-links img {display: none}
#user-links a {list-style:url(ใส่ URL ของรูป ) inside;display:list-item}
</style>



Code : เปลี่ยนรูปไอคอน  Online Now

<style type="text/css">
#online-now-icon
{ background: url( ใส่URLของรูป );
height: ใส่ความสูง px;width: ใส่ความยาว px; _background: none; _filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src=3D&amp;#39;
  ใส่ URLของรูป ;)) ;height: ใส่ความสูง px;width: ใส่ความยาว px;}
#online-now-icon {background-image: url( ใส่URLของรูป );
width: ใส่ความยาว px; height: ใส่ความสูง px;margin: 5px 0px 0px 0px;}
</style>




--------------------- ส่วน ของ Comment  ------------------



Code : รูปในกล่องคอมเม้น

<style type="text/css">
textarea {background-image:url(  Url ของรูป );
border-style: inset;
color:  สีของตัวอักษรเวลาพิมในกล่อง ;
height: ความสูง px ;
width: ความยาว  px ; }
</style>





Code : รูปข้างบนกล่องคอมเม้นท์

<style type="text/css">
#comments {
 padding-top:ความสูงขอรูป px;
background-image:url( ใส่ URL ของรูป );
background-position:top center;
background-repeat:no-repeat}
</style>





Code : ทำกรอบให้คอมเม้ม


<style type="text/css"> 
.subsection .comment {background: url( ใส่ URL รูปภาพ );
border: inset 3px #ใส่โค๊ตสี ;
height: ความสูง px; overflow: auto;}
</style>


ส้ม = เส้นกรอบคอมเม้ม

double = เส้นคู่
dotted = เส้นจุดประๆ
solid = เส้นตรงเรียบกริ๊บ!

Code : รูป เพื่อนcomment อยู่ตรงกลาง

<style type='text/css'>
.comment-picture {MARGIN-TOP: 6em; LEFT: 16em;POSITION: relative;}
</style>




Code : สลับ  ย้ายคอมเม้นท์มาด้านซ้าย (รวมทั้งลิตเพื่อนและอัลบั้มภาพ)

<style type=text/css>
table {direction:rtl;} table table table {direction:ltr;}
</style>




Code : Hidden ข้อความใน Comment / เอา เมาส์ ชี้ Show Comment

<style type="text/css">
.subsection .comment {height:105px !important;}
.subsection .comment:hover {height:100% !important;overflow-y:auto;}
</style>




Code : ลบ ชื่อ กับ วัน เวลา ที่ เม้ม

<style type="text/css">
.comment div {visibility: hidden}
</style>




Code : ลบเส้นคั่นใน Comment

<style type="text/css">
.listitem-separator {visibility: hidden;}
</style>





Code : เปลี่ยนสีเส้นคั่น Comment

<style type="text/css">
#comments .listitem-separator {background: # ใส่โค๊ตสี !important;}
</style>





Code : ใส่รูป คั่นระหว่างคอมเม้น

<style type="text/css">
#comments .listitem-separator
{background:url( ใส่ URL ของรูป ) top center no-repeat !important;
height:ความสูง px !important;}
</style>



Code:  ย้าย(เฉพาะรูป)คอมเม้นท์

<style type="text/css">
.comment-picture img { float: right; }
.comment-picture a img { float: right; }
</style>



Code : ตัวหนังสือใน comment

<style type='text/css'>
.section .comment-text {
TEXT-ALIGN: left ;
line-height: 15pt;
color:  #ใส่โค๊ตสี;
filter: glow(color= #ใส่โค๊ตสี, strength=5)
}
</style>


ส้ม ตำแหน่ง ของ คอม เม้ม

left (ซ้าย)  / center (กลาง)  / right (ขวา)


----------------------- แถบ สถิติ ---------------------




Code : เปลี่ยนแถบสีแสดง สถิติ

<style type="text/css">
.vanity-bar div {background:url( url รุปภาพพื้นหลัง ) !important;}
.vanity-bar div div {background:url( url รูปภาพสถิติ ) !important;}
.vanity-bar div div img,.vanity-bar div img
{display:none;}
 </style>


url รูปภาพลองไปใช้ดู

http://image.dek-d.com/9/783888/11753865.gif

http://image.dek-d.com/9/783888/11753867.gif

http://image.dek-d.com/9/783888/11753869.gif

http://image.dek-d.com/9/783888/11753861.gif

http://image.dek-d.com/9/783888/11753859.gif

----------------------  header (กอบอันบน) ----------------



Code : เปลี่ยน header (กอบอันบน)


- header หลัก อันแรก

<style type="text/css">
#profile-name {background-image:url(Url ของรูป);
background-repeat:no-repeat;
color:#โค๊ตสี ตัวหนังสือ ;
height: ความสูง px;
width: 956 px;}
#profile-nav { background-color: #โค๊ตสี BG อัน ล่าง ; }
</style>




- header ใสมองทะลุได้ทุกอัน

<style type="text/css">
#profile-nav { background-color: transparent; }
.section h1 { background-color: transparent; border: none; }
.section h2 { background-color: transparent; border: none; }
</style>




- ใส่รูปภาพให้กับ header ส่วน อื่นๆ

<style type="text/css">
.section h1 { background-color: transparent; border: ขนาดของเส้น px แบบของเส้นขอบ #โค๊ตสีของเส้นรอบ;
background-image:url(Url รูปภาพ);
color: #สีตัวอักษรชื่อตาม header;
background-repeat:repeat;
height: แล้วแต่ px ;
width: แล้วแต่ px ;}
.section h2 { background-color: transparent; border:none;}
</style>

ส้ม = แบบของเส้นขอบ

double = เส้นคู่
dotted = เส้นจุดประๆ
solid = เส้นตรงเรียบกริ๊บ!



Code :ปิดเส้นขอบและพื้นหลัง

<style type="text/css">
#profile-nav,.section h1,.section h2
{ background-color: transparent; border: none; }
 </style>




-------------------------  Link ---------------------

Code : สำหรับชี้ลิ้งค์แล้วเปลี่ยน


- เป็นจุดสีชมพูวิบวับๆ

<style type="text/css">
a:hover{background: url('http://www.ayw102.th.gs/web-a/yw102/hi5/12.gif'); }
</style>



- ไฮไลท์แว๊บๆ - แดง

<style type="text/css">
a:hover{background: url('http://www.ayw102.th.gs/web-a/yw102/hi5/16.gif'); }
</style>



- ไฮไลท์แว๊บๆ - ดำ

<style type="text/css">
a:hover{background: url('http://www.ayw102.th.gs/web-a/yw102/hi5/17.gif '); }
</style>



- ไฟลุกขึ้นมา

<style type="text/css">
a:hover{background: url('http://www.ladylony.com/xox1.gif'); }
</style>

-------------------  Five  --------------------



Code : ใส่รูปขอ Five นะก๊ะ
<style type="text/css">
#user-fives .subsection div {width:45px !important}
#user-fives .subsection .listitem-separator {display:block !important}
#user-fives .subsection {background:url( URLของรูปภาพ );
background-position:225px;
background-repeat:no-repeat
</style>

------------------------  ส่วน ประ กอบ อื่นๆ  ------------------------



Code : ใส่กรอบให้หน้าเวป


มีทั้งหมด 4 แบบอ่ะ สามารถเปลี่ยนสีได้ตามใจชอบคับ

จะใส่ต่างกันทั้ง 4 ด้านก็ได้อ่ะคับ ^^


แบบที่ 1

<STYLE>     
html   
{  BORDER-RIGHT: #ใส่โค๊ตสี 12px ridge;
BORDER-TOP: #ใส่โค๊ตสี    12px   ridge;   
BORDER-LEFT: #ใส่โค๊ตสี    12px ridge;
BORDER-BOTTOM: #ใส่โค๊ตสี   12px ridge }   
</STYLE>



แบบที่ 2

<STYLE>     
html   
{  BORDER-RIGHT: #ใส่โค๊ตสี  12px solid;
BORDER-TOP: #ใส่โค๊ตสี    12px   solid;   
BORDER-LEFT: #ใส่โค๊ตสี    12px solid;
BORDER-BOTTOM: #ใส่โค๊ตสี  12px solid;}   
</STYLE>



แบบที่ 3

<STYLE>     
html   
{  BORDER-RIGHT: #ใส่โค๊ตสี  12px  dotted;
BORDER-TOP: #ใส่โค๊ตสี  12px   dotted;   
BORDER-LEFT: #ใส่โค๊ตสี    12px dotted;
BORDER-BOTTOM: #ใส่โค๊ตสี  12px dotted;}   
</STYLE>



แบบที่ 4

<STYLE>     
html   
{  BORDER-RIGHT: #ใส่โค๊ตสี  12px  double;
BORDER-TOP: #ใส่โค๊ตสี    12px   double;   
BORDER-LEFT: #ใส่โค๊ตสี    12px double;
BORDER-BOTTOM: #ใส่โค๊ตสี    12px double;}   
</STYLE>



Code : เปลี่ยนสี scrollbar ( แถบเลื่อน ทาง ขวา สุด ของ จอ )


<style type="text/css">
html {
scrollbar-arrow-color: #ใส่โค๊ตสี ;
scrollbar-face-color: #ใส่โค๊ตสี ;
scrollbar-highlight-color: #ใส่โค๊ตสี ;
scrollbar-3dlight-color: #ใส่โค๊ตสี ;
scrollbar-shadow-color: #ใส่โค๊ตสี ;
scrollbar-darkshadow-color: #ใส่โค๊ตสี ;
scrollbar-track-color: #ใส่โค๊ตสี ;
}
</style>




Code : เพิ่ม Top Friend อีก อัน (เอา ไป วาง ใน ช่อง Lifestyle หรือ
Interests ก็ได้น๊ะ คับ )


<style type="text/css">
<!--
.style11 {font-size: 12; }
-->
</style>
<table width="452">
  <tr>
    <th widt" scope="col"><a href=" ลิ้งคนที่1 " target="_blank">ชื่อคนที่1[/url]

        <a href="ลิ้งคนที่1" target="_blank"><img src="รูปคนที่1" width="80" height="100" border="0">[/url]

    <a href=" ลิ้งคนที่1 " target="_blank">[/url]</p>    </th>

    <th width="113" scope="col"><a href=" ลิ้งคนที่2 "target="_blank"> ชื่อคนที่2 [/url]

      <a href=" ลิ้งคนที่2 " target="_blank"><img src=" รูปคนที่2 " width="80" height="100" border="0">[/url]</th>

    <th width="113" scope="col"><span class="style11"><a href=" ลิ้งคนที่3 " target="_blank">ชื่อคนที่3[/url]
    <a href=" ลิ้งคนที่3 " target="_blank"><img src=" รูปคนที่3 " width="80" height="100" border="0">[/url]

    </span></th>
   
    <th width="113" scope="col"><span class="style11"><a href=" ลิ้งคนที่4 " target="_blank">ชื่อคน4[/url]

     <a href=" ลิ้งคนที่4 " target="_blank"><img src=" รูปคนที่4 " width="80" height="100" border="0">[/url]</span></th>
     
     <th width="113" scope="col"><span class="style11"><a href=" ลิ้งคนที่5 " target="_blank">ชื่อคน5[/url]

      <a href=" ลิ้งคนที่5 " target="_blank"><img src=" รูปคนที่5 " width="80" height="100" border="0">[/url]</span></th>
  </tr>
  <tr>
</tr>