สำหรับใครที่เพิ่งสมัคร และยังไม่ได้เริ่มต้น ตกแต่ง Hi5 เลย
คุล สามารถนำโค้ด ไปใช้ได้เลย โดยวางในบล้อก HTML/CSS
ของหัวข้อ Customize Profile
แต่สำหรับใครที่แต่ง Hi5 ไปแล้ว ผมแนะนำให้ลบโค้ดเก่าออกก่อน
เพราะโค้ดของ skin เดิม หรือโค้ดเก่าๆ จะซ้ำซ้อนกับโค้ดใหม่ ซึ่งอาจทำให้
การแสดงผลผิดเพี้ยนไป การลบ ให้เลือกที่ Remove skin ใต้รูปดิสเพลย์
จากนั้นถึงจะเลือก Customize Profile เพื่อไปลบโค้ดเก่าใน HTML บล้อก
ดังรูปเลยค้าบบบ . . .


รูปแบบของการวางโค้ด
โค้ดทุกตัวจะต้องอยู่ภายใน Style
ซึ่งสามารถรวมโค้ดทั้งหมดไว้ภายใน <style> เดียวกันได้
<style type="text/css">
...................
...................
...................
</style>
รูปแบบของโค้ด
Selector { Property : Value }
selector คือ ส่วนของ tag ,element หรือส่วนหนึ่งๆ ในเว็บเพจ
property คือ คุณสมบัติที่จะแสดง
Value คือ ค่าของคุณสมบัตินั้น
เราสามารถกำหนดได้หลายคุณสมบัติ ภายใน Selector เดียว
โดยใช้เครื่องหมาย ; คั้นระหว่าง คุณสมบัติ
ม า เ ริ่ ม เ เ ต่ ง Hi5 กั น เ ล ย
Code ใส่พื้นหลัง + ลบเส้นขอบ
การกำหนดค่า
background-attachment :
fixed ล็อกพื้นหลังอยู่กับที่
scroll พื้นหลังเลื่อนตามเนื้อหา
background-repeat :
repeat ทำซ้ำพื้นหลัง
no-repeat ไม่ทำซ้ำ
<style type="text/css"> body { background-image: url( *ใส่ url ของรูป ) ; background-attachment: fixed ; background-repeat: repeat ;} #user-details { border: none; } .section .content { border: none; } </style>
Code ใส่รูปในกล่อง comment
<style type="text/css"> .commentEditor textarea {background-image:url( *ใส่ URL ของรูปนะคับ ); border-style: inset; color: *สีของตัวอักษรเวลาที่พิม ; height: *ความสูงของ CommentBox หน่วยเป็น px ; width: *ความกว้างไม่ควรเกิน 450px ; } </style>
Code ใส่ cursor (รูปเม้าส์)
http://www.myspacecursor.net/arrow-cursors.html
http://www.dressupmyspace.com/cuflowers.shtml
http://www.htmate2.com/cursors/index.php
http://www.totallyfreecursors.com/index.cfm
http://www.cursorpedia.com/
copy โค้ดข้างล่างนี้ ไปวางในบล้อก HTML/CSS
แล้วเปลี่ยน URL ของเม้าส์ด้วยนะคับ url หาจากเวบตัวอย่างที่ให้ไว้
(ก้อบมาเฉพาะ url นะคับ นามสกุล .cur หรือ .ani แล้วไปใส่ในโค้ด)
<style type="text/css"> body {cursor: url( *ใส่ url ของเม้าส์ จะแสดงเมื่อชี้เม้าส์บนหน้า page );} a {cursor: url( *ใส่ url ของเม้าส์ จะแสดงเมื่อชี้เม้าส์บน link );} </style>
Code ทำแถบ Header ให้ใสทุก box
<style type="text/css"> #profile-name { background: none; } #profile-nav,.section h1,.section h2 { background-color: transparent; border: none; } </style>
Code ทำให้แถบ Log Out ให้หายไป
การทำให้มันหายไป อาจจะทำให้คุล Log out ลำบากนิสนึ่ง
แต่ถ้าคุลอยากจะเอามันออก เพราะเห็นว่ามันรก Hi5
ก็เพียงแต่ก้อบโค้ด ไปวางได้เลยคับ
<style type="text/css"> #new_header {display:none} </style>
ส่วนโค้ดที่ทำลิ้งกลับไปยังหน้า Home คือ
<a href="http://www.hi5.com/friend/displayHomePage.do" mce_href="http://www.hi5.com/friend/displayHomePage.do" >Go back to home</a>
ก้อบไว้วางใน Lifestyle ,Interest ได้เลยคับ
Code ลบเส้นคั่นระหว่าง Comment
<style type="text/css"> .listitem-separator {visibility: hidden;} </style>
Code เปลี่ยนสีเส้นคั่น Comment
<style type="text/css"> #comments .listitem-separator {background: ใส่รหัสสี !important;} </style>
Code ขยายรูป display Comment
<style type="text/css"> .comment-picture {height:100px !important; width:100px;} .comment-picture a img {width:100px; height:100px;} </style>

