目录 美化方法论简介 准备工作 js权限申请 如何模仿一个博客园的自定义风格(样式css+动态效果js)? markdown样式自定义 在页面顶部添加"自定义搜索"功能 在页面顶部添加"音乐播放器"(Flash)播放背景音乐 在页面顶部添加"Fork me on Github"图标 为导航栏设置渐变背景色 在公告栏添加滚动文字 在公告栏加入自己的社交网络账号 - 图片链接 在公告栏添加一个能旋转的rss图标 在公共栏添加"小人时钟"(Flash) 在公共栏添加"站点统计"功能 在公告栏中加入"自定义搜索"(PopUp弹窗) 页面底部添加"回到顶部" + "收藏" + "快速评论"功能 "自动移动的目录"功能 改进评论的显示样式 在公告栏添加"友情链接" "博客签名"功能 禁用页面的"选中复制"功能 不显示底部广告 修改导航栏(修改部分链接的文字 + 增加下拉菜单) 微博秀的嵌入(支持http/https访问) 分享组件的嵌入(支持http/https访问) 打赏功能 复制文字 自动加版权 隐藏博文右下角的"反对" A呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点支持或关注本人喔~ 美化方法论简介 一般而言，需要选一个默认的skin，然后在该基础上调整。 官方介绍： 博客皮肤模板 http://skintemplate.cnblogs.com/ 官方文档 - 【博客园skin开发文档 】: https://docs.qq.com/sheet/DZFJDeGVuRW5QRmJa 宽屏模版： SimpleMemory Minyx2_Lite lessIsMore BlueSky 博客园布局的组成及其对应关系: 准备工作 首先你得有个cnblogs博客 打开 博客后台管理 申请js权限 在博客皮肤选项卡中将博客皮肤设置为： LessIsMore 将 页面定制.css 复制到 页面定制CSS代码 代码框内 将 页首.html 复制到 页首Html代码 代码框内 将 页尾.html 复制到 页脚Html代码 代码框内 保存，即可用 附源码: yanglr/Beautify-cnblogs: Beautify-cnblogs https://github.com/yanglr/Beautify-cnblogs 欢迎fork或star~ js权限申请 登陆后依次点击“我的博客” → “管理” → “设置”，在下拉后找到“博客侧边栏公告”，后方有一个“申请js权限”。 或者也可进博客园园子页面(https://home.cnblogs.com/feed/all/)，发状态@博客园团队，申请开通js权限。 也可发个邮件到contact@cnblogs.com申请js权限。 申请时内容模板已为你备好: 尊敬的博客园管理员： 本人请求申请开通js权限，希望能够把博客修饰的漂亮点，点缀自定义js插件效果，希望管理员可以批准，多谢~ 提交完申请，会弹出提示: JS权限申请已提交，待审核。 如何模仿一个博客园的自定义风格(样式css+动态效果js)? 模仿一个cnblogs的全局css，只需打开Chrome浏览器，按下F12，找里面的skin css和custom css，例如： 补充完整前缀：http://www.cnblogs.com，使用ref将该两个css引用到自己的博客中，即可进行大概样子的模仿，其他部分需要细调。 markdown样式自定义 默认markdown状态下，代码中的字比较小。 /* 文章标题样式(这个不是markdown里的标题) */ #topics .postTitle a { /* color: #169fe6; */ font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-weight: bold; } /* 普通文字样式 */ #cnblogs_post_body p { margin: 18px auto; color: #000; font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 16px; text-indent: 0; } /* 标题样式 */ #cnblogs_post_body h1 { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 32px; font-weight: bold; line-height: 1.5; margin: 10px 0; } #cnblogs_post_body h2 { font-family: Consolas, "Microsoft YaHei", monospace; font-size: 26px; font-weight: bold; line-height: 1.5; margin: 20px 0; } #cnblogs_post_body h3 { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 20px; font-weight: bold; line-height: 1.5; margin: 10px 0; } #cnblogs_post_body h4 { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; font-size: 18px; font-weight: bold; margin: 10px 0; } /* 标题样式设置结束 */ /* 去除双下划线斜体样式 */ em { font-style: normal; color: #000; } /* 无序列表 */ #cnblogs_post_body ul li { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; color: #000; font-size: 16px; list-style-type: disc; } /* 有序列表 */ #cnblogs_post_body ol li { font-family: Georgia,Times New Roman,Times,sans-serif, monospace; color: #000; font-size: 16px; list-style-type: decimal; } /* 超链接 */ #cnblogs_post_body a:link { text-decoration: none; color: #002C99; } /* 引用背景 */ #topics .postBody blockquote { background: #fff3d4; border: none; border-left: 5px solid #f6b73c; margin: 0; padding-left: 10px; } /* 单行代码 */ .cnblogs-markdown code { font-family: Consolas, "Microsoft YaHei", monospace !important; font-size: 16px !important; line-height: 20px; background-color: #f5f5f5 !important; border: 1px solid #ccc !important; padding: 0 5px !important; border-radius: 3px !important; line-height: 1.8; margin: 1px 5px; vertical-align: middle; display: inline-block; } /* 多行代码, 引用 */ .cnblogs-markdown .hljs { font-family: Consolas, "Microsoft YaHei", monospace !important; font-size: 16px !important; line-height: 1.5 !important; padding: 5px !important; } 在页面顶部添加"自定义搜索"功能 css部分： js部分: html部分： 输入 回车搜索 效果图: 在页面顶部添加"音乐播放器"(Flash)播放背景音乐 效果图: 在页面顶部添加"Fork me on Github"图标 页首html需要添加 Fork me on github 效果图见本博客右上角。 为导航栏设置渐变背景色 /* 头部 */ #header { position: relative; height: 280px; margin: 0; background: #020031; background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%); background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353)); background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%); background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%); background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%); background: linear-gradient(45deg,#020031 0,#6d3353 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1); -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2); } 在公告栏添加滚动文字 使用marquee标签即能实现文字的滚动 You will make it! 效果图: 在公告栏加入自己的社交网络账号 - 图片链接 StackOverflow( 406 ⬆) 效果图: 在公告栏添加一个能旋转的rss图标 先将相应的css放入页面定制css或公告栏的css中，然后在后面使用。 #feed_icon { border: #000 solid 2px; display: block; margin: 50px auto; border-radius: 50%; transition: all 2.0s; } #feed_icon:hover { transform: rotate(360deg); } 然后将如下代码贴进公告中~ 效果图: 在公共栏添加"小人时钟"(Flash) 效果图: 在公共栏添加"站点统计"功能 打开网站：http://www.flagcounter.com/ ，无需注册，点击黄色按钮"Get Your Flag Counter"，即可生成嵌入该插件的html代码。 生成的html代码如下： Flag Counter 最后将该代码加入到公告栏的html代码中即能生效。 在公告栏中加入"自定义搜索"(PopUp弹窗) 实现的基本原理: onclick = "window.open()", target = newWindow 代码: 效果图: 页面底部添加"回到顶部" + "收藏" + "快速评论"功能 js部分: html部分： 效果图: "自动移动的目录"功能 代码: ref nav.my.css JavaScript generate contents 效果图: 改进评论的显示样式 这里我索性改成了熟悉的微信聊天的样式。 纯css实现: .blog_comment_body { background: #B2E866; float: left; border-radius: 5px; position: relative; overflow: visible; margin-left: 33px; max-width: 700px; } .feedbackListSubtitle a.layer { background: #B2E866; color: #414141 !important; padding: 2px 4px; border-radius: 2px; } 在公告栏添加"友情链接" cnblogs博客后台提供了"链接"功能，这个就是用来添加友情链接的。 设置方法: 效果图: "博客签名"功能 虽然cnblogs博客后台提供了"博客签名"功能，测试发现IE下不能用，只好改为用JQuery来实现了。 禁用页面的"选中复制"功能 在css中进行相应的设置即可。 /* 禁止页面，选中 复制 */ html,body { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } 不显示底部广告 在css中进行相应的设置即可。 #ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb { display:none; !important } 修改导航栏(修改部分链接的文字 + 增加下拉菜单) css部分: /* 定制自己导航栏的样式 */ #shwtop ul { margin: 0; padding: 0; list-style-type: none; /*去除li前的标注*/ background-color: #333; overflow: hidden; /*隐藏溢出的部分，保持一行*/ } #shwtop li { float: left; /*左浮动*/ } #shwtop li a, .dropbtn { display: inline-block; /*设置成块*/ color: white; text-align: center; text-decoration: none; padding: 14px 16px; } /*鼠标移上去，改变背景颜色*/ #shwtop li a:hover, .dropdown:hover .dropbtn { /* 当然颜色你可以自己改成自己喜欢的，我还是挺喜欢蓝色的 */ background-color: blue; } #shwtop .dropdown { /* display:inline-block将对象呈递为内联对象， 但是对象的内容作为块对象呈递。 旁边的内联对象会被呈递在同一行内，允许空格。 */ display: inline-block; } #shwtop .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } #shwtop .dropdown-content a { display: block; color: black; padding: 8px 10px; text-decoration:none; } #shwtop .dropdown-content a:hover { background-color: #a1a1a1; } #shwtop .dropdown:hover .dropdown-content{ display: block; } 页脚html部分： 效果图: 微博秀的嵌入(支持http/https访问) 参看本人的另一篇文章 当今最全面可用的微博分享组件嵌入方法(亲测2019年2月仍有效) - Enjoy233 即可。 效果图(见本博客左侧公告栏): 分享组件的嵌入(支持http/https访问) 在页脚.html中加入如下代码: 分享到： 效果图: 打赏功能 基于开源插件 tctip-v1.0.3 来实现~ 在页脚.html中插入如下代码即可: 效果图: 复制文字 自动加版权 页首html中加入如下代码: 效果图: 隐藏博文右下角的"反对" 只需在页面的css(设置下的第一个文本框)中加入 .buryit { display: none; } .comment_bury { display: none; } 作者：Bravo Yeung 出处：http://www.cnblogs.com/Enjoy233/ 如果您觉得阅读本文对您有帮助，请点击一下右下方的推荐按钮，您的推荐将是我写作的最大动力！ 版权声明：本文为博主原创或转载文章，欢迎转载，但转载文章之后必须在文章页面明显位置注明出处，否则保留追究法律责任的权利。 --------------------- 著作权归作者所有。 商业转载请联系作者获得授权，非商业转载请注明出处。 作者：Bravo Yeung 源地址：https://www.cnblogs.com/enjoy233/p/10328361.html 来源：博客园cnblogs © 版权声明：本文为博主原创文章，转载请附上博文链接！https://www.cnblogs.com/enjoy233/p/10328361.html