หัวข้อ: [Tip Hi5] โค๊ดแต่งสกิน แจ่มๆ เปลี่ยนภาพใน sub header เริ่มหัวข้อโดย: เด็กไอทีคลับ ที่ 17, 06 2009, 03:14:29 PM อ่านคำอธิบายก่อนแล้วค่อยไปดู code ข้างล่างนะครับ
code นี้จะให้เรามี Sub Header สวยๆ แบบที่แต่งเอาได้ ไม่ต้องซ้ำกับใครๆ โดยการทำงานของ code ก็คือ จะสร้างภาพพื้นหลัง ไว้ที่ส่วนของ sub header และซ่อนตัวหนังสือที่แสดงอยู่ ดูที่นี่เพื่อให้เห็นตัวอย่างนะครับ http://dekitclub.hi5.com แบบที่ผมใช้น่ะแหละ กล่องย่อยๆ จะมีรูปแบบ design ที่เป็นของเราเอง ใครสงสัยอะไรตรงไหนก็ถามกันมาได้เลย ตัวอย่างภาพ ภาพที่ใช้ควรจะมีขนาดกว้างไม่เกิน 456 pixel นะครับ ไม่งั้นจะล้นขอบ ตามตัวอย่างนี้ (http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif) (http://www.dekitclub.com/upload/_temp/2008121917114831d96b-bInt.gif) วิธีใช้ #recent-updates h1 { text-indent:-5555px; background:url(.....เปลี่ยนตรงนี้เป็น url ของรูปภาพที่เราต้องการ....); background-position:right; background-repeat:no-repeat; } ภาคผนวก #recent-updates หมายถึง กล่องที่แสดงอัพเดทโปรไฟล์ของเรา จะอยู่ทางด้านซ้าย #lifestyle หมายถึง หมายถึง เกี่ยวกับฉัน จะอยู่ทางด้านซ้าย #photoAlbums หมายถึง อัลบั้มภาพ จะอยู่ทางด้านขวา #groups หมายถึง กลุ่มเพื่อน จะอยู่ทางด้านซ้าย #common-friends หมายถึง เพื่อนที่เกี่ยวของ อยู่ด้านขวาบน #friends หมายถึง เพื่อนของฉัน #user-fives หมายถึง ไฟว์จากเพื่อน #interests หมายถึง ความสนใจ #journalDetail หมายถึง บันทึก บทความ #comments หมายถึง คอมเม้นต์จากเพื่อน โค๊ด: /* ------------ SUB HEADER by dekitclub.com ------------*/ .section h1 {margin-top:12px;height:67px;width:456px} #recent-updates h1 { text-indent:-5555px; background:url(http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif); background-position:right; background-repeat:no-repeat; } #lifestyle h1 { text-indent:-5555px; background:url(http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif); background-position:right; background-repeat:no-repeat; } #photoAlbums h1 { text-indent:-5555px; background:url(http://www.dekitclub.com/upload/_temp/20081219171148df4ff7-bHall.gif); background-position:right; background-repeat:no-repeat; } #groups h1 { text-indent:-5555px; background:url(http://www.dekitclub.com/upload/_temp/200812191709184fc609-bGrp.gif); background-position:right; background-repeat:no-repeat; } #common-friends h1 { text-indent:-5555px; background: url(http://www.dekitclub.com/upload/_temp/20081219171148cd4470-bSo.gif); background-position:right; background-repeat:no-repeat; } #friends h1 { text-indent:-5555px; background: url(http://www.dekitclub.com/upload/_temp/20081219171148cd4470-bSo.gif); background-position:right; background-repeat:no-repeat; } #user-fives h1 { text-indent:-5555px; background: url(http://www.dekitclub.com/upload/_temp/20081219170918450226-bFive.gif); background-position:right; background-repeat:no-repeat; } #interests h1 { text-indent:-5555px; background: url(http://www.dekitclub.com/upload/_temp/2008121917114831d96b-bInt.gif); background-position:right; background-repeat:no-repeat; } #journalDetail h1 { text-indent:-5555px; background: url(http://www.dekitclub.com/upload/_temp/2008121917114893b49b-bWord.gif); background-position:right; background-repeat:no-repeat; } #comments h1 { text-indent:-5555px; background: url(http://www.dekitclub.com/upload/_temp/200812191709188e60c7-bCom.gif); background-position:right; background-repeat:no-repeat; } .section-separator {display:none; } หัวข้อ: Re: [Tip Hi5] โค๊ดแต่งสกิน แจ่มๆ เปลี่ยนภาพใน sub header เริ่มหัวข้อโดย: orange_pon@live.com ที่ 24, 10 2009, 02:00:17 PM ไม่เคยเล่น hi5 ช่วยแนะนำวิธีแต่ง hi5 แบบระเอียดให้หน่อยงับ
หัวข้อ: Re: [Tip Hi5] โค๊ดแต่งสกิน แจ่มๆ เปลี่ยนภาพใน sub header เริ่มหัวข้อโดย: CoolPha ที่ 27, 10 2009, 09:07:53 PM อิ ๆ ทำไม่เป็น มาทำให้เลย ใช้ อันที่ ๆรัก ทำให้
มา 5 เดือนแล้วนะค่ะ |