4 วิธีในการปรับแต่ง Blogger Post Title

พอดีมีสมาชิกบางท่านถามผมมาว่าถ้าต้องการใส่ icon ให้กับ Blogger Post title ต้องทำอย่างไร การอธิบายให้เข้าใจด้วยข้อความสั้น ๆ คงไม่เพียงพอที่จะทำให้ทำตามได้ง่าย ๆ บทความนี้ผมจึงเขียนทุก ๆ วิธีที่เราสามารถปรับแต่ง Blogger Post title รวมถึงใส่ icon หรือ รูปภาพลงไปในหัวเรื่องของบทความ ซึ่งรวมทั้งสิ้นมี 4 วิธี และผมจะนำเสนอจากง่ายไปยากดังนี้

ขั้นเตรียมการ

ก่อนอื่นคุณจะต้องเตรียมรูปภาพหรือไอคอนขนาดที่ต้องการ (อย่าให้ใหญ่มาก ประมาณ 16x16 หรือ 24x24)

สมมติในที่นี้ผมเตรียมภาพด้านล่างเอาไว้

URL ของภาพ

http://upic.me/i/5f/paperpencil.png

โค้ดของภาพนี้คือ

<img border="0" src="http://upic.me/i/5f/paperpencil.png"/>

---

---

วิธีที่ 1 ใส่ Icon ให้ Post Title

วิธีนี้ทำได้ง่ายมาก เพียงแค่คุณได้เตรียมรูปภาพหรือ icon ที่ไม่ใหญ่โตจนเกินไปแล้วนำโค้ดไปวางลงไปในหัวเรื่องขณะที่เขียนบทความหรืออาจจะเขียนบทความไปแล้ว และทำการเอาโค้ดไปเพิ่มภายหลังก็ได้ วิธีทำดูจากรูปด้านล่างครับ 

ผลที่ได้

หมายเหตุ 
(1) ถ้าคุณวางโค้ดไว้ด้านหลัง Title  iconก็จะอยู่ด้านหลังของ Title 
(2) วิธีการนี้มีข้อดีคือสามารถใช้ icon ที่แตกต่างกันในแต่ละบทความได้ แต่มีข้อเสียคือไม่สามารถปรับตำแหน่งของรูปได้ 

---

---

วิธีที่ 2 ใส่ Icon ให้ Post Title

วิธีนี้ก็เป็นการใส่ icon ให้กับ Post Title เช่นเดียวกับวิธีที่ 1 แต่มีความยืดหยุ่นมากขึ้น

ก่อนอื่นให้ Login และไปที่ แผงควบคุม >> รูปแบบ(การออกแบบ) >> แก้ไข HTML >>และขยายแม่แบบเครื่องมือ

จากนั้นให้ค้นหาโค้ด

<a expr:href='data:post.url'><data:post.title/></a>

ซึ่งคุณจะพบชุดโค้ดในบริเวณนั้นเป็น

<b:if cond='data:post.url'> 
  <a expr:href='data:post.url'><data:post.title/></a> 
<b:else/> 
  <data:post.title/> 
</b:if>

ถ้าคุณวางโค้ดของรูปที่เตรียมไว้คือ

<img border="0" src="http://upic.me/i/5f/paperpencil.png"/>

(1) ถัดจากโค้ดสีแดงรูปภาพหรือ icon จะปรากฎที่ด้านบนของ Title

(2) ถัดจากโค้ดสีม่วงรูปภาพหรือ icon จะปรากฎที่ด้านซ้ายของ Title

(3) ถัดจากโค้ดสีเขียวรูปภาพหรือ icon จะปรากฎที่ด้านขวาของ Title

(4) ถัดจากโค้ดสีชมพูรูปภาพหรือ icon จะปรากฎที่ด้านล่างของ Title

นี่คือตัวอย่างการวางโค้ดให้ปรากฎทางซ้ายของ Title

<b:if cond='data:post.url'> 
  <a expr:href='data:post.url'> 
<img border="0" src="http://upic.me/i/5f/paperpencil.png"/> 
<data:post.title/></a> 
<b:else/> 
  <data:post.title/> 
