Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

สวัสดีค่ะ เอนทรีที่แล้วเรื่อง LOVE Tag คอมเมนต์เยอะกว่าที่คิดแฮะ 55 กลับมาเรื่องแต่งบลอคดีกว่า เคยแนะนำฟังก์ชัน ใหม่ของ Exteen 4.0 ที่ชื่อ "Page" ไปแล้ว ในเอนทรี "Page ฟังก์ขันใหม่ที่ต้องลองใน Exteen เวอร์ชันใหม่" ถ้ายังไม่รู้ว่า Page คืออะไร เข้าไปอ่านเอนทรีอันนี้ก่อนนะคะ :-)

เอนทรีนี้จะสอนวิธีการเอารูปมาใส่ในชื่อที่เราตั้งเวลาสร้าง Page น่ะค่ะ ตัวอย่างเช่น ในส่วน Page ของบลอคเจนเนสซ่า จะมีรูปดอกไม้ข้าง ๆ ชื่อเรื่องอยู่ ดังรูป (ดูข้างบนก็ได้ค่ะ)

วิธีทำง่ายมากกกก ไปดูกันเลยค่ะ

1. เตรียมรูปที่จะใช้ก่อนค่ะ โดย upload ขึ้นที่ Exteen เพื่อให้มี url ของรูปก่อน (หรือจะ upload ไว้ที่อื่นก็ได้นะ) ตัวอย่าง URL ของรูป ดังข้างล่าง

http://jennessa.exteen.com/images/155.gif

.

2. ถ้ามี Page อยู่แล้ว ก็กด Edit เข้าไปเลยค่ะ หรือในกรณีสร้างใหม่ก็ทำเหมือนกันค่ะ คือ ในหน้าเพิ่ม/แก้ไข Page ให้ดูตรง Title ที่เราเอาไว้ใส่ชื่อ Page ดังรูป เดี๋ยวเราจะใส่ code ตรงนี้

3. ทีนี้ code html ที่จะทำให้รูปแสดงก็คือ tag < img > เราก็เอา url รูป (จากข้อ 1) ไปใส่เป็น src ค่ะ ออกมาเป็นอย่างข้างล่าง อย่าลืมใส่ border="0" ด้วยนะคะ

< img src="http://jennessa.exteen.com/images/155.gif" border="0"/>

.

4. code จากข้อ 3 เหมือนเป็นตัวแทนรูปที่เราจะใช้นะคะ :D อยากให้รูปอยู่ตรงไหนของชื่อเรื่อง ก็ใส่ code นั้นลงไปในช่อง Title (รูปข้อ 2) ค่ะ สมมติว่าจะใส่รูปหน้าชื่อเรื่อง ในช่อง Title ก็จะออกมาเป็น

< img src="http://jennessa.exteen.com/images/155.gif" border="0"/> Blog Map

.

5. แล้วก็กด Publish ได้เลยค่า แค่นี้เอง

.

อันนี้ตั้งชื่อเรื่องเป็น ตอนที่ 1 แต่ยังคิดตอนที่ 2 ไม่ออกเลยค่ะ 55 เอาไว้ถ้ามีวิธีอะไรอีกแล้วจะเอามาบอกนะคะ มีคำถามก็คอมเมนต์ไว้นะ (^^)V

ปล. ** เครื่องหมาย < กับคำว่า img ตอนเอาไปใช้ให้เขียนติดกันนะคะ ในนี้เว้นวรรคไว้เพื่อไม่ให้ code โดน rip ออกไปค่ะ

เพิ่มเติมจากคุณ iPats  สามารถทำด้วย CSS ก็ได้นะคะ ตาม code ข้างล่างเลยค่า ขอบคุณมากนะคะ (^^)

#pagemenu ul li a:after {content: url("http://jennessa.exteen.com/images/155.gif");}
#pagemenu ul li a:before {content: url("http://jennessa.exteen.com/images/155.gif");}