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

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

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

วิธีใช้งาน blogger และ blospot
URL ของภาพ
http://upic.me/i/5f/paperpencil.png
โค้ดของภาพนี้คือ
<img border="0" src="http://upic.me/i/5f/paperpencil.png"/>




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

สอนทำบล็อก
ผลที่ได้

วิธีปรับแต่ง blogger
หมายเหตุ
(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

แต่ง blogspot

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

สอนการทำ blogger

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

สอนทำ blogspot

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

วิธีสร้าง blog

นี่คือตัวอย่างการวางโค้ดให้ปรากฎทางซ้ายของ 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; อยู่แล้วผมจึงไม่อยากไปปรับแก้ของเก่า และเพื่อให้ง่ายต่อการอธิบายครับ 

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

สอนสร้าง blog

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

ทำบล็อก

วิธีแก้ไขคือเพิ่มโค้ดความสูงเข้าไปให้พอดีกับความสูงของภาพ และอาจจะเพิ่มค่า 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; /*เส้นขอบสีแสด*/

}

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

แต่ง blogger


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

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

แต่ง title ของบล็อก
โค้ดที่เราจะเพิ่มเข้าไปจากโค้ดเดิมมีดังนี้

.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 คือโค้ดสีดำซึ่งจะมองเห็นในกรณีที่รูปภาพไม่เต็มพื้นที่ที่กำหนด

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

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

ตอนนี้มีความคิดเห็น : 8 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณครับ...ขอนำไปลองใช้ครับ ^^

  1. มีปัญหาอ่ะครับ คือว่า ช่องใส่ชื่อบทความ มันหายไปอ่ะคับ รบกวนช่วยดูให้หน่อย

    http://upic.me/i/00/62untitled.jpg

    http://seriescorner.blogspot.com/

  1. พี่ถามไรหน่อยดิ ผมใช้โปรแกรม artisteer แต่งบล็อกเสร็จเรียบร้อยร้อย

    พอนำมาใช้ Flash มันขึ้นเป็นบางตัวอะพี่ทำไงให้มันขึ้นหมดทุกตัวอ่ะครับ

    ลองดูครับ http://mao-plin-music.blogspot.com ช่วยตอบทีน่ะครับ

    ขอบคุณครับ ..

  1. ตรงที่เป็นกรอบสีขาวอ่ะครับ มันไม่ขึ้นอ่ะพี่

  1. พึ่งรู้ว่าใส่โคีดลงไปในช่องหัวข้อได้เลย แจ่มๆ

  1. การแทรกโค้ดนี้มันยากจริงๆ ตากมือใหม่

  1. ลองใช้แล้วค่ะ น่ารักดี :)

  1. ขอบคุณครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel