ExteenThemeOld

หวัดดีค่ะ ทุกคน (^_^)
 
ไม่ได้เขียน exteen blog มาหนึ่งปีเต็ม ๆ โอ้วววว กลับมาอีกทีมีอะไรใหม่ ๆ ให้เลือกใช้เยอะแยะเลย มี default theme ให้เลือกมากขึ้นด้วย มีโฆษณาแอบมาตรง sidebar ด้วย แต่ว่าเวบมาสเตอร์ก็อนุญาติให้เอาออกได้ถ้าต้องการ ขอบคุณมากค่า
 
เนื่องจากเวลาผ่านไปนานมาก เจนคิดว่าได้เวลาที่จะต้องบอกลา theme สีชมพูอันนี้แล้ว โอ้วววว T^T 
 
เจนอยากออกแบบ theme ใหม่ที่ดูอ่านง่าย สบายตา จะได้ฝึก css ไปด้วย ตอนนี้บลอคก็เลยกำลังอยู่ระหว่างการปรับปรุงครั้งยิ่งใหญ่ค่ะ
 
หลังจากนั่งปรับ ๆ แต่ง ๆ มาซักพักนึง หน้าตาบลอคก็เปลี่ยนไปอย่างที่เห็นค่ะ
 
 
ยังมีอะไรต้องปรับแต่งอีกเยอะแยะมากมายเลยค่ะ เริ่มสนุกแล้ว เย้ สู้ต่อไป !
 
รูปจาก:
 
- jennessa

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

ตอนที่แล้วพูดถึง การตกแต่งหัวข้อแถบเมนูด้านข้าง แบบพื้นฐาน ๆ นะคะ วันนี้เจนเนสซ่าจะนำเทคนิคการซ่อน 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 ไปไว้ที่บลอคของตัวเองก่อนจะใช้นะคะ ขอบคุณค่ะ : )

สวัสดีค่ะ ขอโทษที่หายไปนานมาก ช่วงนี้งานเยอะมากๆๆๆ จนต้องเอากลับมาทำที่บ้านด้วยค่ะ T^T

พอดีเห็นคุณเฟเน่จัง ถามไว้ว่า จะเอารูปมาใส่แทนข้อความที่เป็นหัวข้อเมนูด้านข้างยังไง วันนี้ขอเริ่มแบบพื้นฐานก่อนนะคะ

1. หัวข้อเมนูด้านข้าง คือตรงไหน ? คือหัวข้อที่อยู่ตรงเมนูแถบด้านข้างค่ะ เช่น หัวข้อ Recommended, Category, Previous Entry เป็นต้น

2. เราสามารถตกแต่งหัวข้อพวกนี้ได้ด้วยการไปที่ "แก้ไข CSS ด้วยตัวเอง" จากนั้นหาคำว่า .sidebar_title ดังข้างล่างค่ะ

.sidebar-title{
padding:2px 0px 2px 8px;
color:#8E8E8E; //สีตัวอักษร
font-family:Tahoma; //รูปแบบตัวอักษร
font-size:12px; //ขนาดตัวอักษร
padding-left:10px;
margin-right:1px;
background-color:#FFCCCC; //สีพื้นหลังของหัวข้อ
}

3. นอกจากนี้ เรายังสามารถนำรูปมาใช้เป็นพื้นหลังของหัวข้อเมนูได้ด้วยนะคะ โดยการเพิ่มbackground-image ลงไปใน .sidebar-title ดังตัวอย่างข้างล่าง ตรงที่ไฮไลท์ไว้ค่ะ

.sidebar-title{
padding:2px 0px 2px 8px;
color:#8E8E8E;
font-family:Tahoma;
font-size:12px;
padding-left:10px;
margin-right:1px;
background-color:#FFCCCC;
background-image:url(http://jennessa.exteen.com/images/1.gif); //ใส่พื้นหลังให้หัวข้อเมนู
}

แค่นี้ก่อนนะคะ เจนเนสซ่าต้องไปนอนแล้วค่ะ เดี๋ยวตื่นสายไปทำงานไม่ทัน T T

ตอนหน้าจะสอนทำเมนูแบบหัวข้อ Recommended ของเจนเนสซ่าน่ะค่ะ โปรดติดตามตอนต่อไปนะคะ