จุ๊บจูน

อ่ะแฮ่ม กลับมาตามสัญญานะคะ

หลังจากคราวที่แล้วจูนได้สอนวิธีใส่โค้ดลงในโปรไฟล์ Hi5 กันไปแล้ว และทิ้งท้ายไว้ว่า วันหลังจะรวบรวมโค้ดมาฝากกัน!! ก็ขอรวมเอาไว้ที่โพสนี้เลยแล้วกันนะคะ เพราะแต่ละโค้ดมันก็สั้นๆ

แต่ก่อนอื่น ขอย้ำอีกครั้งว่า อย่าลืมโค้ดเปิด และ ปิด ให้ถูกต้องนะคะ

เริ่มด้วย <style type=”text/css”>

และปิดโค้ดด้วย </style>

สิ่งที่ต้องเปลี่ยนเอง

1. โค้ดสี จะมาในรูปแบบ #000000 นะคะ เชิญเลือกได้ที่ - -> รวมโค้ดสีค่ะ

2. URL รูปภาพ คือ URL ของภาพที่เราต้องการค่ะ ถ้าเพื่อนๆมีภาพอยู่ในคอม ก็สามารถนำไปอัพโหลดไว้ที่เว็บฝากภาพต่างๆนะคะ แล้วจะได้ URL ของรูปมาค่ะ หรือถ้ารูปภาพที่อยากใช้ถูกแจกไว้ในบอร์ด เพื่อนๆก็คลิกขวาที่รูป ไปที่ properties และก๊อบ URL ตรง Location มาได้ค่ะ (*วิธีนี้ควรใช้กับรูปภาพที่ถูกแจกไว้เท่านั้นนะคะ อย่าไปขโมยรูปคนอื่นมา ทางที่ดีควรจะอัพรูปขึ้นเองค่ะ)

3. ลักษณะของกรอบจะมีหลายอย่างที่เราใส่ได้ค่ะ
*solid - เส้นตรงเรียบบบ
*dotted - เส้นประจุดๆ
*dashed - เส้นประขีดๆ
*double - เส้นคู่
*groove - กรอบสามมิติ
*ridge - กรอบแรเงา

4. ตัวที่เปลี่ยนแทนกันได้นะคะ
fixed, scroll
repeat, repeat-x, repeat-y, no-repeat

และเพื่อความสะดวก เชิญกดเลือกที่สารบัญด้านล่างได้เลย!
1. ใส่ Background (BG) ภาพพื้นหลัง
2. เส้นกั้นระหว่างคอมเม้นต์
3. รูป Friends เฟรน
4. เกี่ยวกับคอมเม้นต์
5. เกี่ยวกับ Five
6. ย้ายที่หรือลบส่วนต่างๆในโปรไฟล
7. รูปโปรไฟล์
8. เปลี่ยนรูปตรงจุดออนไลน
9. เอฟเฟกต์รูปต่างๆ
10. แถบสถิต

1. ใส่ Background (BG) ภาพพื้นหลัง
1.1 ใส่ bg ให้ทั้งหน้า
body {
background-image: url(URL ภาพ) ;
background-attachment:fixed;
background-repeat: no-repeat;
}

1.2 ใส่ bg ตรง อัลบั้ม
.album {
background: url(URL รูป) top left no-repeat;height: 100;width: 100;}
.album img {top: 8px;left: 8px;right: 10px;bottom: 10px;}

2. เส้นกั้นระหว่างคอมเม้นต์

2.1 ใส่สีเส้นกั้นระหว่างคอมเม้นต์
#comments .listitem-separator {background: โค้ดสี !important;}

2.2 ลบเส้นกั้นระหว่างคอมเม้นต์
.listitem-separator {visibility: hidden;}

2.3 ใส่รูปแทนเส้นกั้นระหว่างคอมเม้นต์
#comments .listitem-separator
{background:url( URL ภาพ ) top center no-repeat !important;
height:ความสูงของรูป px !important;}

3. รูป Friends เฟรน
3.1 ทำให้รูปเฟรนใหญ่ขึ้น
.friend-picture{height:100px !important;width:100px!important;
margin-left:0px;border: none 0px; }
.friend-picture img {height:100px !important;width:100px!important;margin-left: 7px}

4. เกี่ยวกับคอมเม้นต

4.1 ใส่รูปในกล่องคอมเม้นต์
textarea {background-image:url( URL ภาพ);
border-style: inset;
color: โค้ดสีของตัวอักษรเวลาที่พิม ;
height: ความสูงของ CommentBox หน่วยเป็น px;
width: ความกว้างไม่ควรเกิน 450 px; }

4.2 ใส่รูปแทนรูปเพื่อนที่มาคอมเม้นต์ (100*100 px)
.comment-picture { float: none }
.comment { text-align: center }
.comment-text { margin-left:20px !important; }
.comment-picture {
background:url( URL ภาพ ) no-repeat center center;width: 100px;}
.comment-picture img { Filter: Alpha(opacity=0) }
.comment-picture a:hover img { filter: none }
.comment-picture {height:100px !important;
width:100px;border:none}
.comment-picture a img {width:100px; height:100px;}

