วันศุกร์ที่ 31 สิงหาคม พ.ศ. 2555

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
โค้ดของภาพนี้คือ




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

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

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






วิธีที่ 2 ใส่ Icon ให้ Post Title
วิธีนี้ก็เป็นการใส่ icon ให้กับ Post Title เช่นเดียวกับวิธีที่ 1 แต่มีความยืดหยุ่นมากขึ้น
ก่อนอื่นให้ Login และไปที่ แผงควบคุม >> รูปแบบ(การออกแบบ) >> แก้ไข HTML >>และขยายแม่แบบเครื่องมือ

วิธีทำบล็อก

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




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

แต่ง blogspot

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

สอนการทำ blogger

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

สอนทำ blogspot

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

วิธีสร้าง blog

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








วิธีนี้มีข้อดีคือยืดหยุ่นกว่าวิธีแรกแต่มีข้อเสียคือยังไม่สามารถกำหนดตำแหน่งได้มากกว่า 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 แม่แบบก่อนทุกครั้ง สำหรับบทความนี้ก็มีความยาวมากแล้วผมจึงขอจบเพียงเท่านี้ สงสัยประการใดโปรดสอบถาม และถ้าคิดว่าบทความนี้มีประโยชน์ก็อย่าลืมบอกต่อนะครับ ขอบคุณครับ    

ไม่มีความคิดเห็น:

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