Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

สวัสดีค่ะ ขอโทษที่หายไปนานมาก ช่วงนี้งานเยอะมากๆๆๆ จนต้องเอากลับมาทำที่บ้านด้วยค่ะ T^T

พอดีเห็นคุณเฟเน่จัง ถามไว้ว่า จะเอารูปมาใส่แทนข้อความที่เป็นหัวข้อเมนูด้านข้างยังไง วันนี้ขอเริ่มแบบพื้นฐานก่อนนะคะ

1. หัวข้อเมนูด้านข้าง คือตรงไหน ? คือหัวข้อที่อยู่ตรงเมนูแถบด้านข้างค่ะ เช่น หัวข้อ Recommended, Category, Previous Entry เป็นต้น

2. เราสามารถตกแต่งหัวข้อพวกนี้ได้ด้วยการไปที่ "แก้ไข CSS ด้วยตัวเอง" จากนั้นหาคำว่า .sidebar_title ดังข้างล่างค่ะ

.sidebar-title{
padding:2px 0px 2px 8px;
color:#8E8E8E; //สีตัวอักษร
font-family:Tahoma; //รูปแบบตัวอักษร
font-size:12px; //ขนาดตัวอักษร
padding-left:10px;
margin-right:1px;
background-color:#FFCCCC; //สีพื้นหลังของหัวข้อ
}

3. นอกจากนี้ เรายังสามารถนำรูปมาใช้เป็นพื้นหลังของหัวข้อเมนูได้ด้วยนะคะ โดยการเพิ่มbackground-image ลงไปใน .sidebar-title ดังตัวอย่างข้างล่าง ตรงที่ไฮไลท์ไว้ค่ะ

.sidebar-title{
padding:2px 0px 2px 8px;
color:#8E8E8E;
font-family:Tahoma;
font-size:12px;
padding-left:10px;
margin-right:1px;
background-color:#FFCCCC;
background-image:url(http://jennessa.exteen.com/images/1.gif); //ใส่พื้นหลังให้หัวข้อเมนู
}

แค่นี้ก่อนนะคะ เจนเนสซ่าต้องไปนอนแล้วค่ะ เดี๋ยวตื่นสายไปทำงานไม่ทัน T T

ตอนหน้าจะสอนทำเมนูแบบหัวข้อ Recommended ของเจนเนสซ่าน่ะค่ะ โปรดติดตามตอนต่อไปนะคะ