4.3 ใส่รูปข้างๆรูปคอมเม้นต์
.comment {background:url( URL ภาพ);
background-position:120px 0px;background-repeat:no-repeat}
.comment-picture {margin-right:140px;}

4.4 ใส่ปีกให้รูปเพื่อนที่มาคอมเม้นต์
.comment {background:url(URL รูปปีก);
background-position: 59px 50px;background-repeat:no-repeat;}
.comment-picture {MARGIN-TOP: 7.5em; LEFT: 16.6em;POSITION: relative;}
.comment-picture {height:100px!important; width:100px;border:none;}
.comment-picture a img {width:100px;height:100px;border:none;}

4.5 ใส่รูปปุ่มคอมเม้นต์ (120*20 px)
.commentEditor input {
BACKGROUND:
url( URL รูป );HEIGHT: 20px;WIDTH: 120px;
filter:none; color: #fff;overflow: hidden;text-indent: -9999px;border:0;
}

4.6 ขยายรูปเพื่อนที่มาคอมเม้นต์
.comment-picture {height:100px !important;
width:100px;}
.comment-picture a img {width:100px; height:100px;}

4.7 เปลี่ยนฟอนท์และสีในคอมเม้นต์
.section .comment-text {FONT-SIZE: ขนาดของฟ้อนท์px; FLOAT: none; MARGIN: 10px 0 0 15px; OVERFLOW: auto; WIDTH: 440px; COLOR: #โค๊ดสี; FONT-FAMILY: ชื่อ Font;
}

4.8 กล่องคอมเม้นต์ใส
textarea { background-color: transparent; }

4.9 ลบชื่อเพื่อนเวลามาเม้นต์
.comment div {visibility: hidden}
.comment-picture {visibility: visible !important}
.comment-text {visibility: visible !important}

4.10 ย้ายรูปเพื่อนที่มาคอมเม้นต์ไปด้านขวา
.comment-picture img { float: right; }
.comment-picture a img { float: right; }

4.11 ย้ายรูปเพื่อนที่มาคอมเม้นต์ไปอยู่ตรงกลาง
.comment-picture {MARGIN-TOP: 6em; LEFT: 16em;POSITION: relative;}

4.12 ตัวอักษรคอมเม้นต์อยู่ตรงกลาง
.section .comment-text {TEXT-ALIGN: center}

5. เกี่ยวกับ Five

5.1 ใส่กรอบให้ Five
#user-fives IMG {border-style: dashed; border:2px;border-color: โค้ดสี;}

6. ย้ายที่หรือลบส่วนต่างๆในโปรไฟล์

6.1 ลบส่วนที่ไม่ต้องการออก (เลือกเอาว่าจะลบอะไรนะคะ)

**อย่าลบส่วนที่ใส่โค้ดลงไปนะคะ เดี๋ยวจะแก้โค้ดไม่ได้เน้อ~**
#friends {DISPLAY: none}
#schools {display:none;}
#groups {display:none;}
#videos {display:none;}
#widgets {display:none;}
#background {display:none;}
#recent-updates {display:none;}
#photoAlbums {display:none;}

6.2 Hi5 สลับซ้ายขวา
table {direction:rtl;} table table table {direction:ltr;}

6.3 ย้ายโปรไฟล์มาด้านขวา
#user-details .content {
DIRECTION: rtl;
}

7. รูปโปรไฟล์
7.1 ใส่ปีกให้รูปโปรไฟล์
#user-picture img {height: 150px !important;
width: 120px;visibility: hidden;}
#about-left {background:url(URL ของปีก) no-repeat 50% 0%;}

7.2 ขยายรูปโปรไฟล์
#user-picture a:hover img {filter:Alpha(Opacity=90);}
#user-picture a img {width: 120px; height: 130px !important; }

7.3 ใส่กรอบให้รูปโปรไฟล์
#user-picture { border: 6px dashed ใส่โค้ดสี ;}

7.4 รูปโปรไฟล์อยู่ตรงกลาง
#about-left{position: relative;left: 30em;}#about-right{position: relative;left: -52em;}#about-center{position: relative;left: 32em;}

8. เปลี่ยนรูปตรงจุดออนไลน์
#online-now-icon {
BACKGROUND:
url( URL รูปภาพ );HEIGHT: ความสูงpx;WIDTH: ความกว้างpx;
filter:none;}

9. เอฟเฟกต์รูปต่างๆ

9.1 รูปขาวดำ พอชี้แล้วเป็นปกติ
a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;}

9.2 รูปสีเทา พอเม้าส์ชี้แล้วปกติ
a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:gray;}

9.3 รูปเบลอ พอชี้แล้วเป็นปกติ
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}

10. แถบสถิติ

10.1 เปลี่ยนสีแถบสถิติ
.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;}

เอาไว้แค่นี้ก่อนละกันนะคะ ถ้าอยากได้โค้ดอะไรลองขอมาได้ค่ะ เดี๋ยวจะพยายามหามาให้นะจ๊ะ ^^