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

สวัสดีค่ะ กลับมาอีกครั้ง แหะแหะ ^ ^"

ตอนที่แล้วพูดถึง การตกแต่งหัวข้อแถบเมนูด้านข้าง แบบพื้นฐาน ๆ นะคะ วันนี้เจนเนสซ่าจะนำเทคนิคการซ่อน text ด้วย CSS มาใช้ในการตกแต่งด้วยนะคะ แล้วก็จะมีการเพิ่มโค้ดใน CSS ด้วยค่ะ เริ่มกันเลยยยย

1. สมมติว่า เราต้องการจะเปลี่ยนเมนู "Recommended" ให้เป็นรูปภาพอื่นที่เราเตรียมไว้ เช่น ภาพข้างล่างนะคะ

2. จากนั้นไปที่ "แก้ไข CSS ด้วยตัวเอง" ค่ะ เพิ่มโค้ดข้างล่างลงไป โดยตรง background-image:url(...) ให้ใส่ url ของรูปภาพที่เราจะนำมาใช้นะคะ

*** เทคนิคอยู่ที่คำว่า text-indent ค่ะ จะเห็นว่าใส่ค่า -3000px ไว้ เพื่อเลื่อนตัวอักษรให้ออกไปนอกหน้าจอนั่นเองค่ะ ถ้าลองเอา text-indent ออก ก็จะเห็นตัวหนังสือคำว่า Recommended ทับรูปภาพอยู่ค่ะ

#s-recommended {
background-image:url(http://jennessa.exteen.com/images/recommend.gif);
font-size: 1px;
background-repeat: no-repeat;
padding: 10px 0px 22px 10px;
background-color:#FFFFFF;
text-indent: -3000px;
}

3. เสร็จแล้วก็กด Save แล้วดูผลงานได้เลยค่ะ ถ้ารูปออกมาขาด ๆ หาย ๆ ให้ลองปรับตรง padding ดูนะคะ ดูตัวอย่างผลงานของเจนเนสซ่าทางด้านซ้ายมือได้เลยค่า

4. สำหรับโค้ดตัวอย่างนี้ เป็นโค้ดสำหรับเปลี่ยนเมนู Recommended นะคะ ถ้าต้องการเปลี่ยนเมนูอื่นด้วย ให้เปลี่ยนคำว่า s-recommended เป็นคำอื่นดังนี้ค่ะ

• เมนู Category ใช้คำว่า s-category
• เมนู Previous Entry ใช้คำว่า s-previousentry
• เมนู Comment Alert ใช้คำว่า s-commentalert
• เมนู Archive ใช้คำว่า s-archive
• เมนู Link ใช้คำว่า s-link
• เมนู Favourite ใช้คำว่า s-favourite

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

จบแล้ว งงกันป่าวคะ? ใครทำไม่ได้ก็แวะมาถามนะคะ ใครเอาไปทำแล้วก็คอมเมนต์ไว้นะคะ เดี๋ยวเจนเนสซ่าจะตามไปดู วันนี้ไปก่อนนะคะ สวัสดีค่ะ (^ ^)V

ปล. ถ้าเพื่อน ๆ คนไหน อยากใช้รูปภาพหัวข้อเมนูของเจนเนสซ่า สามารถนำไปใช้ได้นะคะ แต่ขอให้ Save และ Upload ไปไว้ที่บลอคของตัวเองก่อนจะใช้นะคะ ขอบคุณค่ะ : )