Edit Profile

ความสนใจเฉพาะ

การตกแต่ง Content ที่เป็นข้อมูลส่วนตัว
ในส่วนนี้จะมี Selector เป็น
#user-details .content { }
ซึ่งประกอบไปด้วย 3 ส่วนย่อย คือ
#about-left { }
#about-center { }
#about-right { }
เรียงตามลำดับจากซ้ายไปขวา
คุลสามารถใส่คุณสมบัติ ต่างๆ ลงไปได้ ทั้ง 4 selector เช่น
การสลับด้าน direction: RtL; หรือ LtR
พื้นหลัง background: url( );
เส้นกรอบ border: outset 10px red;
โค้ดที่ผมเอามาให้เป็นตัวอย่างนี้ จะเป็นการจัดรูปแบบเหมือนของผมนะคับ
<style type="text/css"> #user-details .content { direction: RtL;} #about-left { direction: LtR; } #about-center{ direction: LtR; } #about-right { direction: LtR; } #about-left, #about-center, #about-right { border: outset #1c1c1c 10px; } </style>
#about-left, #about-center, #about-right จะเท่ากับ .about-column
จะสามารถใช้แทนกันได้นะคับ เพื่อให้โค้ดสั้นลง
Code ใส่ Footer ให้ Hi5
<style type="text/css"> #footer { background: url( *ใส่ URL รูปภาพ ) no-repeat center center; border: none; display: block; height: 50px; } </style>
Code ใส่รูป Header ให้ Hi5
<style type="text/css"> #profile-name {background-image:url( *ใส่ URL รูปภาพ ); width:956px; height: *ความสูงของรูปภาพ px } </style>
Code ตกแต่งลิ้งใต้ Header
สามารถตกแต่งได้ 3 ส่วนหลักๆ

ได้แก่
#profile-nav คือ ส่วนที่เป็นแถบ
คุณสมบัติที่สำคัญ
text-align: center; จัดกึ่งกลางตัวอักษร
background-image: url(ภาพพื้นหลัง) ;
background-color: สีของพื้นหลัง;
border: เส้นกรอบ ขนาดเส้น สีของเส้น;
height: ความสูงของแถบ เป็น px;
#profile-nav a คือ ส่วนที่เป็นตัวอักษร ลิ้ง
คุณสมบัติที่สำคัญ
font-family: รูปแบบตัวอักษร;
font-size: ขนาดตัวอักษร เป็น px;
color: สีตัวอักษร;
padding: ระยะห่างระหว่างลิ้ง;
#profile-nav a:hover คือ ส่วนที่เป็นตัวอักษรขณะชี้ที่ลิ้ง
คุณสมบัติ ที่สำคัญ
background-image: url(ภาพพื้นหลังขณะชี้ที่ลิ้ง) ;
text-decoration: none; (ไม่มีเส้นใต้)
color: สีตัวอักษรขณะที่ชี้ลิ้ง;
<style type="text/css"> #profile-nav { background-color: *สีพื้นหลัง; } #profile-nav a { color: *สีตัวอักษร; padding: 1.0em; font-size: 12px; } #profile-nav a:hover { color: *สีตัวอักษรขณะชี้ลิ้ง; text-decoration: none; } </style>
Code ใส่กรอบให้หน้า Hi5
แบบของเส้นขอบ
dotted
dashed
solid
double
groove
ridge
inset
outset
<style type="text/css"> html { border-style: ใส่แบบของเส้นกรอบ; border-width: ใส่ความหนาของกรอบpx; border-color: ใส่สีของกรอบ; } </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 สี

