泪划痕
Best viewed in Google Chrome

2011年9月15日星期四

美化scrollbar 滚动条(nicole0504,瑋薇)


×注:教程只限给已更换好scrollbar的博客,还没有更换scrollbar的请看这里
 如图,修化scrollbar的前后对比。
------------------开始-----------------
美化scrollbar形状

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL + F 找 ::-webkit-scrollbar-thumb {

在  ::-webkit-scrollbar-thumb { 下面添加以下一款形状代码。
第 1 款 :
-moz-border-radius: 5px;
border-radius: 5px;

第 2 款 :

-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
-moz-border-radius-topleft: 50px 25px;
border-top-left-radius: 50px 25px;

第 3 款 :
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;

第 4 款 :
-moz-border-radius-topleft: 50px;
border-top-left-radius: 50px;
-moz-border-left-bottomleft: 50px;
border-bottom-left-radius: 50px;

2 为scrollbar添加框框
如图,为srollbar添加框框。(黑色框框那个)

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL + F 找 ::-webkit-scrollbar-thumb {

在 ::-webkit-scrollbar-thumb { 下面添加以下代码。

border: 2.5px solid #000000;

可以自行美化框框:

青色字体 = 框框线条的厚度
粉色字体 = 框框颜色的颜色代码
红色字体 = 框框的线条类型
框框的线条类型如下:




完成后会像下图。


预览 + 保存模板。

76 道泪痕:

【槑愺】 说...

怎么我找你按CTRL + F后找不到 ::-webkit-scrollbar-thumb {的?

独泪 说...

因为你没更换过scrollbar 哦

先看这里 http://dulei-mylife.blogspot.com/2011/08/scrollbar-9.html

才看这部教程 =)

miky 说...

请问下你 你会不会在文章里面放scrollbar?
你可以看看这个blog
http://shuxian0425.blogspot.com/

独泪 说...

好,教学会写 =)

miky 说...

上面这个回我の吗?

独泪 说...

是的 =)

希美 说...

可以幫我弄嗎 ? 我的不能 save ... - -

独泪 说...

唔@@?
你是说按不到那个save那个按钮吗@@?
可能只是暂时性而已哦,我也会遇到这样,
过后就可以save了 =)

希美 说...

已經過了2個月都不能save惡 ...

miky 说...

好好~谢谢你~

N1C0L3~~ 说...

@@我好多年以前的问题 xDD 不过还是谢谢丫 =]

独泪 说...

希美
@_@|||那么严重,是浏览器的问题吗@@?
试试看用其他浏览器save吧,google chrome ,firefox 等等

miky
哈哈不客气~=)

N1C0L3~~
对呀,上个月4号你问的问题,因为有很多教学要写所以慢/_\

希美 说...

我用 google chrome ... ><

佑佑┇丽宜мικσ 说...

thank for teach =)

独泪 说...

希美
用用看IE或者firefox 行不行吧@@ 模板设计器用到么@@?

佑佑┇丽宜мικσ
welcome ^^

倩宁 说...

我做到了 =)
谢谢独泪教学哦 ><

希美 说...

好的 , 模板设计器用到哇. =))

累冰++ 说...

请问一下那个颜色的代号要怎样改?
我不懂那些颜色的代号

独泪 说...

倩宁
哈哈,不客气地说

希美
哦哦,原来如此

累冰++
看看上面页面那里哦,有 “ 颜色代码 ”
可以到那里拿颜色代码 =)

Etsuko . ♥ 说...

take . ;D

独泪 说...

好的啊 :D

希美 说...

internet explorer 也用不到 ... T^T

独泪 说...

/_\ 或许是电脑问题吧,更换了模板保存得到么@@?

希美 说...

怎樣換 ... - -
sry , 煩到你了 .

独泪 说...

登入博客 - 信息中心 - 设计 - 模板设计器

不会 =)

希美 说...

更换模板保存得到吖 .

独泪 说...

希美 说...
此评论已被作者删除。
希美 说...

可以 save 了 , 我拿走咯 , 谢谢你 . =))

独泪 说...

希美
哈哈,好的啊 ^^

