เปลี่ยนสี Scrollbar ในบลอคด้วย CSS

posted on 19 Apr 2007 22:15 by jennessa in Design

สวัสดีค่ะ ห่างหายไปนาน วันหยุดที่ผ่านมาสนุกมาก ๆ ค่ะ หยุดยาวเหมือนได้ชาร์ตแบตให้ตัวเอง

ระหว่างกำลังคิดว่าจะเขียนเอนทรีต่อไปเรื่องอะไรดี ก็มีคำถามจากน้องบิ๊กแบงใน cbox ว่า จะเปลี่ยนสี scrollbar ได้ยังไงคะ

วันนี้เลยขอนำเสนอวิธีการเปลี่ยนสี scrollbar ด้วยตัวคุณเอง แบบไม่ยุ่งยากเลยค่ะ เพราะเรามีตัวช่วย นี่เลย !!! Online CSS Scrollbar Color Changer เป็นเวบไซต์ที่ช่วยให้คุณไม่ต้องปวดหัวกับ CSS เพราะเค้าจะช่วยสร้าง css code ออกมาให้เราคัดลอกไปแปะได้เลยค่ะ

เริ่มจาก พอเข้าไปในเวบไซต์ ก็จะเจอหน้าตาแบบนี้ค่ะ

Online CSS Scrollbar Color Changer

หมายเลข 1 - ใน listbox จะเป็นรูปแบบของ scrollbar สำเร็จรูปค่ะ มีให้เลือกหลายแบบเลย จะเลือกแบบสำเร็จรูป แล้วค่อยมาเปลี่ยนทีละส่วน หรือปล่อยเป็น Blank Style ไว้ก็ได้ค่ะ
หมายเลข 2 - เป็นคำอธิบายส่วนต่าง ๆ ของ scrollbar ที่เราสามารถเปลี่ยนสีได้ค่ะ
หมายเลข 3 - เป็นช่องให้เราใส่รหัสสี เรียงตามคำอธิบายเลยค่ะ สามารถกดปุ่มสีรุ้งข้าง ๆ เพื่อเลือกสีได้นะคะ
หมายเลข 4 - เป็น preview scrollbar ที่เราเปลี่ยนนั่นเอง ดูว่าใส่สีแล้วออกมาเป็นยังไง
หมายเลข 5 - ส่วนสำคัญเลยค่ะ เป็น CSS Code ที่เราต้องนำไปใช้นะคะ

เราไม่จำเป็นต้องใส่สีให้ครบทุกช่องนะคะ ใส่แค่บางช่องก็ได้ หลังจากที่ได้สี scrollbar ที่เราต้องการแล้ว ให้ดูตรงหมายเลข 5 ในรูปค่ะ copy code ตั้งแต่ body{ ถึง } นะคะ อย่างของเจนเนสซ่าจะได้ code ออกมาแบบนี้ค่ะ

body {
scrollbar-base-color: #F2BACE;
scrollbar-arrow-color: #666666;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
}

จากนั้นกลับมาที่บลอคค่ะ แล้วไปที่ "แก้ไข CSS ด้วยตัวเอง" วาง code ที่ได้ลงไปได้เลยค่ะ แล้วก็กด Save แค่นี้ก็ได้ scrollbar ในแบบของตัวเองแล้วค่ะ ส่วนของเจนเนสซ่าเป็นแบบนี้...

Jennessa's Scrollbar (^^)V

ใครเปลี่ยนเป็นสีอะไร อย่าลืมทิ้งคอมเมนต์ไว้นะคะ เจนเนสซ่าจะตามไปดูซะหน่อย (^^)V

Tags: color changer, css, design, scrollbar, theme87 Comments

=A=) อูววววววววว ยอดไปเลยจ้า

#1 By ★~MεRmДGΣ◎เงือกบอมบาเย่~★ on 2007-04-19 22:25

แจ่มจ๊า

ยอดเยี่ยมกระเทียมดอง

#2 By bentie~ on 2007-04-19 23:12

ดีจังค่ะ ขอบคุณนะคะ

#3 By นู๋ส้มเขียวหวาน [ MV - SONG - LYRICS ] on 2007-04-19 23:27

ขอบคุณมากๆค่า
เอาไปลองเปลี่ยนเล่นมั่งดีกว่า อิอิ

#4 By > Hanabusa on 2007-04-19 23:35

ขอบคุณมาก ๆเลยจ้า...

ลองเอาไปทำดูเรียบร้อย ..

#5 By ' ปลาทอง ' ตัวโต on 2007-04-20 00:04

อุ้ววว เยี่ยมเลยๆ ไว้ถ้าเปลี่ยนสีแล้วจะเอาผลมารายงานนะคะ ขอบคุณค่า

#6 By maebin on 2007-04-20 00:05

ว้รออัพใหม่T^T
อยากงดงามเเบบนี้บ้างเนะ T^T
ขอบคุนที่ไปเยี่ยมค่ะ

#7 By ~PeNox* on 2007-04-20 00:10

ว้าว เทคนิคนี้เจ๋งไปเลยครับ

#8 By เจ้าชายน้อย on 2007-04-20 00:17

ว้าว ดีจังเลย ต้องเก็บลิงค์เอาไว้ซะแล้ว ขอบคุณครับ

#9 By ลีเวด = หม่าว = ^-w-^ on 2007-04-20 00:29

ทำไมดีจัง ทีตอนเราทำ(ตอนงงๆ)ไม่เจอ

#10 By [ i ]Rin on 2007-04-20 01:15

เข้ามาขอบคุณคะ แจ่ม......จริงๆ

#11 By หนูกระปุกตั้งฉ่าย on 2007-04-20 08:51

