Results

?เปลี่ยนสี Font ในส่วน Search Bar
หลังจากที่เราทำการเปลี่ยน ภาพพื้นหลังของแถบเมนูด้านบนสุดของ hi5 นะครับ จะเห็นได้ว่าตัวอักษรนั้นจะเป็นสีเทาทั้งหมด มองเห็นบ้างไม่เห็นบ้างกับ พื้นหลังบางอันนะครับ งั้นเรามาเปลี่ยนสีตัวอักษรตรงนี้กัน ไล่ใส่สีที่ต้องการด้วยโค๊ดชุดนี้ครับ
<style>
#top_header{color:#FFFFFF !important}
#top_header a.account_link { color: #FFFFFF; }
#top_header a.search_link { color: #FFFFFF; }
#top_header a.search_link_active { color: #FFFFFF; }
#top_header span { color: #FFFFFF !important; }
#p_nav_primary li#nav a { color: #FFFFFF; }
#p_nav_primary li#nav_select a { color: #FFFFFF; }
</style>
?
โดย [...]

ทำรูปคน Comment ให้เป็นภาพ Mosaic
เป็นโค๊ดที่ทำรูปภาพคนคอมเม้นให้เป็นภาพ Mosaic หรือภาพที่คล้ายโดนเซ็นเซอร์นะครับ พอเอาเมาส์ไปวางก็จะเห็นเป็นภาพปกต
<style>
.comment-picture img{filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=5);}.comment-picture a:hover img{filter:();} </style>ิ.comment-picture img{filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=5);}
.comment-picture a:hover img{filter:();
}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

ลบช่องว่างระหว่าง Search Bar กับ Profile Name
วันนี้เอา code ลบช่องว่างระหว่าง search bar กับ Profile Name นะครับ เผื่อใครจะเอาไป ทำ Head ใหญ่รวม Search Bar ไปด้วย
<style>
.box_profile_connections {display:none!important}
.profile-nav {margin: 0 0 10px 0; padding: 0px 0 0 0!important;}
</style>
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

ทำ HI5 ให้เป้นขาว-ดำ?
อันนี้เป็นการปรับทั้งหน้าให้เป็นขาว – ดำนะครับ
เหมาะสำหรับ สำหรับ คิดไม่ออก 555+
เอาเป็นว่าทำให้ขาว-ดำหมดเลยก็แล้วกัน
<style>
body{filter:gray}
</style>
เห็นผลเฉพาะ Internet Explorer นะครับ
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

สร้างรูป Profile ปลอมให้ใหญ่ดังใจนึก
ขยายรูปของคนที่มาคอมเม้นท์ให้ใหญ่
เป็นขนาด 100 x 100 px ครับ
.comment-picture {
height:100px!important;
width:100px;border:solid #000000 1px;
}
.comment-picture a img {width:100px;height:100px;
}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

ใส่ภาพพื้นให้กล่องกรอก Comment?
โค๊ดการใส่ภาพลงในกล่องกรอกคอมเม้นท์นะครับ
คือส่วนที่เพื่อนเรากรอกข้อความคอมเม้นท์
เตรียมภาพขนาดเท่าไรก็ได้ครับ
แต่ไม่ควรกำหนดความกว้างเกิน 450px นะครับ
textarea {background-image:url(URL ของภาพ);
overflow:auto;height:ความสูงpx;width:ความกว้างpx;}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

ใส่พื้นให้ Search Bar ด้านบน
เปลี่ยนรูปพื้นในส่วนของ Navigator Header หรือ Search Bar ด้านบนสุด นะครับ
เตรียมรูปขนาด 956 x 82 px ไว้นะครับ
#p_nav_header { background: url(URL ของภาพ)!important; background-repeat:no-repeat!important; border:none; width: 956px!important;
}
div#top_header { background:none;
}
#p_nav_primary { background: none; border:none;
}
#nav_select{background: none!important;
}
หรือถ้าจะซ่อนไปเลยก็
#p_nav_header {display:none}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

