รูปตัวอย่าง
Description |
|
โค้ดชุดนี้ ใช้ในการจัดรูปแบบ TopFriends โดยการขยายรูปดิสเพลย์ให้ใหญ่ขึ้น พร้อมทั้งกำหนดเส้นกรอบให้รูปด้วย ในส่วนของบล๊อก header คุณสามารถใส่รูปภาพลงไปได้ และองค์ประกอบอื่นๆ เช่น สีของลิ้ง ขนาดตัวอักษร ก็สามารถตกแต่งได้เช่นกัน
คุณสามารถนำโค้ดทั้งหมดไปใช้ได้ทันที และสามารถตกแต่งส่วนอื่นๆ เพิ่มเติ่มได้จากโค้ดที่เกี่ยวข้องภายในเว็บ
|
Support: IE6-7-8, FireFox2-3, Chrome, Safari, Opera
Code
<style>
#friends h1 {
text-indent:-999px;
overflow:hidden;
border:none;
height:___px;
background:url(___) no-repeat top center;}
<!-- ซ่อนหัวข้อ Friends, เพิ่มความสูง Head -->
<!-- แล้วใส่รูปภาพ ขนาดกว้างไม่เกิน 440px -->
.friend-picture div {
margin-left:-12px !important
}
.friend-picture {
height:100px !important;
width:86px!important;
margin-left: 2px;
border:solid 1px black;}
<!-- เปลี่ยนสีของเส้นกรอบรูป -->
.friend-picture a img {
width:100px;
height:100px !important;
}
div.friend-name a {color:gray}
div.friend-name a:hover {color:black}
<!-- สีตัวอักษรลิ้งบน Top Friends แต่ละรูป -->
<!-- a:hover คือสีตัวอักษรขณะชี้เม้าส์ที่ลิ้ง -->
#friends h2,
#friends div.listitem-separator,
#friends .subsection div {display:none}
div.friend,div.friend div
{display:block !important}
</style>
Last update: 18 August 2009