Code ลิ้งรูปสลับด้าน
จะแสดงเมื่อใช้ mouse ชี้ไปยังลิ้งรูปภาพ
ซึ่งสามารถสลับได้ 2 แบบ คือ
Filter: FlipH คือ สลับในแนวนอน
Filter: FlipV คือ สลับในแนวตั้ง
<style type="text/css"> a:hover img {Filter:FlipH} </style>
Code เปลี่ยนรูปแถบสถิติ
Stat Bar
รูปที่ใช้จะมีขนาด กว้าง162px -- สูง12px
ตัวอย่างรูปที่ผมทำมาให้ ถ้าใครจะใช้
ก็คลิ้กขวาที่รูป เลือก Properties แล้วก้อบ URL ไปใช้ได้เลยนะคับ
ส่วนใครที่อยากได้สีอื่นๆ นอกเหนือจากนี้ ก็ไปทำเอาเองนะคับป๋ม











<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>

เพลงโปรด

Code ทำกรอบ box, bg ให้ Comment
<style type="text/css"> .subsection .comment {background: url( *ใส่ URL รูปภาพ ); border: inset 3px #c00000; height: ความสูงของBoxเป็น px; overflow: auto;} </style>
Code ใส่ Effect ให้กับลิ้งรูปภาพ
http://www.crazyprofile.com/rollover_effects/rollovereffects.asp
สามารถกำหนดได้ 2 ลักษณะนะคับ
1.กำหนดลักษณะของภาพเริ่มต้น จะใช้
a img {...............}
2.กำหนดลักษณะของภาพหลังชี้ Mouse
a:hover img {...............}
สำหรับการกำหนดลักษณะภาพให้ปกติ คือ Filter: none
Filter
Filter: Gray
Filter: Xray
Filter: Invert
Filter: Alpha(opacity=50)
Filter: Blur(Add = 0, Direction = 225, Strength = 10)
Filter: Wave(Add=0, Freq=10, LightStrength=20, Phase=220, Strength=10)
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)
<style type="text/css"> a:hover img { เลือกใส่เองเลยนะคับ } </style>
Code ชี้ลิ้งรูปแล้วมีภาพกระพริบ
ภาพกระพริบในที่นี้ก็คือ ภาพที่มีนามสกุลเป็น .gif นั้นเอง
ซึ่งหามาจากที่ไหนก็ได้ บนอินเทอร์เน็ต หรืออัปโหลดไว้บนเว็บที่ให้บริการฝากไฟล์
หาจากลิ้งนี้ก้อได้คับ
http://www.poqbum.com/animated_hover/
<style type="text/css"> a:hover img {Filter:alpha(finishopacity=0, style=2)} a:hover {background-image:url( *ใส่ URL ภาพกระพริบ );} </style>

ภาพยนตร์เรื่องโปรด

Code ลบ Common Friends
<style type="text/css"> #common-friends {display:none} </style>
การตกแต่ง แถบ Header บนสุด

สำหรับการตกแต่ง และ selector ที่เกี่ยว จะตามมา วันนี้ป๋มง่วงแล้วฮับ

คำคมที่ชื่นชอบ

Code ตกแต่งอื่นๆ
Code ข้อความต้อนรับ-บอกลา
Code อักษรเลื่อนบน Title bar
Code อักษรเลื่อนที่ status bar
Code ลบชื่อโปรไฟล์ และจำนวนคนเข้าชม
Code ใส่รูปภาพคั่นระหว่าง comment
Code สร้าง Top friends เสมือน
Code ตกแต่ง Top_Header (แถบขาวๆ บนสุดของ Hi5)
Code จัดกลางรูป display ใน content ส่วนตัว
Code ใส่ตัวอักษรเลื่อนใน HomeTown
Code ทำลิ้งตัวอักษร รูปภาพ Home ,GiveFives
Code ทำปุ่มกด comment
Code ทำกรอบรูปดิสเพลย์ทุกที่
Code ใส่ Effect ให้กับตัวอักษร
Code ทำ Frame อัลบั้มรูป
Code ขยายรูป Top friends
Code ใส่รูปหน้า link ใต้รูปดิสเพล์ Profile
Selector ของ Hi5
Selector ของ Hi5 (2)

