泪划痕
Best viewed in Google Chrome

2011年8月2日星期二

更换Scrollbar颜色/背景图片 (给9人)

因为很多人问过@@ 所以只好筛选放出4个来而已,见谅-_-

---------------------分割线--------------------Photobucket


第一款 = 有颜色的scrollbar
第二款 = 有背景的scrollbar

 ---------------------分割线--------------------Photobucket
如上图,更换scrollbar

信息中心 - 设计 - 修改HTML


CTRL+F  ]]></b:skin>

 ]]></b:skin> 上面添加以下一款代码。
第一款 = 有颜色的scrollbar


::-webkit-scrollbar {
    height: 12px;
width: 15px;
background: #FFFFFF;
    }

::-webkit-scrollbar-thumb {
    background: #000000;
}

第二款 = 有背景的scrollbar



::-webkit-scrollbar {
    height: 12px;
width: 15px;
background-image:url(图片背景网址);
    }

::-webkit-scrollbar-thumb {
background-image:url(图片背景网址);
}

添加了后会像下图


 ---------------------小提示--------------------Photobucket
如上图所示,
粉色字体 = 粉色箭头的背景
青色字体 = 青色箭头的背景

160 道泪痕:

→I'm Leng← 说...

谢谢你哦~ 我成功了~ :D

Eline ♥ 说...

Firefox 瀏覽器看到效果的嗎?

Yiyi ♥ 蕙儀 说...

爲什麽任何一個code放在 ]]> 都是顯示不到效果的? >< 你是否可以幫忙我更改?

独泪 说...

→I'm Leng←
不客气^^

Eline ♥
貌似看不到地说@@ 不清楚,因为我用的是google chrome =)

Yiyi ♥ 蕙儀
哦,确定放对位置了吗?代码是在放在上面哦。而不是下面哦……
如果还是不行的话就升我为“管理员”吧 =)
替你弄看 =)
email:dl_dulei@hotmail.com

廷eN~ 说...

楼主 不行 =[

WeiiWeii ♥ 说...

请问一下,,为什么我的scrollbar会有2个的?要怎样才弄弄走??

Hai Ting 说...

我弄不到耶 TT

[永远]™ 说...

请问你现在用着的是第一款还是第二款呢 ?

独泪 说...

廷eN~ ,Hai Ting
只有google chrome浏览器才看到效果的哦
不好意思忘了说 =)

WeiiWeii ♥
嗯,你可以放在你的博客看看效果吗,不是很清楚地说……
是不是放多代码了 @0@?

[永远]™
我用的是第一款哦 =)

[永远]™ 说...

可是我之前放的第一款 .
只有长方形罢了 , 怎样改形状 .
还有它的框比较深的 , 里面比较浅的 .
怎么换呢 ?
请教 , 请教 ><
感激不尽 x)

Hui Jie 说...

为什么我的是长方形的??

独泪 说...

[永远]™
哦……好好~会尽快写给你 =)

Hui Jie
因为要添加形状要另加代码哦 =)

Jʋsт-ғlʏғιsн 说...

我弄到了^-^
可是怎么放另外一种形状呐?o.0

WeiiWeii ♥ 说...

我不会弄><
你进去我部落看看为什么会这样可以吗??
http://weiiweii96.blogspot.com/

sheryl ' sw 说...

弄不到也 ~ D:

WeiiWeii ♥ 说...

可以了 :D
谢谢你 :)
我弄到了 ^^

独泪 说...

Jʋsт-ғlʏғιsн
要另加代码的哦 =)
会尽快发的 =)

sheryl ' sw
是不是放错位置了说@@

WeiiWeii ♥
哈哈不客气xDD

WeiiWeii ♥ 说...

我想问吖..你的back to top是怎样弄它顺顺的上去的?我的是一按就直接到上面了..><

uyuki 说...

