初来乍到，算是一个博客园的新人，受了园里许多前辈的启发正在一点点定制自己的小空间。
也希望我的文章能够成为大家diy的启发，就算是抛砖引玉了。效果可以直接在我的博客中看到，所以不另外贴图了。
引入js文件需要先申请js权限，语言诚恳一点几个小时(?)就可以拿到权限了。
我要评论<script type="text/javascript" src="javascrpt文件url"></script><link type="text/css" rel="stylesheet" href="css文件url">html:
<script type="text/javascript" src="此处粘贴js文件的url地址"></script>
蜘蛛网的原作者是github上的
下面的链接是我使用的稍作修改的.js文件，同样的，大家可以自行修改，将文件上传到博客园，再复制url。
html:
<script type="text/javascript" language="javascript">
//setting ico for cnblogs
var linkobject = document.createelement('link');
linkobject.rel = "shortcut icon";
linkobject.href = ".ico文件的url地址";
document.getelementsbytagname("head")[0].appendchild(linkobject);
</script>
.ico文件在线就可以生成的，我是在生成的。
css:
<style>
#back-top {
position: fixed;
bottom: 10px;
right: 5px;
z-index: 99;
}
#back-top span {
width: 150px;
height: 174px;
display: block;
background:url(这里粘贴小按钮的图片url)no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function() {
if ($(this).scrolltop() > 500) {
$('#back-top').fadein();
} else {
$('#back-top').fadeout();
}
});
// scroll body to 0px on click
$('#back-top a').click(function() {
$('body,html').animate({
scrolltop: 0
}, 800);
return false;
});
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
在这个网站选择喜欢的一款拷贝到页首html区就行。
css:
#div_digg {
position: fixed;
top: 380px;
left: 90px;
padding: 10px;
background-color: #ffffff89;
border-radius: 5px 5px 5px 5px !important;
box-shadow: 0 0 0 0px #5f5a4b, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
z-index: 999999;
}
@media screen and (max-width: 1200px)
#div_digg {
position: inherit;
}
#div_digg {
float: right;
margin-bottom: 10px;
margin-right: 100px;
font-size: 12px;
width: 52px;
text-align: center;
margin-top: 10px;
}
.diggit {
background: url(http://images.cnblogs.com/cnblogs_com/alva-rabbit-hole/1351589/o_tumbup2.png) no-repeat;
}
.diggit {
float: left;
width: 58px;
height: 36px;
text-align: left;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
div {
display: block;
}
* {
margin: 0;
padding: 0;
}
#div_digg .diggnum {
line-height: 3.9em!important;
padding-left: 25px;
}
.diggnum {
font-size: 13px;
color: #1d9021;
font-family: verdana;
}
.buryit {
display: none;
}
有参考这篇文章
首先，需要引入一个bootstrap的js文件，文件如下：
接下来就是设置目录锚点的js文件，为了照顾阅读体验，文件也放在下面了，因为这部分没有什么可以diy的地方，所以不在这里贴代码了，文件如下：
最后就是可以自由发挥的css文件：
#sidetoolbar {
position: sticky;
bottom: 50px;
left: 900px;
width: 250px;
height: 440px;
}
#sidecatalog{
background-color: #ffffffe3;
border-radius:5px;
}
#sidecatalog-catalog {
height: 400px;
padding-top: 20px;
padding-bottom: 30px;
overflow-x: hidden;
overflow-y: hidden;
padding-left: 23px;
position: relative;
}
#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-top {
cursor: pointer;
top: 0
}
#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-bottom {
bottom: 0
}
#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-top,#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-bottom {
height: 10px;
left: -5px;
overflow: hidden;
position: absolute;
width: 10px
}
#sidecatalog li {
margin: 0px;
padding: 4px 7px;
text-align: left;
position: relative
}
#sidecatalog li: hover {
background-color: #f5f5f5
}
#sidecatalog-catalog ul .active {
background-color: #f5f5f5
}
#sidecatalog-catalog .active a {
color: #155fad
}
#sidecatalog-catalog a: hover {
color: #519cea
}
#sidecatalog span: first-child {
color: #999;
font-family: arial;
font-size: 14px;
font-weight: bold;
padding-right: 5px
}
#sidecatalog li.h2offset {
padding-left: 45px;
text-indent: -25px
}
#sidecatalog li.h3offset {
padding-left: 90px;
text-indent: -50px
}
#sidecatalog a {
text-decoration: none;
color: #3c3c3c;
font-weight: initial;
}
.sidecatalog-dot {
background: url(http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sidetoolbar.png) repeat scroll 0 -219px transparent;
cursor: pointer;
font-size: 12px;
height: 15px;
left: -10px;
line-height: 12px;
overflow: hidden;
position: absolute;
top: 4px;
width: 6px;
}
#sidecatalog .highlight .sidecatalog-dot {
background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sidetoolbar.png") no-repeat scroll -271px -38px transparent;
height: 13px;
left: -23px;
top: 3px;
width: 18px
}
#sidetoolbar-up {
background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sidetoolbar.png") no-repeat scroll -1px -62px transparent;
border-radius: 2px;
display: block;
height: 45px;
margin-left: 5px;
width: 45px;
outline: 0
}
#sidetoolbar-up:hover {
background: url("http://images.cnblogs.com/cnblogs_com/miangao/1001115/o_o_sidetoolbar.png") no-repeat scroll -74px -62px transparent
}
#div_digg{
z-index: 999;
}
}
大家可以在浏览器里右键控件inspect边调边改，当然不想改直接copy也没问题啦。
css:
.cnblogs-markdown code, .cnblogs-post-body code {
font-family: "source code pro",consolas,menlo,monaco,"courier new",monospace! important;
}
.cnblogs-markdown code, .cnblogs-post-body code{
border: none! important;
}
为了避免css样式被覆盖，所以加上!important以强行提高优先级
html:
<a onclick="用浏览器inspect自己的“关注”按钮得到相应代码" href="javascript:void(0);" class="follow">
<img src="http://images.cnblogs.com/cnblogs_com/alva-rabbit-hole/1351589/o_follow.png" class="item" style="position:relative">
<style>
.follow:hover
.item{animation:updown 300ms infinite}
@keyframes updown
{
0% {top:0px;}
50% {top:4px;}
100% {top:0px;}
}
</style>
</a>
这部分的自定义空间还是很大的，可以尝试其他的@keyframes补间动画。
最后，如果大家觉得有可以改进的地方，欢迎交流！
如对本文有疑问， 点击进行留言回复！！
网友评论