ขยายรูปคนคอมเม้นท์ให้ใหญ่ขึ้น
ขยายรูปของคนที่มาคอมเม้นท์ให้ใหญ่
เป็นขนาด 100 x 100 px ครับ
.comment-picture {height:100px!important;
width:100px;border:solid #000000 1px;}
.comment-picture a img {width:100px;height:100px;}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

เปลี่ยนหัวข้อต่างๆจากตัวหนังสือเป็นรูป
อันนี้เป็นการใส่ภาพ แทนที่ หัวข้อ ของส่วนต่างๆ
อย่าง Friend หรือ Five นะครับ
เราสามารถเปลี่ยนจากข้อความธรรมดา
เป็นรูปที่เราทำขึ้นมาได้ครับ ผมแยกมาให้ 9 ส่วนนะครับ ลองทำดู
เตรียมรูปที่จะทำหัวข้อไว้นะครับ จะเอาอันไหนก็ ลองเลือกๆ ดู

เปลี่ยนแถบสีแสดงสถิต
ตอนแรกว่าจะเขียนภาษาอังกฤษ แต่เห็นเด็กๆ มาถามบ่อยเอาเป็นภาษาไทยละกัน
การเปลี่ยนสีแถบ สถิติ นะครับโค๊ดแยกเป็นสามส่วนนะครับ

ซ่อนชื่อและเวลาคนคอมเม้นท์
โค๊ดแสดงเฉพาะรูปกับ ข้อความของคนคอมเม้นท์นะครับ
จะตัดส่วนชื่อและเวลาออกไป (ปุ่ม delete ก็หายไปด้วย)
.comment div {visibility: hidden}
.comment-picture {visibility: visible !important}
.comment-text {visibility: visible !important}
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

เพิ่มแถวอัลบั้มรูปเป็น 4 อัลบั้มต่อ 1 แถว?
โค๊ดเพิ่มจำนวนแถวของอัลบั้มจาก แถวละ 3 เป็น แถวละ 4 อัลบั้มนะครับ เราต้องเตรียมภาพพื้นหลังอัลบั้มใหม่นะครับ เป็นภาพขนาด 100×100
จากนั้นใส่ Code นี้ครับ
.albumWrapper {width: 100px !important;}
.album {background: url(ภาพพื้นหลังอัลบั้ม); height: 100px; width: 100px;}
.album img {width: 75px !important; height: 75px !important}
TIP : ภาพปกจะถูกย่อที่ขนาด 75px นะครับ ใครอยากให้ออกมาคนชัดก็ย่อรูปให้ได้ 75×75 px ทำเป็นปกนะครับ
โดย IaMMaI (พี่ใหม่) <? ไปเม้นให้พี่แกด้วยนะครับ
แวะมาเม้นให้ผมบ้างน่ะครับ iPalm

โง่อย่างผมทำไม่เป็นหรอกครับ?ต้องพี่ผมครับ?IaMMaI (พี่ใหม่) อย่าลืมไปเม้นให้พี่ผมน่ะครับผม
คราวนี้เรามาเจาะลึกการสร้างภาพพื้นต่อเนื่องกันตั้งแต่ head จนจบบน Profile โดยใช้รูปเดียวต่อเนื่องกันนะครับ
โดยที่วิธีการคือสร้างภาพขนาดกว้าง 956 x ความสูงที่ต้องการครับ แล้วตัดออกเป็น 4 ท่อน
โดยผมจะใช้ Skin ของผมเป็นหลักในการอธิบายนะครับ มือโปรสามารถดัดแปลงตามใจเลยครับ
ขั้นตอนการเตรียมรูป ก็มาดูว่าเราต้องเตรียมแบบไหนครับโดยรูปนั้น
จะมีความกว้าง 956px ทั้งหมดนะครับ
จะมีส่วนที่โดนกำหนดความสูงตายตัวอยู่ 3 ส่วนอธิบายแบบนี้คือ
1 ส่วน search จะสูงเท่ากับ 82 px
2 ส่วน Profile Name ส่วนนี้สามารถ ยืดได้ตามขนาดรูปที่ทำ
โดยจะมาสูตรคำนวน คือ ความสูงรูปทั้งหมด – (ส่วนที่ 1+3+4)
3.ส่วน Menu Profile สูง 35 px
4.ส่วนรายละเอียด Profile สูง 500 px
สมมุติว่าเราทำรูปออกมาได้ขนาด 956 x 1000 px
เราก็ทำการตัดก่อนครับ
1 ตัดส่วนที่ 1 วัดจากบนลงล่างไป 82 ครับ
2 ตัดส่วนที่ [...]

ก็อีกเช่นเคยน่ะครับ กับ Tips ต่างๆ ของ IaMMaI (พี่ใหม่) ผมนำมาให้ชมครับ
Change Your Hi5 Friend-picture size to 85 x 100 px
Just Add CSS Code Below
<style>
.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>
ที่สำคัญถึงแม้ผมจะยืมพี่แกมาก็แวะมาเม้นให้ผมบ้างน่ะครับ iPalm และ BlogiPalm

ของพี่เขาดีจริงๆ?ครับ?IaMMaI (พี่ใหม่)?อย่าลืมไปเม้นให้พี่แกนะครับ
การเปลี่ยนรูปการแสดงสถานะ ออนไลน์นะครับ
จากภาพ ไฟกลมๆ เป็นรูปอะไรก็ได้นะครับ
update!! ตรงนี้เราสามารถที่จะดันข้อความ Online Now ให้ตกลงมาเป็นบรรทัดใหม่ได้ เผื่อว่าบางคนไม่ชอบที่มันไปเกะกะไอคอนของเรา ทำได้โดยการเพิ่มโค๊ด display:block; ลงไปครับ จะได้โค๊ดเป็น
<style>
#online-now-icon {background:url(URL รูปไอคอน);
width:ความกว้างpx!important;
height:ความสูงpx!important;display:block}
</style>
ที่สำคัญถึงแม้ผมจะยืมพี่แกมาก็แวะมาเม้นให้ผมบ้างน่ะครับ iPalm และ BlogiPalm