好的(:谢谢你嗯!~\(≧▽≦)/~

独泪 说...

WeiiWeii ♥
http://dulei-mylife.blogspot.com/2011/08/scroll-to-topjiayibao.html
这里有你要的教程哦 =D祝你成功^^

uyuki
哈哈,不客气哦 ^^

WeiiWeii ♥ 说...

我成功了 :D
谢谢你 :D
希望你可以弄多点教程 XD

ling ♥ 说...

我用 google chorme 看不到也TT

WeiiWeii ♥ 说...

对不起><我又打扰你了/.\我想问 为什么我把我blog的歌用SCM播放器它会多出一个scrollbar?

独泪 说...

ling ♥
@@是不是放错位置了呢@@?

WeiiWeii ♥
没关系,哈哈,你说的scrollbar是他的目录吗@@?
可以setting的哦,或许是你弄到让他有目录得说才有scrollbar =)

WeiiWeii ♥ 说...

就是旁边那个拉上拉下的,,我一用SCM播放器就会有多一个拉上拉下的出来..酱要怎么弄掉?

独泪 说...

你说的拉上拉下是不是scm player的song list 呢@@?
所以才会多出一个scrollbar =)

+惠仪+ 说...

cann't..

Etsuko . ♥ 说...

谢谢 , 成功了 . :D

曉草 说...

不行==

独泪 说...

Etsuko . ♥

不客气^^

曉草,+惠仪+
只有google chrome 看到效果 :)

XiaoLe ` YL 说...

做莫我弄不到的?! )=

Hui Jie 说...

独泪:要加什么代号呀?

→I'm Leng← 说...

如果要别的形状的代码你发了吗?? C:

独泪 说...

XiaoLe ` YL
你的是google chrome 吗@@?
有没放错位置得说@@?

Hui Jie
就快了就快写那篇教学了。

→I'm Leng←
嗯嗯,要发出来了 xDD

WeiiWeii ♥ 说...

应该是吧..可是还是弄不到..每次一用SCM播放器就会多一条出来><

倩宁 说...

我弄不到叻 @@
我用的也是google chrome
可是形状不是第一款叻 ??
那个教学写了出来吗 ??

独泪 说...

WeiiWeii ♥
其实我不清楚scm播放器@@因为我没用过地说,或许可以调整的,可以到setting看看 =) hide list

倩宁
ctrl+F 找 ]]>
在他上面放那个代码 =)

倩宁 说...

放了 ><
可是他只是一个长方形咯
不是第一款那个窝
帮我弄弄好吗 ??

WeiiWeii ♥ 说...

没关系=]]我也不会弄hide list><
我就用着你这个播放器 :D

-- ♡ мš 小仪 ♥ -- 说...

泪:我放了第一款的... 但是不能... 你可以告诉我是什么问题吗... 谢谢

独泪 说...

倩宁
哦,我的这种要添加代码的 =)
教学就快发了~

WeiiWeii ♥
哦,原来如此啊,哈哈xD

-- ♡ мš 小仪 ♥ --
ctrl+F 找 ]]>
把代码放到上面看看有没有效果哦 =)

-- ♡ мš 小仪 ♥ -- 说...

嗯... 有了.. 如果我要换形呢?

独泪 说...

要添加代码的哦,会写给你 =)

-- ♡ мš 小仪 ♥ -- 说...

谢啦 ^^

倩宁 说...

我等你哦 ><
嘻嘻 :D

fαηg τιηg__♥ 说...

拿走了 :P
谢谢你的教程 :D

地鼠 说...

不能啊=[
是否能帮我弄呢?

→ Seateng ← 说...

怎样换形状吖 ? ;(

说...

我弄不到耶~
能不能帮我弄啊:]

Chico Jimmy 说...

我用Chrome都看没有 ? :(

WeiiWeii ♥ 说...

嘻嘻:) 请问你有那个在帖子按了赞然后下面会出现按赞人得FB照片的吗?

Ashley ♥ 说...

如果要放形状要添加什么代码呢?

说...

谢谢丫~~找到了 ><

Viicky Yuna ♥ 说...

要怎麼弄跟你一樣的scrollbar ?;)

独泪 说...

-- ♡ мš 小仪 ♥ --
哈哈,不客气 xDD

