Your Cool Skin With 1 Photo

โง่อย่างผมทำไม่เป็นหรอกครับ ต้องพี่ผมครับ 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 ตัดส่วนที่ [...]

Big Friend Picture

ก็อีกเช่นเคยน่ะครับ กับ 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

Change Online Icon

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

Text Beside Comment Picture

 กลับมาอีกแล้ว ครับกับ Tips hi5 ของพี่ผม IaMMaI (พี่ใหม่)  เอาแต่ของพี่เขามาผมชักอายแล้วครับ ไม่มีความคิดของผมเลย เห้อ
อันดับแรกนะครับ เตรียมพร้อมก่อนนะครับ โดยโค๊ดนี้คือการใส่ Background ลงไปในกล่องคอมเม้นท์ ทำให้คนที่มีโค๊ด ใส่ backgroud อยุ่แล้วมีผลกระทบนะครับ เราจะมาแยกเป็นกรณีพิเศษ
ผมใช้รูปเขียนข้อความขนาด 100 x 100 นะครับ
1. เรามาดูกรณีแรกนะครับ กรณี ยังไม่ได้ทำภาพคอมเม้นท์ให้ใหญ่เป็น 100px นะครับ ใช้โค๊ดนี้
.comment {background:url(รูปที่จะวางไว้ข้างรูปคอมเม้นท์);
background-position:120px 0px;background-repeat:no-repeat}
.comment-picture {height:100px !important;width:100px;margin-right:140px;}
.comment-picture a img {width:100px;height:100px;}

Hide/show comment

อย่ามาด่ามาว่ากันครับ ที่ผมเอาของคนอื่นมา  ผมเขินน่ะ เอาเวลาด่าว่าผมไปเม้นขอบคุณให้พี่ผมดีกว่า IaMMaI (พี่ใหม่)
Make your very cool profile with CSS
Hide/show comment CSS code
just add CSS below
<style>
.subsection .comment {height:105px !important;}
.subsection .comment:hover {height:100% !important;overflow-y:auto;}
</style>
ps. height:105 for 100px comment-picture
for normal comment-picture 50px use height:50px
ที่สำคัญถึงแม้ผมจะยืมพี่แกมาก็แวะมาเม้นให้ผมบ้างน่ะครับ iPalm และ BlogiPalm

Hide/Show Friends Picture

อีกแล้วอีกแล้ว มาอีกแล้ว ก็อบมาให้ส่องกันอีกแล้วครับ  กับความคิดดีๆ ของพี่ผม IaMMaI (พี่ใหม่)
โค๊ดซ่อน-แสดงรูปเพื่อนนะครับ โค๊ดนี้จะรวมโค๊ดขยายขนาดรูปเพื่อนไปด้วยนะครับ ใครทำไปแล้วเอาอันเก่าออกก่อนนะครับ
.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: 8px}
.friend-picture div {background:url(ภาพขนาด 85 ถึง 100) 8px;padding:200px;}
.friend-picture div:hover {padding:0px;}
สามารถขยับส่วน 8px เพื่อความสมดุลของภาพที่เอามาแทนนะครับ
ปล.โค๊ดนี้รวมการขยายภาพเพื่อนไว้ด้วยนะครับ ใครที่ขยายภาพไว้ ให้ลบโค๊ดขยายภาพเดิมออกก่อนนะครับ
ที่สำคัญถึงแม้ผมจะยืมพี่แกมาก็แวะมาเม้นให้ผมบ้างน่ะครับ iPalm และ BlogiPalm

Begging Five

Five ๆๆๆๆ โค้ดมาให้ครับ ก็อีกเช่นเคย ต้องขอบคุณพี่ผมอีกแล้ว IaMMaI (พี่ใหม่) แวะไปเม้นพี่ผมด้วยน่ะครับ ไม่งั้นขอให้ท้องเสีย
โค๊ดใส่รูปขอ Five นะครับ
#user-fives .subsection div {width:45px !important}
#user-fives .subsection .listitem-separator {display:block !important}
#user-fives .subsection {background:url(รูปภาพ);
background-position:225px;
background-repeat:no-repeat}
ที่สำคัญถึงแม้ผมจะยืมพี่แกมาก็แวะมาเม้นให้ผมบ้างน่ะครับ iPalm และ BlogiPalm