来一些方便的小操作：博客园（cnblog）自定义界面

可以做点什么呢？

例如：

或者：

 

 目录：

1. 　　侧边栏分享功能
2. 　　侧边工具栏
3.        访问统计
4. 　　RevolverMaps
5.  　   背景更换
6.         网页天气插件

　　

　在实现这些功能之前，需要具备一些的css和js的知识。推荐一篇大佬写的很清晰的手把手教学：【详细图解】一步一步教你自定义博客园（cnblog）界面

1.侧边栏分享功能

将下面的代码复制到侧边栏公告中

代码：

对这个风格不满意可以自行搜索：百度分享按钮

定制自己满意的样式。

2.侧边工具栏

博主与访客可以看到不同的工具栏

 

 

在侧边公告栏中加入以下代码：

< script >
//侧边分享栏
window._bd_share_config = {
    "common": {
        "bdSnsKey": {},
        "bdText": "",
        "bdMini": "2",
        "bdMiniList": false,
        "bdPic": "",
        "bdStyle": "0",
        "bdSize": "16"
    },
    "slide": {
        "type": "slide",
        "bdImg": "3",
        "bdPos": "right",
        "bdTop": "100"
    }
};
with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)]; 



    
        
首页
    
    
        
评论
    
    
        
TOP
    

加入页面后，访问页面的时候能够随机显示其中的图片，如果要更换怎么办，来个button吧！

1 
2 <input type="image" id="Uright" src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png" onmouseover="this.style.top='10px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132044282-1070510381.png' " onmouseout="this.style.top='-55px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png' " onclick="ChangePicture()" style="top: -55px;">

6.网页天气插件

在心知天气自定义一个喜欢的风格：

将生成的JS代码放入页脚

 OK！感觉界面好看了一点呢！

 

 大佬甚至禁用模板CSS，自己DIY整个博客页面，不过在熟悉CSS和JS之后，我们也能改变界面的一些布局。

 推荐几个dalao的文章：

博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)

详谈如何定制自己的博客园皮肤

博客园美化手记——CSS javascript html

 

欢迎在评论区留言提问！

 

转载于:https://www.cnblogs.com/evidd/p/8794428.html