>[]< ขอบคุณมากเลยคะ
เจ๋งไปเรยหงิ ฮิๆ

#12 By SKYG☆WAZABI on 2007-04-20 09:11

(> <)มาแล้วววว...รอสอนอันนี้มานาน
ขอบคุณมากค่ะ^o^

#13 By (｡_ ｡) Half-Crazy Rabbit⌒★ on 2007-04-20 10:19

ช่วงยังไม่ค่อยว่างแต่งบลอคเลยคะ
แต่ก็ได้เทคนิคดีๆ จากที่นี้ไปเพียบเลย
ยังไงก็ขอบคุณนะคะ

#14 By Evil-minded Angel on 2007-04-20 12:47

ขอบคุณมากๆเลยค่ะ ^^
มีประโยชน์สุดๆไปเลย

#15 By ~himawari~ on 2007-04-20 17:33

เพลงที่ขอมาอัพให้แล้วนะคะ

แต่นู๋ไม่แน่ใจว่าเป็นอัลบั้มแรกอ่ะเป่าอ่ะค่ะ ลองฟังดูนะคะ

#16 By นู๋ส้มเขียวหวาน [ MV - SONG - LYRICS ] on 2007-04-20 19:17

ขอบคุณมากน่ะค่ะสำหรับเคล็ดลับดี ๆ
แบบว่า..สุดยอดค่า

#17 By ~SiN~potteR~ on 2007-04-20 20:51

ขอบคุนค่ะ

ง่ายกว่าอันเก่าที่ทำเยอะเลย

#18 By LOVE. ANGLE . MUSIC . BABY on 2007-04-20 22:21

ตามมาขอบคุณค่า
แล้วก้มาเจอบล๊อคที่ข้อมูลเพียบๆเลย
มีประโยชน์มากสำหรับคนเพิ่งเริ่ม(อย่างข้าพเจ้า 55)
ขออนุญาตแอดนะจ้ะ

#19 By noopnui on 2007-04-21 08:41

หุหุ อันนี้ทำง่ายกว่าเยอะเลยแหะ.. เราเปลี่ยนจากโค้ดเลยอ่าค่ะ..

แอบงง แต่อันนี้ง่ายกว่าจริง ชอบๆ ขอบคุณนะค่ะที่เอามาบอกกัน

#20 By Blog's Chocola-Creamy on 2007-04-21 11:52

ง่ายจริงๆด้วยคะ

แต่ว่ายังไม่ทำดีกว่า เกิดอาการกลัวcssขึ้นมาตั้งแต่ครั้งนู้น ทำแล้วไม่ได้ดั่งใจ

คงต้องรอเวลาอีกนิด

แต่ก้ขอบคุณนะคะ ที่นำมาบอกกัน

#21 By cha_o_chan on 2007-04-21 14:42

blog นี้เจ๋งที่สุดเลย 555 มีประโยชน์มาก ผมก็นั่งทำ scroll bar ตั้งนานก็รำคาญ พอเจอแบบสำเร็จก็ดี สะดวก thx

#22 By @=Noom>>Music Zzz...=@ on 2007-04-22 03:47

พ่อหมีหนีเที่ยวซะนานเลย เลยไม่รู้ว่าน้องเจนนิซ่าอัพไปซะ 2 เรื่องแล้ว

มีประโยชน์ทั้งนั้นเลยครับ ขอบคุณมาก ๆ ที่มีเรื่องดี ๆ ให้เสมอครับ

มีความสุขมาก ๆ นะครับ

#23 By สมมุติว่าเป็นพ่อหมี (222.123.10.29) on 2007-04-22 11:03

บลีอกสวยมั่กๆ มีสอนแต่งบล๊อกด้วย เด๋วแวะมาเยี่ยมบ่อยๆน้า~

ขอบคุณที่แวะเข้าไปเยี่ยมบล็อกเรานะ ^__^ บังเอิญว่ามันยังไม่เสร็จ เหอะๆ ช่างมัน ตอนนี้จะใช้ละ แวะไปเยี่ยมได้น้า

#24 By bxecon on 2007-04-23 21:48

เออ! อีกอย่างขอ Add fev ได้มั้ย?

#25 By bxecon on 2007-04-23 21:50

ขอบคุณทุกคอมเมนต์ค่ะ

Add Favorite ได้เลยค่า ยินดีที่สุด

#26 By เจนเนสซ่า on 2007-04-23 22:33

ขอคารวะอาจารย์สิบจอก

แต่ว่า..ก๊อปโค้ดแล้วเอาไปวางตรงไหนในหน้าแก้ไขครับ
มันไม่มีหัวข้อ body ไม่กล้าวางมั่ว กลัวเจ๊ง

#27 By วัชระ on 2007-04-24 02:24

เอาโค้ดไปไว้ที่ท้ายสุดเลยก็ได้ค่ะ ไม่ต้องกลัวเละ เละก็ลบออก แค่นี้เอง

#28 By เจนเนสซ่า on 2007-04-24 12:31

สีหวานแหววจิงๆ นะ jennessa

ของเราต้องสีแดงเท่านั้นถึงจะสะใจ

#29 By naruto (203.170.231.230 /172.16.58.36) on 2007-04-24 18:24

มีของให้แต่งให้เล่นอยู่เรื่อยๆ เลย

ชอบมากๆ เลยค่ะคุณเจเนสซ่า

เหมาะกับมือใหม่แต่บล็อกอย่างข้าน้อยอย่างยิ่ง
ทำแล้วสนุก มีความสุข
อิอิ ความชอบส่วนตัว (ที่ต้องฝึกฝนอีกเยอะ

)

ขออนุญาติเก็บลิ้งค์ไว้นะคะ
ขอบคุณมากๆ เจ้าค่า จุ๊บๆๆ