
ก่อนเราจะรู้จัก 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 ของ รูป
มาเริ่มใส่โค้ดกันดีกว่านะเพื่อนๆๆ
-------------------- ส่วน ของ BG ---------------------
Code : ใส่รูป Background พื้นหลัง มี 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>
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>
ที่มา http://board.unlimitlife.com/index.php?topic=5187.0
{mosloadposition user26} | {mosloadposition user27} |
{mosloadposition user28} |