</b:if>

วิธีนี้มีข้อดีคือยืดหยุ่นกว่าวิธีแรกแต่มีข้อเสียคือยังไม่สามารถกำหนดตำแหน่งได้มากกว่า 4 ตำแหน่ง ที่ได้กล่าวมาแล้ว

---

---

วิธีที่ 3 การกำหนด ตำแหน่งของ icon ของ Title ด้วย CSS

วิธีนี้อาศัยหลักการกำหนด CSS 3 อย่างคือ Background, padding และ Height

3.1 ขั้นแรกให้ทุกคนเข้าไปที่เมนู แก้ไข HTML และพยายาม เน้นครับว่าให้พยายาม ค้นหาโค้ดที่มีลักษณะคล้ายกับโค้ดต่อไปนี้ 

.post h1{ 
/* ตรงบริเวณนี้แต่ละ  Template จะพบไม่เหมือนกัน */ 
}

หรือ

.post h2{ 
/* ตรงบริเวณนี้แต่ละ  Template จะพบไม่เหมือนกัน */ 
}

หรือ

.post h3{ 
/* ตรงบริเวณนี้แต่ละ  Template จะพบไม่เหมือนกัน */ 
}

ถ้าไม่พบชุดโค้ดดังกล่าวให้สังเกตว่าชุดโค้ดใดที่กำหนด Post title ซึ่งส่วนใหญ่จะมี Keyword คำว่า Post , Title หรือคำว่า H1,H2 ปะปนอยู่กับชื่อ Class หรือ id นั้น ๆ ด้วย (ถ้าคุณหาไม่พบโปรดแจ้งขอความช่วยเหลือที่บทความนี้) 

เอาล่ะไม่ว่าคุณจะพบโค้ดแบบไหนแนวทางการปรับแต่งต่อไปก็จะคล้าย ๆ กัน ซึ่งใน Template ที่ผมทำให้ดูในตัวอย่างพบโค้ดดังนี้

.post h3 { 
  margin:.25em 0 0; 
  padding:0 0 4px; 
  font-size:140%; 
  font-weight:normal; 
  line-height:1.4em; 
  color:$titlecolor; 
}

ในที่นี้ผมจะลองใส่ Background ให้ Title ด้วยภาพที่เราเตรียมเอาไว้โดยไม่ได้ปรับแต่งอะไร