หาโค้ดเพิ่มเติมได้ที่ไฮไฟว์คุลนุ่น และคุลหญิง
http://saabsaan.hi5.com/
http://nu-zu-za-na-rak.hi5.com/

สมุดบันทึก

ดูทั้ง 19 รายการ เพิ่มความเห็น

Comment box code : 26 ก.พ. 2551

Code ตกแต่งสำหรับ Comment Box
selector ที่เกี่ยวข้อง
#comments  บล้อกทั้งหมดของคอมเม้น
#comments h1  แถบหัวข้อที่เขียนว่า Comments
#comments h2 a  ลิ้งของคำว่า View All Entries
#comments h3  เป็นส่วนที่มี กล่องพิมพ์ และปุ่มกดอยู่
#comments h3 a  ลิ้งที่สำหรับ ใช้กดคอมเม้นแบบ All user จะเห็นในกรณีที่เรา เข้าดูโปรไฟล์คนอื่น โดยที่ยังไม่ได้ล้อกอินเข้าระบบ
.commentEditor textarea  กล่องที่ใช้พิมพ์
.commentEditor input  ปุ่มกดคอมเม้น, เพิ่มความเห็น, Add comment 
.comment  กล่องคอมเม้นแต่ละกล่อง ที่เพื่อนๆ ได้คอมเม้นไว้แล้ว จะประกอบด้วย
.comment-picture  ส่วนของรุป แต่ไม่ใช่ ตัวรูป
.comment-picture img  รูปดิสเพลย์เพื่อน
หากใช้ในกรณีทำ Filter ให้กับรูป จะใช้
.comment-picture a img  {Filter:----;}
.comment-picture a:hover img  {Filter:ขณะชี้ที่รูป;}
.comment-text  ตัวอักษรที่คอมเม้น
#comments .listitem-separator  เส้นคั่นระหว่างคอมเม้น
--------------------------------------------
Code จัดกลางรูปดิสเพลย์

.comment-picture { float: none; text-align: center }
Code จัดกลางตัวอักษรที่เพื่อนคอมเม้น
.comment-text { text-align: center }
ทำตัวอักษรห่างๆ กัน

.comment-text { letter-spacing: 3px }
Code จัดกลางทั้งหมด

.comment-picture { float: none }
.comment { text-align: center }
Code ใส่ Effect ให้กับตัวอักษรคอมเม้น

.comment-text  { font-size: ขนาดตัวอักษร; font-family: รูปแบบตัวอักษร; color: สีของตัวอักษร; filter:Glow(color=สีของเงาตัวอักษร, strength=ความเข้มข้นสีเงา); height: ขอบเขตความสูง; width: ขอบเขตความกว้าง; padding: 15px; }
Code ใส่กรอบ, พื้นหลัง ของตัวอักษรคอมเม้น

ใส่กรอบ
.comment-text { border: solid 2px #000000; padding: 10px }
ใส่เป็นรูป
.comment-text { background:url(---); }
ใส่เป็นสี
.comment-text { background-color: #FFFFFF; }
Code ใส่พื้นหลังให้แต่ละบล้อก

.comment { background:url(ใส่ URL รูปภาพ); }
Fixed ค่ากล่อง แล้วมี scrollBar
.comment { height: ความสูงpx; overflow: auto; }
ใส่สี scrollBar (แบบสั้นๆ)
.comment { scrollbar-arrow-color: black;
scrollbar-face-color: white;
scrollbar-track-color: white }
Code ใส่เส้นกรอบให้แต่ละบล้อก

.comment { border: solid 2px #000000; }
Code ใส่เส้นกรอบให้บล้อกใหญ่ #comments

ใส่กรอบ
#comments { border: solid 2px #000000; }
ใส่เป็นรูป
#comments { background:url(---); }
ใส่เป็นสี
#comments { background-color: #FFFFFF; }
===========================
สำหรับการใส่ปีกไก่ให้รูป  555+
ก้อเพียงกำหนดรูปดิสเพลย์ให้มาอยู่ตรงกลาง
แล้วนำรูปภาพที่เป็นปีกมาใส่ใน .comment
แต่เพื่อความสวยงาย จะจัดกลางทั้งหมดนะคับ
<style type="text/css">
.comment-picture { float: none }
.comment { text-align: center; 
background:url(--รูปปีกไก่--) transparent no-repeat top center; }
</style>
---------------------------------------------------------