การเปลี่ยนรูปภาพหัวข้อเรื่องตรงแถบด้านข้าง

posted on 03 Feb 2007 23:22 by jennessa in Design

ในแต่ละ theme จะมีรูปแบบของแถบด้านข้าง (side bar) ไม่เหมือนกัน ในแถบด้านข้างจะมีเมนูย่อย ๆ หลายอัน เช่น Recommended, Category, Comment Alert ดังรูปข้างล่างค่ะ

Side Bar

ตรงหน้าของแต่ละหัวข้อจะมีรูปเล็ก ๆ อยู่ (bullet) เราสามารถเปลี่ยนรูปตรงนี้เป็นรูปอื่น ๆ ที่เราต้องการได้ โดยการเปลี่ยน CSS เพียงนิดเดียวเองค่ะ มาดูวิธีทำกันค่ะ

1. เข้าไปที่ Theme --> แก้ CSS ด้วยตัวเอง จากนั้นหาคำว่า .sidebar-item li ค่ะ ดังข้างล่างค่ะ

.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/patchy/bul.gif);
background-position:0px 2px;
}

2. ตรงคำว่า background-image: ให้เปลี่ยน url ตรงที่ไฮไลท์ไว้เป็น url ของรูปที่เราต้องการให้เป็นหัวข้อค่ะ ตัวอย่างเช่น ถ้า url ของรูปใหม่คือ http://jennessa.exteen.com/images/0164_star.jpg CSS ที่ได้จะเป็นดังข้างล่างค่ะ

.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(http://jennessa.exteen.com/images/0164_star.jpg);
background-position:0px 2px;
}

3. ตรงคำว่า background-position: เป็นการกำหนดตำแหน่งของหัวข้อค่ะ เลขตัวแรกคือตำแหน่งตามแนวนอน เลขตัวที่สองคือตำแหน่งตามแนวตั้งค่ะ ตัวอย่างเช่น ถ้าเราต้องการให้รูปหัวข้อไปทางขวามากขึ้น เราก็ต้องเพิ่มตัวเลขตัวแรกให้มากขึ้นค่ะ ( ลองเปลี่ยนรูปดูก่อนค่ะ แล้วค่อยดูว่าจะต้องเปลี่ยนเลขตรงนี้รึป่าว อันนี้บอกไว้เผื่อจะไปลองเล่นกันดูค่ะ )

4. เรียบร้อยแล้วค่ะ จากนั้นลองไปดูที่บลอคเรา หัวข้อตรงแถบด้านข้างจะเปลี่ยนไปแล้วค่ะ

Side Bar (New Bullet)

สำหรับเพื่อน ๆ ที่ไม่รู้ว่าจะเอา url ของรูปมาจากไหน สามารถไปดูได้ที่ entry นี้ก่อนค่ะ Click

ขอบคุณรูป bullet น่ารัก ๆ จาก Bullet Madness ค่ะ

ถ้าติดตรงไหน หรือสงสัยในเรื่องอื่น ๆ ก็คอมเมนต์คำถามไว้ได้นะคะ จะพยายามหาคำตอบมาให้ค่ะ (^ ^)V

Tags: blog theme, bullet, css, sidebar, theme25 Comments

ดีครับ ทดลองเล่นแล้ว เอามาสอนอีกนะครับ

#1 By เจ้าชายน้อย on 2007-02-03 23:54

อยากให้สอนการใส่ลิงค์ตรงข้างๆเหมือนนาฬิกาอ่ะค่ะแต่อยากลิงค์ไปที่สเปซของเราอย่างspaces.live.comหรือhi5หรือบล็อกในเว็บอื่นๆของเราน่ะค่ะรบกวนด้วยนะคะ

#2 By eeddy(อี๊ด) on 2007-02-03 23:54

เปนเกร็ดเล็กเกร็ดน้อยอีกแล้ววว

ขอบคุณจ้า

#3 By worapoj@~@ on 2007-02-03 23:59

ตอบคุณ eeddy ค่ะ

ทำเหมือนการใส่นาฬิกาเลยค่ะ ไปที่ Preference --> Links แล้วใต้คำว่า Add New Link

URL: <ใส่ URL ที่ต้องการให้ลิงค์ไปค่ะ>
Description: <ใส่ข้อความที่จะให้แสดงเป็นลิงค์>

อย่างเช่น ถ้าจะให้ลิงค์ไปที่ spaces.live.com แล้วให้ขึ้นว่า MySpace ก็ให้ใส่ดังนี้ค่ะ

