『BLOGGER美化』自定义特别的滚动条[BS]

原版的滚动条会太单调，有时配搭不上博客的颜色。

所以 更 换 了这些 滚 动 条 ，心情会特别好一些。

推荐Chrome浏览器的最佳效果。

--------------------------------------------------------------------------

Highlight,复制(Ctrl+C)框内的代码。

模板 > 修改模板HTML。

键盘寻找(Ctrl+F)，“body {”。(BT:]]></b:skin>)

在“body {”的上面，把框内的代码，paste(Ctrl+V)进去。

“保存模板”。

串烧型 I

::-webkit-scrollbar { width: 9px; height: 7px; } ::-webkit-scrollbar-track-piece { background-color: #999; border: 4px solid #FFF; } ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { background-color: #FFE2E5; border: 1px solid #FFF; }
 background-color: #FFE2E5;

#FFE2E5是颜色代码，上图PINK色的部分。

串烧型 II

::-webkit-scrollbar {

width: 9px;

height: 7px;

}

::-webkit-scrollbar-track-piece  {

background-color: #B2B2B2;

border: 4px solid #FCFCFC;

}

::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {

background-color: #999;

border: 4px dashed #FCFCFC;

}

吧4px dashed改去5px dotted

简单型

::-webkit-scrollbar { height: 12px; width: 10px; background-image: url(http://i48.tinypic.com/r86yq9.jpg); } ::-webkit-scrollbar-thumb { background-image: url(http://i49.tinypic.com/2ijmck5.jpg); -webkit-border-radius: 0ex; -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.75); } ::-webkit-scrollbar-corner { background: #transparent}"

 ::-webkit-scrollbar { height: 12px; width: 10px; background-image: url(http://i48.tinypic.com/r86yq9.jpg); };

http://i48.tinypic.com/r86yq9.jpg是图片网址，上图浅灰的部分。

 ::-webkit-scrollbar-thumb { background-image: url(http://i49.tinypic.com/2ijmck5.jpg);

http://i48.tinypic.com/r86yq9.jpg是图片网址，上图深灰的部分。

如果要和我这个blog一样的→

在线型

::-webkit-scrollbar { width: 10px; height: 10x; } ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { height: 10px; width: 10px; display: block; background: #fff; border: 1px solid #dedede } ::-webkit-scrollbar-track-piece { background-color: #fff; } ::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal { background-color: #D8D8D8; border: 1px dotted #dedede }

参考：