ปุ่ม "สารบัญ" อยู่ตำแหน่งบนขวาสุดใช้เพื่อดูหัวข้อบทความทั้งหมดของบล็อกนี้ครับ
Loading...

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

การเพิ่มตัวปรับขนาดตัวอักษรให้กับบล็อก

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

ลองมาดูตัวอย่างในการแสดงก่อน

+ + + + + อาจจะใช้เป็นเครื่องหมายแบบนี้
เป็นตัวอักษรภาษาไทย
A A A A A เป็นตัวอักษรภาษาอังกฤษ

หรือจะเป็นคำเลยก็ยังได้ เช่น

Smallest
Small
Normal
Large
Largest

ถ้าต้องการให้เป็น A A A A A ก็ให้ใช้โค๊ด
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'">
<span >A</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'">
<span >A</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'">
<span >A</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'">
<span >A</span></a>
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'">
<span >A</span></a>


หรือถ้าต้องการเป็นคำก็ให้ใช้ดังนี้
<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'">
<span >Smallest</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'">
<span >Small</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'">
<span >Normal</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'">
<span >Large</span></a>

<a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'">
<span >Largest</span></a>


*ค่า .5em, 1em, 1.5em, 2em และ 2.5em คือจำนวนเท่าของตัวอักษรปกติ ให้ลองเลือกค่าดูว่าแค่ไหนเหมาะสมสำหรับการใช้งาน

เราสามารถวางโค๊ดโดยใช้ Widget "HTML/JAVASCRIPT" เหมือนเว็บผมก็สะดวกดี โดยการไปที่ องค์ประกอบของหน้า และเลือกการเพิ่ม Widget เสร็จแล้วก็คัดลอกโค๊ดไปแปะได้เลย ส่วนตำแหน่งในการวางก็ให้เลื่อนเอาตามใจชอบ

หรือถ้าต้องการวางไว้ด้านบนหรือล่างบทความก็ให้ทำดังนี้

ขั้นตอนที่ 1 ไปที่ แม่แบบ|แก้ไข HTML-ขยายแม่แบบเครื่องมือ(Layout|Edit HTML-Expand Widget Template)

ขั้นตอนที่ 2 ค้นหาโค๊ด <data:post.body/>

ถ้าต้องการให้ A A A A A อยู่เหนือบทความก็ให้วางโค๊ดไว้ด้านบนโค๊ด <data:post.body/>

ถ้าต้องการให้ A A A A A อยู่เหนือบทความก็ให้วางโค๊ดไว้ด้านล่างโค๊ด <data:post.body/>

ขั้นตอนที่ 3 ทำการบันทึกแม่แบบ แล้วลองดูหน้าเว็บของแต่ละบทความ

0 ความคิดเห็น:

 
TopBottom