URL: spaces.live.com
Description: MySpace

เสร็จแล้วค่ะ

ลองทำดูนะคะ

#4 By เจนเนสซ่า on 2007-02-04 18:40

ขอบคุนมากคร่า อยากได้โค้ดเปลี่ยน cursor อีกอย่างนึงอ่าค่ะ งิงิ รบกวนไปมากป่ะคะ
แต่เจนเนสซ่าใจดีเน้อ แวะไปบลอคเราด้วย คริคริ มีคนเม้นแล้ว ขอบคุนนะคะ

#5 By Amilin on 2007-02-04 20:42

เพิ่มอีกหน่อยนะคะ แหะๆ อยากได้วิธีย้าย จัดอันดับ เว็บ WEBSTAT เล็กๆที่เป็นรูปคล้ายๆกราฟอ่าค่ะ มาอยู่ที่แถบด้านซ้าย เพราะไม่รุว่าจะทำไงอ่าค่ะ อันนี้จนปัญญาเลย ไม่รุโค้ดเลยอ่าค่ะ ช่วยเราอีกรอบนะคะ ขอบคุนมากๆค่ะ

#6 By Amilin on 2007-02-04 20:44

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

#7 By ^Lovely_Shine^ on 2007-02-25 17:48

ตอบให้ที่บลอคแล้วนะคะ

#8 By เจนเนสซ่า on 2007-02-25 23:15

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

#9 By ^Lovely_Shine^ on 2007-02-26 13:05

ตอบหนู Lovely Shine นะคะ

ความกว้างของช่องเมนู ให้ไปแก้ที่ CSS หาคำว่า .rightcontent แล้วเพิ่มตัวเลขตรง width จ้ะ ค่อย ๆ เพิ่มทีละนิดนะ

#10 By เจนเนสซ่า on 2007-02-26 22:21

ขอบคุณพี่เจนเนสซ่าอีกครั้งนะคะ ดีใจจังแวะไปตอบเม้นท์ที่ blog ด้วย

#11 By ^Lovely_Shine^ on 2007-02-26 22:51

ว้าววว
ขอบคุนนะค่ะไว้จะเอาไปใช้ในบล็อก
บ้างนะค่ะ
ขอแอดไว้ละกันนะคะ

#12 By Noyz09o4* ~ I ♥ Yamapi on 2007-02-27 01:03

หน้าลิ้งอ่ะ เสียถาวร ไม่มีอะไรขึ้นเลยอ่ะ อดเลย อยากทำมั้งอ่

#13 By :: ipup :: on 2007-03-14 14:20

จะเปลี่ยนตรงหัวข้อที่ Jennessa ทำเป็นดอกไม้ได้ยังไงอ่ะค่ะ อยากทำบ้างอ่ะ

#14 By :: ipup :: on 2007-03-14 15:07

โอ้ว พึ่งมาแอบเห็น ขอแอด แล้วก็ขอลองทำบ้างนะขอรับ

#15 By ป่อม~~สุกี้ on 2007-05-01 11:19

ลองทำดูแล้วมีกรอบสีขาวอะ ทำไงดี sad smile

#16 By a Little*RabBit on 2008-01-10 20:34

ทำไมหาโค้ดตัวที่ว่านี้ไม่เจอหนอ...?

ช่วยบอกทีค่ะ

ใน CSS ของนู๋มันไม่มีโค้ดนี้ค่ะ

.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/patchy/bul.gif);
background-position:0px 2px;
}

#17 By 21july on 2008-01-29 17:40

อันนี้เป็น css ของ exteen เวอร์ชันเก่าจ้ะ ใช้กับเวอร์ชันใหม่ไม่ได้นะ

#18 By เจนเนสซ่า on 2008-01-29 18:10

ขอบคุณค่ะ
เย้ๆ สวยดี

#19 By All Su on 2008-05-08 09:03

ไม่มีแบบนั้นเลยอ่ะมีแค่นี้เอง

#sidebar{
background:#FFFFFF;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:210px;
}

#sidebar2{
/*display:none;*/
float:right;
width:200px;
display:inline;
background:#ffffff;
margin:5px px 0px 20px;
border-right:1px dashed #CCCCCC;

}

#sidebar .module, #sidebar2 .module{
margin:5px 5px 15px 5px;
}

#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;
padding:0;
list-style: url(http://vidoclipclub.exteen.com/images/bullet_gray.gif);
}

#sidebar .module h2, #sidebar2 .module h2{
text-indent:-9999px;
}