倩宁
好的啊@@尽快了 xDDD

fαηg τιηg__♥
哈哈,不客气地说 xDDD

地鼠
ctrl+F 找 ]]>
在他上面放那个代码就会有效果了哦 =)

→ Seateng ←
嗯,那个教程就快写了,到时通知你~


ctrl+F 找 ]]>
在他上面放那个代码就会有效果了哦 =)

Chico Jimmy
ctrl+F 找 ]]>
在他上面放那个代码就会有效果了哦 =)

WeiiWeii ♥
嗯,教程有写过哦,可以去找找地说 X)
已经分类好了,祝你成功^^

Ashley ♥
教程就快发了^^


好的啊 ^^

Viicky Yuna ♥
教程就要发了,再发一篇就到那个教程了 ^^

Ashley ♥ 说...

好的 期待!謝謝 =D

独泪 说...

haha,不客气^^

XiaoLe ` YL 说...

嗯 对

应该没有吧 )x

独泪 说...

ctrl+F 找 ]]>
试试把代码放到 ]]> 上面 =)

Welcome to my blog =) 说...

教程出了吗?

独泪 说...

唔,你是说更换scrollbar形状的教程吗@@?
已经出了哦 =)

*~┊寳唄メ琦♥ 说...

haha,,,淚!
無比感謝您的教程呢^^.
成功了~

独泪 说...

*~┊寳唄メ琦♥
哈哈,不客气地说 xDD
恭喜成功啊 xD

▷яαιиιɛ ғαям◁ 说...
此评论已被作者删除。
▷яαιиιɛ ғαям◁ 说...

编辑模板内容。 了解详情
我们无法保存您的模板。

请更正以下错误,然后再次提交您的模板。
ID 为 HTML23 的窗口小部件发现了不只一个。窗口小部件 ID 应是唯一的。

以上的是什么意思><
可以帮帮我吗..??:]

独泪 说...

1.代码放错位置
2.代码错误

所以保存不到模板 =)

代码记得放在 ]]上面 =)

Slyvia_滴_blogger♥ 说...

请问教程发了吗? :)

Shirley Chin雪丽 说...

你的scrollbar是有pattern的....我弄出来是正方形的~~~要怎样弄你那种有形状的啊?? 麻烦到你的话不好意思蛤 >< and.. Thxss =)

独泪 说...

Slyvia_滴_blogger♥
发了 =)
看这里
http://dulei-mylife.blogspot.com/2011/09/scrollbar.html

Shirley Chin雪丽
已经发了这个教程,就在这里 =)
http://dulei-mylife.blogspot.com/2011/09/scrollbar.html

Shirley Chin雪丽 说...

Thxss yar ♥

独泪 说...

welcome <3

♥尐猪♥ 说...

为什么我的没有的???

独泪 说...

ctrl+F 找 ]]>
有两个
一个是 ]]> ,一个是]]>
把代码放到 ]]> 上面

♥尐猪♥ 说...

我弄不到,可以教我吗???
=(

独泪 说...

你的浏览器是 firefox么@@?

♥尐猪♥ 说...

嗯....怎么不能吗???

Jelly-Janice 说...

不能...请问管理员是Follow吗?

Xuan Cai Xuan 说...

不会弄耶 =((

独泪 说...

♥尐猪♥
对,没有效果,google chrome才有效果

Jelly-Janice
唔,这个是 scrollbar哦,就是旁边那个滚动条 :)

Xuan Cai Xuan
唔,不明白哪一个步骤的可以问 :)

Xuan Cai Xuan 说...

你说的 (图片背景) 是? >.<

独泪 说...

http://4.bp.blogspot.com/-vXJxInMLn0M/Tje16cpHHII/AAAAAAAAD_o/VdU8yCQxDiA/s1600/2.jpg

斑点那个就是“图片”来的,可以做成 scrollbar背景 :)

Shinn Wei 说...

use:)

❤ Th@t's Mii M.TC ❤ 说...

我还是弄不到~

Xuan Cai Xuan 说...

成功喇 !!^__^
多谢 =P

独泪 说...

Shinn Wei
k,谢通知 ^^

❤ Th@t's Mii M.TC ❤
唔,是不是浏览器问题,firefox的浏览器看不到效果地说 :)

Xuan Cai Xuan
不客气,恭喜成功 ^^

ms-babyying 说...

我弄了它的那些字出现在上面 :(
你能帮我弄吗?

独泪 说...

ctrl+F 找 ]]>
有两个
一个是 ]]>skin的 ,还有一个是]]>
把代码放到 ]]> 上面 就可以了 =)

ms-babyying 说...

还是不行 :(

ZhiYu Lim 说...

想弄...

可是怎麼Preview 看 Nav bar 上面有一堆字啊 =(

独泪 说...

ms-babyying
唔,你是firefox么,firefox看不到效果地说

ZhiYu Lim
ctrl+F 找 ]]>
有两个
一个是 ]]>skin的 ,还有一个是]]>
把代码放到 ]]> 上面 就可以了 =)

ZhiYu Lim 说...

謝謝樓主哦!! =)

成功了^^

ms-babyying 说...

google的

我懂了
谢谢泪 ,,不好意思麻烦到呀 ^^

独泪 说...

ZhiYu Lim
不客气,恭喜成功了 ^^

ms-babyying
哦,原来如此,好的,哈哈不会啦 XDDD ^^

Jelly-Janice 说...

意思是,管理員是甚麼意思?

還有,不能...T^T

独泪 说...

唔,你说不能什么地说
管理员就是邀请其他人在你博客发帖,设计等等的

YYeeng 说...

感激不盡,♥♥♥

♡ AℓαηιƧ ♡ 说...

爲什麽還是不可以啊啊啊
我用google的咧~
navbar還是出現一堆字……T^T

Yuu ♥ 说...

招你说的去弄还是弄不到捏 ><

jiamung 说...

本来成功的~ 可是后来又不能了
只是什么问题吗?

wenwen 说...

獨淚,我也是弄不到~~~
放了按了預覽...就變黑色了 /.\

αн ϰιи 说...

楼主,有网址吗第2款的

мs .ιпsапз cici 痴痴 说...

xie xie ni le >.< zhong yu hui le :DD

独泪 说...

YYeeng
哈哈,不客气 ^^

♡ AℓαηιƧ ♡
ctrl+F 找 ]]>
有两个
一个是 ]]>skin ,一个是]]>
把代码放到 ]]> 上面

Yuu ♥
ctrl+F 找 ]]>
有两个
一个是 ]]>skin ,一个是]]>
把代码放到 ]]> 上面

jiamung
怎么说不能了,是不是换了浏览器,firefox是没有效果的

wenwen
唔,变黑色的 scrollbar么,那就成功了哦,只需要更换颜色就好了 =)

αн ϰιи
可以到谷歌找找背景 =)~

мs .ιпsапз cici 痴痴
不客气。恭喜会了啊 ^^

妮妮 ♥ 说...

抱走了 ^^

独泪 说...

谢谢通知 ^^

Yuu ♥ 说...

放了然后勒?

ღ﹏ Xιιασ新 sнιп cнαп ﹏ ღ 说...

谢谢你哟` =))