.post h3 { 
  background:url(http://upic.me/i/5f/paperpencil.png) 0px 0px no-repeat;
  margin:.25em 0 0; 
  padding:0 0 4px; 
  font-size:140%; 
  font-weight:normal; 
  line-height:1.4em; 
  color:$titlecolor; 
}

ผลที่ได้

จะเห็นว่ารูปกับ Title มันทับกันอยู่ ต่อไปผมจึงจะทำให้ Title ขยับไปทางขวาอีก 40px เพื่อให้ Title ไม่ทับกับพื้นหลัง

.post h3 { 
  background:url(http://upic.me/i/5f/paperpencil.png) 0px 0px no-repeat;
  padding-left 
  margin:.25em 0 0; 
  padding:0 0 4px; 
  font-size:140%; 
  font-weight:normal; 
  line-height:1.4em; 
  color:$titlecolor; 
  padding-left:40px; 
}

สังเกตว่าผมเพิ่มค่า padding-left:40px; ที่บรรทัดสุดท้ายเพราะว่าโค้ดเดิมนั้นมีค่า padding:0 0 4px; อยู่แล้วผมจึงไม่อยากไปปรับแก้ของเก่า และเพื่อให้ง่ายต่อการอธิบายครับ  

เมื่อดูผลลัพธ์ที่ได้ดีขึ้นเป็นกองเลยครับ

ในกรณีที่คุณใช้รูปภาพที่ใหญ่เกินไปภาพที่ปรากฎอาจจะขาดหายไปได้ เช่น

วิธีแก้ไขคือเพิ่มโค้ดความสูงเข้าไปให้พอดีกับความสูงของภาพ และอาจจะเพิ่มค่า padding ให้มากขึ้นอีก  เช่น

.post h3 { 
  background:url(http://upic.me/i/0n/paperpencil45.png) 0px 0px no-repeat; 
  margin:.25em 0 0; 
  padding:0 0 4px; 
  font-size:140%; 
  font-weight:normal; 
  line-height:1.4em; 
  color:$titlecolor; 
  padding-left:60px; 
  padding-top:15px; 
  height:40px; 
}

โปรดสังเกตว่าผมได้เพิ่มความสูงเป็น height:40px; เพราะภาพที่ผมใส่เข้าไปใหม่นี้มีขนาด 40x40 และได้เพิ่มค่าpadding-top:15px; เพื่อให้ Title ลอยอยู่ระดับเดียวกับรูปภาพ ผลที่ได้เป็นดังภาพด้านล่าง 

---

---

วิธีที่ 4 การใส่ Background ให้กับ Title

วิธีนี้ทำได้คล้ายคลึงกับวิธีที่ 3 ต่างกันตรงที่เราจะไม่ใช้ icon ขนาดเล็กมาเป็น Background

แต่จะใช้สีหรือรูปภาพมาเป็น background แทน

การเริ่มต้นให้ทำเช่นเดียวกับวิธีที่ 3 ซึ่งจะพบในตัวอย่างนี้โค้ดเป็น (โค้ดที่คุณพบอาจจะแตกต่างจากนี้ตามที่ได้อธิบายไปแล้ว)

.post h3 { 
  margin:.25em 0 0; 
  padding:0 0 4px; 
  font-size:140%; 
  font-weight:normal; 
  line-height:1.4em; 
  color:$titlecolor; 
}

กรณีที่ 1 ถ้าต้องการใส่พื้นหลัง Title ด้วยสี

สมมติในที่นี้ผมต้องการใส่พื้นหลังให้หัวข้อเป็นสีดำ สูง 25px และมีเส้นขอบหนา 1 px สีแสด

ดังนั้นเมื่อปรับแต่งโค้ดแล้วจะได้โค้ดเป็น

.post h3 { 
  margin:5px 0 10px 0; /*ปรับแต่งค่า margin ใหม่ */ 
  padding:5px 0 5px 10px; /*ปรับแต่งค่า padding ใหม่ */ 
  font-size:140%; 
  font-weight:normal; 
  line-height:1.4em; 
  color:$titlecolor; 
  height:25px; /*ความสูงของ Title 25px*/ 
  background:#000; /*พื้นหลังสีดำ*/ 
  border:1px solid #FF5D00; /*เส้นขอบสีแสด*/ 
}

และเมื่อแก้โค้ดและบันทึกแล้วจะได้ผลลัพธ์เป็น

กรณีที่ 2 ใส่พื้นหลัง Title ด้วยรูปภาพ

และในกรณีคุณต้องการให้ Title มีรูปภาพสวย ๆ ก็จะต้องเตรียมภาพพื้นหลังที่มีความสูงไม่มากนัก

เช่นในที่นี้ผมเตรียมภาพขนาด 470 คูณ 35 px ดังรูปด้านล่าง

โค้ดที่เราจะเพิ่มเข้าไปจากโค้ดเดิมมีดังนี้

.post h3 { 
  margin:5px 0 10px 0; /*ปรับแต่งค่า margin ใหม่ */ 
  padding:8px 0 2px 10px; /*ปรับแต่งค่า padding ใหม่ */ 
  font-size:140%; 
  font-weight:normal; 
  color:$titlecolor; 
  height:25px;/*จะใส่ความสูงให้เท่ากับภาพพื้นหลังหรือตามที่ต้องการก็ได้*/ 
  background: #000 url(http://upic.me/i/b5/wrfppt31441503.gif) 0px 0px repeat-x; }

โค้ด http://upic.me/i/b5/wrfppt31441503.gif  เปลี่ยนเป็นรูปภาพของคุณเองได้ตามใจชอบ

ส่วนโค้ด #000 คือโค้ดสีดำซึ่งจะมองเห็นในกรณีที่รูปภาพไม่เต็มพื้นที่ที่กำหนด

ผลลัพธ์ที่ได้

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