การใช้เทมเพลตมาตารฐานของ blogger บางเทมเพลต เมื่อเพื่อนๆ ใส่รูปภาพลงไปในบทความมักจะมีเส้นกรอบรูปสีเทาเพิ่มขึ้นมา บางคนคงไม่เอะใจ! แต่บางคนมองว่าไม่ค่อยชอบเพราะเส้นกรอบรูปตัดกับสีพื้นหลังจึงอยากจะลบเส้นกรอบของรูปที่ติดมาออกเพื่อให้เข้ากับสีพื้นหลังของเทมเพลต

ยกตัวอย่าง เทมเพลต Simple
จากรูปตัวการ์ตูนเกมส์มาริโอ คุณจะสังเกตเห็นเส้นขอบของรูปสีเทาตัดกับพื้นที่ขาว สำหรับผมไม่ค่อยชอบแต่บางคนชอบอันนี้คงขึ้นอยู่กับรสนิยมของแต่ละคน


1. เพื่อนๆ ไปที่ Blogger >> การออกแบบ >> แก้ไข HTML
2. ติ้กถูกที่ "ขยายเทมเพลตวิดเจ็ต" เพื่อป้องกันเราทำโค้ดเสีย

3. กด Ctrl + F แล้วพิมพ์คำว่า "Border" ลงไปอันนี้ผมคงไม่ต้องอธิบายนะว่า border คืออะไร?
4. ให้หาโค้ดดังต่อไปนี้

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

}

ให้เพื่อนๆสังเกตตรงโค้ดสีแดง เปลี่ยนแปลงและลบโค้ดบางส่วนออกก็จะเหลือ

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);
  background: $(image.background.color);
  border: 0px none $(image.border.color);
}

5. เมื่อปรับแต่งโค้ดเรียบร้อยแล้วให้กด "บันทึกแม่แบบ" แค่นี้ก็เป็นอันเสร็จ

การแสดงผลเส้นกรอบของรูปก็จะหายไปผมไม่ขอยกตัวอย่างประกอบนะครับ ถ้าเพื่อนๆ อยากเห็นผลลัพธ์ที่ได้ก็ต้องลงมือทำทันที

หมายเหตุ : โค้ดที่ยกตัวอย่างข้างต้นนั้นจะมีเฉพาะเทมเพลตมาตารฐานของ blogger เท่านั้น หากเพื่อนๆ โหลดเทมเพลตมาจากที่อื่นอาจจะไม่เจอโค้ด แต่สามารถลบโค้ดได้โดย ค้นหาคำว่า "border" ขอให้สนุกกับการแต่ง blog