Kristy JU 说...

为什么弄不到??

Sєcяєt Jєяєɴɴє ♥ 说...

我懂不到啊 ><
放的位置没放错啊 :'(

αн ϰιи 说...

哦,谢谢^^

独泪 说...

Yuu ♥
看看有没有效果才保存阿

ღ﹏ Xιιασ新 sнιп cнαп ﹏ ღ
不客气 ^^

Kristy JU
ctrl+F 找 ]]>
有两个
一个是 ]]>skin ,一个是]]>
把代码放到 ]]> 上面

Sєcяєt Jєяєɴɴє ♥
唔,懂不到@@?
如果是没效果的话,可以

ctrl+F 找 ]]>
有两个
一个是 ]]>skin ,一个是]]>
把代码放到 ]]> 上面 :)

αн ϰιи 说...
不客气^^

fei❤ 说...

弄到了_ ^^

谢谢你:D

chien_leng =D 说...

hmm .. 我弄不到耶 ><
可以帮我吗 ??

Lǒvè U 4êver!! ♥ Meraine Ying♥ 说...

我想问下`

为什么我ctrl+f没东西出现的??><

Ah Show 说...

我弄不到>< 幫我可以嗎??

QianQian 说...

我想问下,弄好了的不是想图一样的?[我弄得是第一款]
他是四四方方的,没有圆圆的感觉-.-
是不是HTML那边要加东西?
帮忙看下 :) 谢谢 :D

QianQian 说...

好了,我弄好了..谢谢:)

shuen.. 说...

我的弄不到>< 他只出现一行字在最高/.\

Lavine (◕‿-) 说...

blog skin是怎样换scrollbar的?可以教我吗?

錒薇、=D 说...

换不到呢、:(
那个代号出现在最高处而已、=(
教我、=[

Han 说...

可以咯!谢谢^^

Shabu 说...

为什么我的是google chrome却还是不行呢?

+|Ms.Valentine|+ 说...

拿咯~很美:)

Ms Unaier♥优萘儿 说...

弄不到 TT

S L ♥ 说...

怎么弄不到的 ? :(

Juzxuan 说...

淚.. 我的SCROLLBAR 突然多了一條線 怎麼辦 /.\

×欧涵_铷× 说...

那个图片的背景要在哪里找?

~Jerry 亿~ 说...

我也弄不到~

♡——越简单越幸福——♡ 说...

我不会·~

Alice璺♀ 说...

弄不到

Ah Bbi 说...

弄到了 谢谢^^

公主殿下 说...

拿走了!谢谢^^

ntk95 说...

带走了=D

XiaoMui ♥ 说...

怎么弄 scroll bar 的 size 小一点 ?

暁俐 说...

不行~弄不到的

xʋαи 说...

我要弄像pink colour的那样~><"可是失败了...形状是长方形....不喜欢...>.<"

♥♥weini_bibi♥♥ 说...

为什么我弄不到的~可以帮我么?拜托~~

【我のblog】 说...

拿走了

紫微 说...

还有什么颜色??

殷血幽灵 说...

谢谢~我弄了~~^^

Miss'尛呆 说...

代碼全部弄在添加HTML裡的CTRL+F了
然後按什麼??@@

jane lim 说...

弄不到。。。><
还有请问要怎样弄回原版的模板呢??因为我可能不小心弄错了所以才弄不到的。。。

我就是我 獨一無二的我 说...

弄不到叻 ...... ><

黄沅琦 (╯▽╰) ♥ 说...

第一次可以第二次过后就不能了 @@ 帮办我啊~~

xiaoyii 说...

颜色的code哪里找><?

≮琪⌒子≯ 说...

没有反应 >_<

Andy_Winnie 说...

成功了,谢谢:)

灰色的天空 说...

怎样弄都是黑白色的 T^T

S-Suki 说...

我会了 谢谢你 :)

N鬼鬼 说...
此评论已被作者删除。
⊹ 艾莓子 ⊹ 说...

为什么我放第一款的粉红色,可是变成了黑色四方格的???

KaiXin 说...

⊹ 艾莓子 ⊹:因为你没有换颜色

I M~Yun 说...

我的Blog第一次有效果,然后刷新后就变成普通的了,为什么会这样?

小梦 说...
此评论已被作者删除。
小梦 说...

泪姐姐,我找不到 ] ]>< / b: skin > ——

很想做那个…滑行移动的分页图片,可是也找不到 /*header 和 body} ... ((我很笨 T^T

๑۩۞۩๑ ღχǐìασ χμаπ ๑۩۞۩๑ ღ 说...
此评论已被作者删除。
Yivoon Ong 说...

亲,按ctrl 没有 ] ]>< / b: skin > 呢。。。求解

沉睡の小孩 说...
此评论已被作者删除。
Ring Lau 说...

抱走谢谢

Ring Lau 说...

抱走谢谢

发表评论