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

หวัดดีค่า (^_^)V

คุณ teddy-yunyun ถามไว้ใน c-box ว่า จะใส่ไอคอนหน้าหัวข้อเรื่องตรง sidebar ยังไง ตามนี้เลยค่ะ Let's gooo

1.   ใน CSS, หาคำว่า #sidebar .module ul, #sidebar2 .module ul ค่ะ  จะเห็นโค้ดข้างล่างค่ะ

#sidebar .module ul, #sidebar2 .module ul {
     margin:5px 0px 0px 5px;
     padding:0;
     list-style: none;
}

2.  ให้คอมเมนต์ list-style:none; ออกค่ะ แล้วเพิ่ม list-style-type, list-style-position เข้าไป ดังโค้ดข้างล่างค่ะ

#sidebar .module ul, #sidebar2 .module ul {
     margin:5px 0px 0px 5px;
     padding:0;
     /*list-style: none;*/
     list-style-type: square;
     list-style-position: inside;
}
 

list-style-type  -  กำหนด style ของหัวข้อว่าจะให้เป็นแบบไหน มีให้เลือกมากมาย เช่น disc, circle, square หรือ decimal ดูค่าที่เราสามารถใช้ได้ทั้งหมดได้ที่นี่ค่ะ http://www.w3schools.com/Css/css_reference.asp#list

list-style-position -  สามารถใส่เป็น inside หรือ outside ค่ะ  ทดลองเปลี่ยนดูค่ะ ว่ามันต่างกันยังไง

3.  แต่ถ้าอยากใช้รูปภาพเป็นไอคอน ให้เพิ่ม list-style-image เข้าไป ดังข้างล่างค่ะ

#sidebar .module ul, #sidebar2 .module ul {
      margin:5px 0px 0px 5px;
      padding:0;
      /*list-style: none;*/
      list-style-image: url(http://jennessa.exteen.com/images/flower.gif);
      list-style-position: inside;
}

4.  แก้ CSS แล้ว อย่าลืมกดปุ่ม Save ตรงมุมขวาล่างค่ะ

เสร็จแล้วค่ะ แต่ว่าวิธีนี้จะแสดงหัวข้อในทุก ๆ เรื่องตรง sidebar ซึ่งบางทีเราก็ไม่อยากแสดงหัวข้อตรงบางส่วนใน sidebar เช่น ตรง Links หรือเราอาจจะอยากให้ตรง Categories เป็นไอคอนรูปดอกไม้ แล้วตรง Recommend เป็นไอคอนรูปเป็ด โปรดติดตามเอนทรีหน้าค่ะ ตอนนี้ขอไปห้องสมุดก่อนค่ะ จะปิดแว้ววว บ๊ายบายค่ะ (^^)V