-Bwee::비위- 说...

抱走咯 :D

独泪 说...

好的啊^^

莜尛欣 说...

完成了。。。
真的很谢谢你啦^^

独泪 说...

哈哈,不客气 ^^

黑無常✖-♥ 说...

謝謝,我拿走了

独泪 说...

好的,不客气地说 =)

紫柔 ♥ 说...

獨淚 、我的都不行呢 T^T
預覽的時候都沒有畫面 、整頁都是code T^T
哪裡出問題了嗎?

独泪 说...

唔,你更换好了 scrollbar么,这个是给更换好 scrollbar的才美化的哦 =)

布丁 .Pɛɢɢʏ ♥ 说...

谢噜 :)

但是要怎样换 那个的颜色 ?

独泪 说...

唔,你是说什么的颜色 @@?
全部都在 ::-webkit-scrollbar-thumb {
可以修改颜色的 =)

布丁 .Pɛɢɢʏ ♥ 说...

嗯.

弄好了 :)

谢谢呀 :D

Shinn Wei 说...

用了,谢谢你

Xuan Cai Xuan 说...

谢谢 =D

独泪 说...

布丁 .Pɛɢɢʏ ♥
不客气,恭喜成功 :D

Shinn Wei
不客气 ,谢谢通知——

Xuan Cai Xuan
不客气^^

ZhiYu Lim 说...

謝謝教導=)

♥ween♥ 说...

在你这学了很多东东啊;D 超感谢你的♥

chongjianwen_1998 说...

謝謝 =D

独泪 说...

ZhiYu Lim
不客气 ^^

♥ween♥
哈哈,不客气,一起加油 :D♥

chongjianwen_1998
不客气 ^^

錒桀 ッ 说...

抱走 ~

傻猪 说...

谢谢 :)

YYeeng 说...

感激不盡,♥♥♥

Peiyee 说...

谢谢 ^^

Yuu ♥ 说...

到底怎样弄为什么我一直弄不到 :(

αн ϰιи 说...

偷走咯
呵呵
^^

Sing Yee 说...

拿了啦

独泪 说...

錒桀 ッ
好的谢谢通知了啊 ^^

傻猪
不客气 :))

YYeeng
不客气♥♥♥

Peiyee
不客气 ^^

Yuu ♥
你弄了 scrollbar吗,这个只限弄好scrollbar的使用者:)

αн ϰιи
哈哈,尽管偷 ^^

Sing Yee
好的,谢谢通知 :))

~♀FaNny Ch!N♀~ 说...

我换不到哦 @.@ 能告诉我怎么办吗?

独泪 说...

先看这个教程

http://dulei-mylife.blogspot.com/2011/08/scrollbar-9.html

才看,这篇教学 =)

❥藕✖愛伱_伱來愛藕❥ 说...

我拿了^^TQ

fei❤ 说...

拿走了^^

「ι•м 晓琪」 说...

谢谢独泪 :))
我成功了 ^^

shuen.. 说...

我怎样都弄不成功/.\ http://yishuen0420.blogspot.com/
方便的话,留言教教我吧=)

3e v0nn3 说...

感谢感谢! ^^

baka 说...

ishh!keep cant ! /.\ can help me?

+|Ms.Valentine|+ 说...

拿咯:)) <3

Sin Yi 说...

谢谢!!

jing yee 说...

抱走啦~

摩羯亭 说...

谢谢你吖 ~^^

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

弄不到呀... :( 是不是要等的?

私荘志チン 说...

可以了 Thx

jane lim 说...

为什么弄不到叻。。。。

≮琪⌒子≯ 说...

没有 T~T

S-Suki 说...

这个我也弄到了 真是太感谢了 :D

紫云 ♀ 说...

我拿了 :D

秋寒 说...

为什么弄好过后第二天再开的时候就没了??

BII LING 说...

成功了♥ 很喜欢你发的教程 每一个都成功 谢谢你 :D
只是换了新模式 找不到那个扩展窗口小部件模板 旧模式也没有 这样使我很多教程都弄不到 >,< 请问有办法吗 ><

发表评论