{"id":23496011,"url":"https://github.com/yanglr/beautify-cnblogs","last_synced_at":"2025-06-24T07:39:55.666Z","repository":{"id":70228692,"uuid":"167466911","full_name":"yanglr/Beautify-cnblogs","owner":"yanglr","description":"Beautify-cnblogs博客园样式美化","archived":false,"fork":false,"pushed_at":"2024-12-15T11:29:18.000Z","size":5547,"stargazers_count":70,"open_issues_count":0,"forks_count":35,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T07:07:16.454Z","etag":null,"topics":["cnblogs","cnblogs-theme","front-end","geekplayers","geekzl","markdown","tech-blog"],"latest_commit_sha":null,"homepage":"https://yanglr.github.io/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yanglr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-25T01:47:35.000Z","updated_at":"2025-03-24T09:42:44.000Z","dependencies_parsed_at":"2025-01-15T07:10:00.281Z","dependency_job_id":"b342abb2-e16b-47be-b0e1-5ce94617f4e5","html_url":"https://github.com/yanglr/Beautify-cnblogs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanglr%2FBeautify-cnblogs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanglr%2FBeautify-cnblogs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanglr%2FBeautify-cnblogs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yanglr%2FBeautify-cnblogs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yanglr","download_url":"https://codeload.github.com/yanglr/Beautify-cnblogs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247622985,"owners_count":20968575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cnblogs","cnblogs-theme","front-end","geekplayers","geekzl","markdown","tech-blog"],"created_at":"2024-12-25T04:05:19.484Z","updated_at":"2025-04-07T09:18:25.681Z","avatar_url":"https://github.com/yanglr.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"- [前端小白也能快速学会的博客园博客美化全攻略](#前端小白也能快速学会的博客园博客美化全攻略)\n  * [美化方法论简介](#美化方法论简介)\n  * [准备工作](#准备工作)\n    + [js权限申请](#js权限申请)\n  * [如何模仿一个博客园的自定义风格(样式css+动态效果js)?](#如何模仿一个博客园的自定义风格样式css动态效果js)\n  * [markdown样式自定义](#markdown样式自定义)\n  * [在页面顶部添加\"自定义搜索\"功能](#在页面顶部添加自定义搜索功能)\n  * [在页面顶部添加\"音乐播放器\"(Flash)播放背景音乐](#在页面顶部添加音乐播放器Flash播放背景音乐)\n  * [在页面顶部添加\"Fork me on Github\"图标](#在页面顶部添加fork-me-on-github图标)\n  * [为导航栏设置渐变背景色](#为导航栏设置渐变背景色)\n  * [在公告栏添加滚动文字](#在公告栏添加滚动文字)\n  * [在公告栏加入自己的社交网络账号 - 图片链接](#在公告栏加入自己的社交网络账号---图片链接)\n  * [在公告栏添加一个能旋转的rss图标](#在公告栏添加一个能旋转的rss图标)\n  * [在公共栏添加\"小人时钟\"(Flash)](#在公共栏添加小人时钟(Flash))\n  * [在公共栏添加\"站点统计\"功能](#在公共栏添加站点统计功能)\n  * [在公告栏中加入\"自定义搜索\"(PopUp弹窗)](#在公告栏中加入自定义搜索PopUp弹窗)\n  * [页面底部添加\"回到顶部\" + \"收藏\" + \"快速评论\"功能](#页面底部添加回到顶部--收藏--快速评论功能)\n  * [\"自动移动的目录\"功能](#自动移动的目录功能)\n  * [改进评论的显示样式](#改进评论的显示样式)\n  * [在公告栏添加\"友情链接\"](#在公告栏添加友情链接)\n  * [\"博客签名\"功能](#博客签名功能)\n  * [禁用页面的\"选中复制\"功能](#禁用页面的选中复制功能)\n  * [不显示底部广告](#不显示底部广告)\n  * [修改导航栏(修改部分链接的文字 + 增加下拉菜单)](#修改导航栏修改部分链接的文字--增加下拉菜单)\n  * [微博秀的嵌入(支持http/https访问)](#微博秀的嵌入支持httphttps访问)\n  * [分享组件的嵌入(支持http/https访问)](#分享组件的嵌入支持httphttps访问)\n  * [打赏功能](#打赏功能)\n  * [复制文字时自动加版权](#复制文字时自动加版权)\n  * [隐藏博文右下角的\"反对\"](#隐藏博文右下角的反对)\n\n\u003cbr/\u003e\n\n欢迎访问作者的个人网站: [极客中心](https://yanglr.github.io/)\n\n# 前端小白也能快速学会的博客园博客美化全攻略\n\n**\u003cfont size=6\u003eA呦V，博客园er的自我修养是什么？第一条，别只顾收藏和偷师呀，记得点支持或关注本人喔~ \u003c/font\u003e**\n\n## 美化方法论简介\n\n一般而言，需要选一个默认的skin，然后在该基础上调整。\n\n官方介绍：\n博客皮肤模板 \u003chttp://skintemplate.cnblogs.com/\u003e\n\n\n\n官方文档 - 【博客园skin开发文档 】:\n\n\u003chttps://docs.qq.com/sheet/DZFJDeGVuRW5QRmJa\u003e\n\n\n\n宽屏模版：\n\nSimpleMemory\n\nMinyx2_Lite\n\nlessIsMore\n\nBlueSky\n\u003cbr\u003e\n\n\n博客园布局的组成及其对应关系(下方一图来自于**网络**):\n![common_skin_layout](https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_common-skin-layout.png)\n\n\n## 准备工作\n\n1. 首先你得有个cnblogs博客\n2. 申请js权限\n\n**附该美化过程的github项目:**\n[yanglr/Beautify-cnblogs: Beautify-cnblogs](https://github.com/yanglr/Beautify-cnblogs)\n\n欢迎fork或star~\n\n本博客的所有代码在此github项目的`src`文件夹中~\n\n**源码使用步骤：**\n\n1. 打开 博客后台管理 → “设置”\n2. 在博客皮肤选项卡中将博客皮肤设置为： `LessIsMore`\n3. 将`src`文件夹下的页面定制.css 复制到 页面定制CSS代码 代码框内\n4. 将同一文件夹下的 页首.html 复制到 页首Html代码 代码框内\n5. 将同一文件夹下的 页尾.html 复制到 页脚Html代码 代码框内\n6. 保存，即可见效。\n\n\n### js权限申请\n\n登陆后依次点击“我的博客” → “管理” → “设置”，在下拉后找到“博客侧边栏公告”，后方有一个“申请js权限”。\n\n![Apply_js](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/Apply-js-with-Content.jpg)\n\n或者也可进博客园园子页面(\u003chttps://home.cnblogs.com/feed/all/\u003e)，发状态@博客园团队，申请开通js权限。\n\n也可发个邮件到[contact@cnblogs.com](mailto:contact@cnblogs.com)申请js权限。\n\n\n\n**申请时内容模板已为你备好:**\n\n\u003e 尊敬的博客园管理员：\n\u003e\n\u003e 本人请求申请开通js权限，希望能够把博客修饰的漂亮点，点缀自定义js插件效果，希望管理员可以批准，多谢~\n\n\n\n提交完申请，会弹出提示:\n\n`JS权限申请已提交，待审核。`\n\n剩下的就是耐心等待了，一般来说挺快就会通过。如果设置页面上公告栏标题右侧不存在“申请js权限”，说明已成功开通js权限。\n\n\n\n## 如何模仿一个博客园的自定义风格(样式css+动态效果js)?\n\n模仿一个cnblogs的全局css，只需打开Chrome浏览器，按下F12，找里面的skin css和custom css，例如：\n\n```css\n\u003clink id=\"MainCss\" type=\"text/css\" rel=\"stylesheet\" href=\"/skins/LessIsMore/bundle-LessIsMore.css?...\"\u003e\n\n\u003clink type=\"text/css\" rel=\"stylesheet\" href=\"/blog/customcss/198996.css?v=...\"\u003e\n```\n\n\n\n\n补充完整前缀：\u003chttp://www.cnblogs.com\u003e，使用ref将该两个css引用到自己的博客中，即可进行大概样子的模仿，其他部分需要细调。\n\n\n\n## markdown样式自定义\n\n默认markdown状态下，代码中的字比较小。\n\n```css\n/* 文章标题样式(这个不是markdown里的标题) */\n#topics .postTitle a {\n    /* color: #169fe6; */\n\tfont-family: Georgia,Times New Roman,Times,sans-serif, monospace;\n\tfont-weight: bold;\n}\n \n/* 普通文字样式 */\n#cnblogs_post_body p {\n\tmargin: 18px auto;\n\tcolor: #000;\n\tfont-family: Georgia,Times New Roman,Times,sans-serif, monospace;\n\tfont-size: 16px;\n\ttext-indent: 0;\n}\n \n/* 标题样式 */\n#cnblogs_post_body h1 {\n\tfont-family: Georgia,Times New Roman,Times,sans-serif, monospace;\n\tfont-size: 32px;\n\tfont-weight: bold;\n\tline-height: 1.5;\n\tmargin: 10px 0;\n}\n\n#cnblogs_post_body h2 {\n\tfont-family: Consolas, \"Microsoft YaHei\", monospace;\n\tfont-size: 26px;\n\tfont-weight: bold;\n\tline-height: 1.5;\n\tmargin: 20px 0;\n}\n\n#cnblogs_post_body h3 {\n\tfont-family: Georgia,Times New Roman,Times,sans-serif, monospace;\n\tfont-size: 20px;\n\tfont-weight: bold;\n\tline-height: 1.5;\n\tmargin: 10px 0;\n}\n\n#cnblogs_post_body h4 {\n\tfont-family: Georgia,Times New Roman,Times,sans-serif, monospace;\n\tfont-size: 18px;\n\tfont-weight: bold;\n\tmargin: 10px 0;\n}\n/* 标题样式设置结束 */\n \n/* 去除双下划线斜体样式 */\nem {\n\tfont-style: normal;\n\tcolor: #000;\n}\n \n/* 无序列表 */\n#cnblogs_post_body ul li {\n\tfont-family: Georgia,Times New Roman,Times,sans-serif, monospace;\n\tcolor: #000;\n\tfont-size: 16px;\n\tlist-style-type: disc;\n}\n \n/* 有序列表 */\n#cnblogs_post_body ol li {\n\tfont-family: Georgia,Times New Roman,Times,sans-serif, monospace;\n\tcolor: #000;\n\tfont-size: 16px;\n\tlist-style-type: decimal;\n}\n \n/* 超链接 */\n#cnblogs_post_body a:link {\n\ttext-decoration: none;\n\tcolor: #002C99;\n}\n \n/* 引用背景 */\n#topics .postBody blockquote {\n\tbackground: #fff3d4;\n\tborder: none;\n\tborder-left: 5px solid #f6b73c;\n\tmargin: 0;\n\tpadding-left: 10px;\n}\n \n/* 单行代码 */\n.cnblogs-markdown code {\n\tfont-family: Consolas, \"Microsoft YaHei\", monospace !important;\n\tfont-size: 16px !important;\n\tline-height: 20px;\n\tbackground-color: #f5f5f5 !important;\n\tborder: 1px solid #ccc !important;\n\tpadding: 0 5px !important;\n\tborder-radius: 3px !important;\n\tline-height: 1.8;\n\tmargin: 1px 5px;\n\tvertical-align: middle;\n\tdisplay: inline-block;\n}\n \n/* 多行代码, 引用 */\n.cnblogs-markdown .hljs {\n\tfont-family: Consolas, \"Microsoft YaHei\", monospace !important;\n\tfont-size: 16px !important;\n\tline-height: 1.5 !important;\n\tpadding: 5px !important;\n}\n```\n\n\n\n## 在页面顶部添加\"自定义搜索\"功能\n\ncss部分：\n```css\n\u003cstyle type=\"text/css\"\u003e \n    #auto_div {\n        display: none;\n        width: 257px;\n        border: 1px #74c0f9 solid;\n        background: #FFF;\n        position: absolute;\n        top: 24px;\n        left: 0;\n        margin-top: 15px;\n        color: #323232;\n        /*设置显示在当前页面的上一层*/\n        z-index: 1;\n    }\n \n    .side_search {\n        float: left;\n        position: relative;\n        height: 31px;\n        margin-left: 25px;\n        display: inline-block;\n    }\n \n        .side_search:hover {\n            -webkit-box-shadow: 0 0 3px #999;\n            -moz-box-shadow: 0 0 3px #999\n        }\n \n    .search_input {\n        width: 210px;\n        vertical-align: middle;\n        height: 30px;\n        line-height: 30px;\n        border: 1px solid #999;\n        border-radius: 2px 0 0 2px;\n        padding: 4px 7px;\n        background-color: #fbfbfb;\n    }\n \n    .delete_btn {\n        background: #fbfbfb;\n        margin-left: -6px;\n        border: 1px solid #fbfbfb;\n        border-radius: 0 3px 3px 0;\n        cursor: pointer;\n        display: inline-block;\n        vertical-align: middle;\n        color: red;\n        font-weight: bold;\n        width: 38px;\n        font-size: 25px;\n        height: 38px;\n        padding-bottom: inherit;\n    }\n \n    .search_btn {\n        border-radius: 3px 3px 3px 3px;\n        background: #4d90fe;\n        margin-left: -7px;\n        border: 1px solid #4d90fe;\n        cursor: pointer;\n        display: inline-block;\n        vertical-align: middle;\n        color: #f3f7fc;\n        font-weight: bold;\n        width: 100px;\n        font-size: 18px;\n        height: 41px;\n    }\n \n        .search_btn:hover {\n            background: #1874CD\n        }\n \n    .search_btn2 {\n        border-radius: 3px 3px 3px 3px;\n        background: #F0CB85;\n        border: 1px solid #F0CB85;\n        cursor: pointer;\n        display: inline-block;\n        vertical-align: middle;\n        color: #DC143C;\n        font-weight: bold;\n        width: 100px;\n        font-size: 18px;\n        height: 41px;\n    }\n \n        .search_btn2:hover {\n            background: #DEB887\n        }\n \n    input, button, textarea, select, optgroup, option {\n        font-family: inherit;\n        font-size: inherit;\n        font-style: inherit;\n        font-weight: inherit;\n    }\n\u003c/style\u003e\n```\n\njs部分:\n```html\n\u003cscript src=\"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n    var availableTags = [\n        \"C#\", \"C++\", \"算法\",\n        \"ASP\", \"MySQL\", \"Oracle\",\n        \"HTML\", \"CSS\", \"JavaScript\",\n        \"jQuery\", \"AJAX\", \"微软系列技术\",\n        \"Sublime\", \"Git\",\n        \"Visual Studio Code\",\n        \"Eclipse\",\n        \"C#开发\", \"C++开发\", \"Java开发\",\n        \"PHP开发\",\n        \"Python开发\",\n        \"Web前端开发\",\n        \"Windows Forms\",\n        \"WPF\",\n        \"计算机数学\",\n        \"浏览器插件\",\n        \"软件推荐\",\n        \"算法实践\",\n        \"专业学习\",\n        \"Leetcode\",\n        \"知乎\",\n        \"Bravo Yeung\",\n        \"legege007\",\n        \"enjoy233\",\n        \"数学\",\n        \"内容太长，显示其中的一部分\"\n    ];\n    var old_value = \"\";\n    var highlightindex = -1;   //高亮\n\n    //自动完成\n    function AutoComplete(auto, search, mylist) {\n        if ($(\"#\" + search).val() != old_value || old_value == \"\") {\n            var autoNode = $(\"#\" + auto);   //缓存对象（弹出框）\n            var carlist = new Array();\n            var n = 0;\n            old_value = $(\"#\" + search).val();\n \n            for (i in mylist) {\n                if (mylist[i].indexOf(old_value) \u003e= 0) {\n                    carlist[n++] = mylist[i];\n                }\n            }\n            if (carlist.length == 0) {\n                autoNode.hide();\n                return;\n            }\n            autoNode.empty();  //清空上次的记录\n            for (i in carlist) {\n                var wordNode = carlist[i];   //弹出框里的每一条内容\n\n                var newDivNode = $(\"\u003cdiv\u003e\").attr(\"id\", i);    //设置每个节点的id值\n                newDivNode.attr(\"style\", \"font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;\");\n \n                newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框\n\n                //鼠标移入高亮，移开不高亮\n                newDivNode.mouseover(function () {\n                    if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）\n                        autoNode.children(\"div\").eq(highlightindex).css(\"background-color\", \"white\");\n                    }\n                    //记录新的高亮节点索引\n                    highlightindex = $(this).attr(\"id\");\n                    $(this).css(\"background-color\", \"#ebebeb\");\n                });\n                newDivNode.mouseout(function () {\n                    $(this).css(\"background-color\", \"white\");\n                });\n \n                //鼠标点击文字上屏\n                newDivNode.click(function () {\n                    //取出高亮节点的文本内容\n                    var comText = autoNode.hide().children(\"div\").eq(highlightindex).text();\n                    highlightindex = -1;\n                    //文本框中的内容变成高亮节点的内容\n                    $(\"#\" + search).val(comText);\n                })\n                if (carlist.length \u003e 0) {    //如果返回值有内容就显示出来\n                    autoNode.show();\n                } else {               //服务器端无内容返回 那么隐藏弹出框\n                    autoNode.hide();\n                    //弹出框隐藏的同时，高亮节点索引值也变成-1\n                    highlightindex = -1;\n                }\n            }\n        }\n \n        //点击页面隐藏自动补全提示框\n        document.onclick = function (e) {\n            var e = e ? e : window.event;\n            var tar = e.srcElement || e.target;\n            if (tar.id != search) {\n                if ($(\"#\" + auto).is(\":visible\")) {\n                    $(\"#\" + auto).css(\"display\", \"none\")\n                }\n            }\n        }\n \n    }\n \n    $(function () {\n        old_value = $(\"#zzk_q\").val();\n\n        $(\"#zzk_q\").keyup(function () {\n            AutoComplete(\"auto_div\", \"zzk_q\", availableTags);\n        });\n    });\n \n    function quickdelete() {\n        document.getElementById(\"zzk_q\").value = \"\";\n    }\n \n    function zzk_go() {\n        var n = encodeURIComponent(document.getElementById(\"zzk_q\").value);\n        window.location = \"http://zzk.cnblogs.com/s?w=blog%3AEnjoy233+\" + n + \"\u0026t=\"\n    }\n    function zzk_go2() {\n        var n = encodeURIComponent(document.getElementById(\"zzk_q\").value);\n        window.location = \"http://zzk.cnblogs.com/s?w=\" + n\n    }\n    function zzk_go_enter(n) {\n        if (n.keyCode == 13)\n            return zzk_go(), !1\n    }\n\u003c/script\u003e\n```\n如果需要修改自动完成的下拉选项，修改变量`availableTags`的值即可见效。\n\n\nhtml部分：\n\n```html\n\u003ch1 style=\"margin-left: 570px;padding-top:15px;padding-bottom: 15px; color: #337ab7;font-size: 3em;font-weight: bold;font-style: italic;text-shadow: 1px 0px 0px #1E90FF;\"\u003e  \u003c/h1\u003e\n\u003cdiv class=\"side_search\"\u003e\n    \u003cinput type=\"text\" id=\"zzk_q\" class=\"search_input\" onkeydown=\"return zzk_go_enter(event);\" placeholder=\"输入 回车搜索\" tabindex=\"1\" autofocus x-webkit-speech\u003e\n    \u003cdiv id=\"auto_div\"\u003e\n    \u003c/div\u003e\u0026nbsp;\n    \u003cinput onclick=\"quickdelete()\" type=\"button\" class=\"delete_btn\" value=\"×\" title=\"清空\"\u003e\n    \u003cinput onclick=\"zzk_go()\" type=\"button\" class=\"search_btn\" value=\"本博搜索\"\u003e\n    \u003cinput onclick=\"zzk_go2()\" type=\"button\" class=\"search_btn2\" value=\"园内搜索\"\u003e\n\u003c/div\u003e\n```\n\n\n\n效果图:\n\n![customSearch1](https://files.cnblogs.com/files/enjoy233/customSearch1.bmp)\n\n\n\n## 在页面顶部添加\"音乐播放器\"(Flash)播放背景音乐\n\n先登录网易云音乐网页版，搜索到想要的音乐，然后点击\"生成外链播放器\"即可得到相应的html代码。\n\n![163music_palyer](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/163music_player.bmp)\n\n\n\n**表现形式一：单曲播放** (type = 1)\n\n```html\n\u003cembed src=\"http://music.163.com/outchain/player?type=0\u0026amp;id=26237342\u0026amp;auto=0\u0026amp;height=430\" width=\"100%\" height=\"450\" frameborder=\"no\" marginwidth=\"0\" marginheight=\"0\"\u003e\u003c/embed\u003e \n```\n\n或\n\n```html\n\u003cembed src=\"https://music.163.com/style/swf/widget.swf?sid=26237342\u0026type=2\u0026auto=0\u0026width=320\u0026height=66\" width=\"340\" height=\"86\"  allowNetworking=\"all\" \u003e\u003c/embed\u003e\n```\n\n参数说明：\n\n\u003e 播放器可修改参数：\n\u003e width=100% #自适应宽度, 本博客使用了固定宽度320\n\u003e height=66 #根据自己需要来改\n\u003e sid=26237342 # 此数字是歌曲的ID http://music.163.com/#/song?id=26237342\n\u003e auto=0 # 0表示不自动播放，1表示自动播放\n\n\n\n**表现形式二：列表播放** (type = 0)\n\n```html\n\u003cembed src=\"https://music.163.com/outchain/player?type=0\u0026amp;id=78413764\u0026amp;auto=0\u0026amp;height=430\" width=\"100%\" height=\"450\" frameborder=\"no\" marginwidth=\"0\" marginheight=\"0\"\u003e\u003c/embed\u003e \n```\n\n当然该`url`中的`https:`也可删掉。\n\n![playList](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/163playList.bmp)\n\n\n\n参数说明\n\n\u003e 播放器可修改参数：\n\u003e width=100% # 自适应宽度\n\u003e height=450 # 根据自己的需要修改\n\u003e id=34238509 # 此数字是歌曲列表页的ID, 例如：http://music.163.com/#/playlist?id=34238509\n\u003e auto=0  # 0表示不自动播放，1表示自动播放\n\n\n\n\n将该代码贴进页首html即可见效(如果代码中含有`iframe`，需替换成`embed`)~\n\n```html\n\u003cdiv style=\"display: table; text-align: center; width: 40%; height: 100%;\"\u003e\n\u003cembed src=\"https://music.163.com/style/swf/widget.swf?sid=26237342\u0026type=2\u0026auto=0\u0026width=320\u0026height=66\" width=\"340\" height=\"86\"  allowNetworking=\"all\" \u003e\u003c/embed\u003e\n\u003c/div\u003e\n```\n\n\n\n效果图: \n\n![163music_player](https://files.cnblogs.com/files/enjoy233/163music_player.gif)\n\n\n\n\n\n## 在页面顶部添加\"Fork me on Github\"图标\n\n页首html需要添加\n```html\n\u003cdiv\u003e\n\u003ca href=\"http://github.com/yanglr\" target=\"_blank\" style=\"position: absolute;right: 0;  top: 0; z-index: 100;\"\u003e\n    \u003cimg src=\"http://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_git-right-link.gif\" alt=\"Fork me on github\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n```\n\n效果见[本页面](https://www.cnblogs.com/enjoy233/p/10328361.html)右上角。\n\n\n\n如果想对该图标进行更多颜色或位置的设置，请参考：[GitHub Ribbons - The GitHub Blog](https://github.blog/2008-12-19-github-ribbons/).\n\n\n\n## 为导航栏设置渐变背景色\n\n```css\n/* 头部 */\n#header {\n\tposition: relative;\n\theight: 280px;\n\tmargin: 0;\n\tbackground: #020031;\n\tbackground: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);\n\tbackground: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353));\n\tbackground: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%);\n\tbackground: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);\n\tbackground: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);\n\tbackground: linear-gradient(45deg,#020031 0,#6d3353 100%);\n\tfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);\n\t-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);\n\t-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);\n\tbox-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);\n}\n```\n\n\n\n## 在公告栏添加滚动文字\n\n使用`marquee`标签即能实现文字的滚动 \n\n```html\n\u003cmarquee\u003e\u003ca href=\"#\"\u003e\u003cfont color=\"blue\" size=\"4\"\u003eYou will make it!\n\u003c/marquee\u003e\n```\n\n效果图:\n\n![slide_words](https://files.cnblogs.com/files/enjoy233/slide_words.gif)\n\n\n\n\n## 在公告栏加入自己的社交网络账号 - 图片链接\n\n可以将自己不同社交网络的账号放在同一个span中，然后嵌入到div里，代码如下：\n```html\n    \u003cdiv nowrap align=center\u003e\n        \u003cimg src=\"http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_gzh.png\" width=150 height=150\u003e\n    \u003c/div\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n     \u003ca href=\"http://stackoverflow.com/users/6075331/bravo-young\" target=\"_blank\" class=\"mr5 \"\u003e\u003cstrong\u003eStackOverflow\u003c/strong\u003e\u003c/a\u003e\u003cfont  style=\"color:#BF7158\"\u003e(\u003c/font\u003e\n    \u003cimg src=\"http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_reputation-rp.png\" class=\"mr5\"\u003e\n    \u003cspan style=\"color:#BF7158\" class=\"mr10\"\u003e406 \u003cfont size=4 color=black\u003e⬆\u003c/font\u003e)\u003c/span\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv class=\"c-social\" align=\"center\"\u003e\n\u003cspan\u003e\n    \u003ca href=\"https://github.com/yanglr\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_github.png\" class=\"mr5\" width = 40 height=40\u003e\n    \u003c/a\u003e\n    \u003ca href=\"http://blog.csdn.net/lzuacm\" target=\"_blank\"\u003e\n      \u003cimg src=\"http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_csdn.png\" class=\"mr5\" width = 40 height=40\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.zhihu.com/people/legege007\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_zhihu.png\" class=\"mr5\" width = 40 height=40\u003e\n    \u003c/a\u003e\n    \u003ca href=\"http://weibo.com/546671991\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_weibo.png\" class=\"mr5\" width = 40 height=40\u003e\n    \u003c/a\u003e\n\n\u003c/span\u003e\n```\n效果图:\n\n![socialLinks](https://files.cnblogs.com/files/enjoy233/socialLinks.gif)\n\n对于知乎，可以这样写更详细些：\n```html\n\u003cdiv valign=\"middle\" align=\"left\" bgcolor='#F6F8FA'\u003e\n    \u003cspan\u003e\n        \u003ca href=\"https://www.zhihu.com/people/legege007\" title=\"知乎撩我\" target=\"_blank\"\u003e\n            \u003cimg src=\"http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_zhihu-dog.jpg\" height='22'\u003e\n        \u003c/a\u003e\n    \u003c/span\u003e\n    \u003cspan valign='middle'\u003e\n        \u003cfont\u003e(\u003c/font\u003e\n        \u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_vote.png\" width='14' height='14' title=\"赞同\"\u003e\n        42.8k \u003cfont color=black\u003e\u003c/font\u003e\n        \u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_fav.png\" width='14' height='14' title=\"收藏\"\u003e\n        90.7k \u003cfont  color=black\u003e\u003c/font\u003e\n        \u003cimg src=\"https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_thank.png\" width='14' height='14' title=\"感谢\"\u003e\n        21.7k \u003cfont color=black\u003e\u003c/font\u003e)\n    \u003c/span\u003e\n\u003c/div\u003e\n```\n而对于stackoverflow，官方在StackExchange页面提供了flair，比如我的是: [User Bravo Yeung - Stack Exchange](https://stackexchange.com/users/4637854/bravo-yeung?tab=flair) ，页面中提供了可嵌入的html代码:\n\n```html\n\u003ca href=\"https://stackexchange.com/users/4637854/bravo-yeung\"\u003e\u003cimg src=\"https://stackexchange.com/users/flair/4637854.png\" width=\"208\" height=\"58\" alt=\"profile for Bravo Yeung on Stack Exchange, a network of free, community-driven Q\u0026amp;A sites\" title=\"profile for Bravo Yeung on Stack Exchange, a network of free, community-driven Q\u0026amp;A sites\" /\u003e\u003c/a\u003e\n```\n将其用div包起来，放进公告.html即可见效。\n\n\n## 在公告栏添加一个能旋转的rss图标\n\n先将相应的css放入页面定制css或公告栏的css中，然后在后面使用。\n```css\n#feed_icon {\n\tborder: #000 solid 2px;\n\tdisplay: block;\n\tmargin: 50px auto;\n\tborder-radius: 50%;\n\ttransition: all 2.0s;\n}\n\n#feed_icon:hover {\n\ttransform: rotate(360deg);\n}\n```\n\n然后将如下代码贴进公告中~\n```html\n\u003cdiv id=\"feed\"\u003e\n  \u003ca href=\"https://www.cnblogs.com/enjoy233/rss\" title=\"订阅Feed\"  target=\"_blank\"\u003e\n     \u003cimg id=\"feed_icon\" src=\"https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_rss.png\" alt=\"\" style=\"border: 0pt none;\" width = 60 height=60\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n```\n\n\n\n效果图:\n\n![rss_roate](https://files.cnblogs.com/files/enjoy233/rss_rotate.gif)\n\n\n\n## 在公共栏添加\"小人时钟\"(Flash)\n\n```html\n\u003cembed wmode=\"transparent\" src=\"https://files.cnblogs.com/files/enjoy233/honehone_clock_tr.swf\" quality=\"high\" bgcolor=\"#FDF6E3\" width=\"200\" height=\"120\" name=\"honehoneclock\" align=\"middle\" allowscriptaccess=\"always\"type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"\u003e\n```\n\n\n\n效果图: \n\n![clock_result](https://files.cnblogs.com/files/enjoy233/clock_run.gif)\n\n\n\n## 在公共栏添加\"站点统计\"功能\n打开网站：http://www.flagcounter.com/ ，无需注册，点击黄色按钮\"Get Your Flag Counter\"，即可生成嵌入该插件的html代码。\n![FlagCounter](http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_flagCounter.png)\n\n生成的html代码如下：\n```html\n\u003cdiv\u003e\n\u003ca href=\"https://info.flagcounter.com/LCgi\"\u003e\u003cimg src=\"https://s04.flagcounter.com/count2/LCgi/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/\" alt=\"Flag Counter\" border=\"0\"\u003e\u003c/a\u003e\n\u003cdiv\u003e\n```\n最后将该代码加入到公告栏的html代码中即能生效。\n\n\n\n## 在公告栏中加入\"自定义搜索\"(PopUp弹窗)\n\n**实现的基本原理:**\n\n\u003e onclick = \"window.open()\", target = popUpWindow\n\n此功能的特色在于用户搜索之后，搜索结果页面并不会影响到原博客页面，而是在弹出的独立窗口显示，而且很容易扩展出很多其他站点的搜索功能。\n\n在公告html中贴入如下代码:\n\n```html\n\u003cdiv id=\"sidebar_search_new\" class=\"mySearch\"\u003e\n\u003ch3 class=\"catListTitle\"\u003e自定义搜索(PopUp窗口)\u003c/h3\u003e\n    \u003cinput type=\"text\" id=\"zzk_q1\" class=\"input_my_zzk_new\" placeholder=\"Bravo Yeung\"\u003e \n\u003cspan\u003e\n    \u003cinput type=\"button\" class=\"btn_my_zzk\" value=\"本博搜索\" onclick=\"window.open('https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;\" /\u003e\n\u0026emsp;\n\u003cinput type=\"button\" class=\"btn_my_zzk\" value=\"站内搜索\" onclick=\"window.open('https://zzk.cnblogs.com/s/blogpost?w=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;\" /\u003e\n\u003c/div\u003e\n\u003cspan\u003e\n\u003cspan\u003e\n    \u003cinput type=\"button\" class=\"btn_my_zzk\" value=\"知乎搜索\" onclick=\"window.open('https://www.zhihu.com/search?type=content\u0026q=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;\" /\u003e\n\u0026emsp;\n\u003cinput type=\"button\" class=\"btn_my_zzk\" value=\"CSDN搜索\" onclick=\"window.open('https://so.csdn.net/so/search/s.do?t=blog\u0026u=yanglr2010\u0026q=' + document.getElementById('zzk_q1').value,'popUpWindow','height=750,width=1000,left=10,top=10,scrollbars=yes,menubar=no'); return false;\" /\u003e\n\u003c/div\u003e\n```\n\n\n\n效果图:\n\n![customSearch2](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/custom_search2.bmp)\n\n\n\n\n\n## 页面底部添加\"回到顶部\" + \"收藏\" + \"快速评论\"功能\n\nhtml部分：\n\n```css\n\u003cdiv class=\"scrollBtn\" id=\"scrollBtn\"\u003e\n    \u003cul class=\"clearfix\"\u003e\n        \u003cli class=\"sB-home\"\u003e\n            \u003ca href=\"http://www.cnblogs.com/enjoy233\" class=\"ff-t\" title=\"首页\"\u003e\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"sB-comment\"\u003e\n            \u003ca href=\"#blog-comments-placeholder\" onclick=\"$('#tbCommentBody').focus();\" class=\"ff-t\" title=\"添加评论\"\u003e\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli class=\"sB-share\"\u003e\u003ca onclick=\"if(cb_entryId !=undefined){AddToWz(cb_entryId)}\" href=\"javascript:void(0);\" title=\"收藏\"\u003e\u003c/a\u003e\u003c/li\u003e\n        \u003cli class=\"sB-goTop\" id=\"goTop\" style=\"display: list-item;\"\u003e\n            \u003ca href=\"#top\" title=\"回顶部\"\u003e\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n效果图:\n\n![custom_Tool_Bar](https://files.cnblogs.com/files/enjoy233/CustomtoolBar.gif)\n\n## \"自动移动的目录\"功能\n\n页脚html引入css文件nav.my.css和nav.my.js。\n\n```html\n\u003clink href=\"//blog-static.cnblogs.com/files/enjoy233/nav.my.css\" rel=\"stylesheet\"\u003e\n\u003cscript type=\"text/javascript\" src=\"//files.cnblogs.com/files/enjoy233/nav.my.js\"\u003e\u003c/script\u003e\n```\n\n然后将下方代码贴进页脚html.\n\nJS部分:\n\n```html\n\u003cscript language=\"javascript\" type=\"text/javascript\"\u003e\n//生成目录索引列表\nfunction GenerateContentList()\n{\n    var jquery_h3_list = $('#cnblogs_post_body h4');//如果你的章节标题不是h4,只需要将这里的h4换掉即可\n    if(jquery_h3_list.length\u003e0)\n    {\n        var content = '\u003ca name=\"_labelTop\"\u003e\u003c/a\u003e';\n        content    += '\u003cdiv id=\"navCategory\"\u003e';\n        content    += '\u003cp style=\"font-size:18px\"\u003e\u003cb\u003e阅读目录\u003c/b\u003e\u003c/p\u003e';\n        content    += '\u003cul\u003e';\n        for(var i =0;i\u003cjquery_h3_list.length;i++)\n        {\n            var go_to_top = '\u003cdiv style=\"text-align: right\"\u003e\u003ca href=\"#_labelTop\"\u003e回到顶部\u003c/a\u003e\u003ca name=\"_label' + i + '\"\u003e\u003c/a\u003e\u003c/div\u003e';\n            $(jquery_h3_list[i]).before(go_to_top);\n            var li_content = '\u003cli\u003e\u003ca href=\"#_label' + i + '\"\u003e' + $(jquery_h3_list[i]).text() + '\u003c/a\u003e\u003c/li\u003e';\n            content += li_content;\n        }\n        content    += '\u003c/ul\u003e';\n        content    += '\u003c/div\u003e';\n        if($('#cnblogs_post_body').length != 0 )\n        {\n            $($('#cnblogs_post_body')[0]).prepend(content);\n        }\n    }    \n}\nGenerateContentList();\n\u003c/script\u003e\n\n```\n\n\n\n效果图: \n\n![autoMoveContents](https://files.cnblogs.com/files/enjoy233/autoMoveContents.gif)\n\n\n\n## 改进评论的显示样式\n这里我索性改成了熟悉的微信聊天的样式。\n\n\n\n\n纯css实现:\n\n```css\n    .blog_comment_body {\n        background: #B2E866;\n        float: left;\n        border-radius: 5px;\n        position: relative;\n        overflow: visible;\n        margin-left: 33px;\n        max-width: 700px;\n    }\n\n    .feedbackListSubtitle a.layer {\n        background: #B2E866;\n        color: #414141 !important;\n        padding: 2px 4px;\n        border-radius: 2px;\n    }\n```\n\n将上面的代码贴紧页面css文本框即可见效果。\n\n\n\n**效果图:**\n\n![custom_comments](https://files.cnblogs.com/files/enjoy233/custom_comments.bmp)\n\n\n\n\n## 在公告栏添加\"友情链接\"\ncnblogs博客后台提供了\"链接\"功能，这个就是用来添加友情链接的。\n\n\n\n**设置方法(见下图):**\n\n编辑分类 -\u003e 添加链接，设置好后公告栏上会显示相关内容，不过可能会有延时，需要等一会。\n\n\n![friend_links](https://files.cnblogs.com/files/enjoy233/cnblogs-Link.bmp)\n\n\n\n效果图:\n\n![friend_link_result](https://files.cnblogs.com/files/enjoy233/friendLink.bmp)\n\n\n\n## \"博客签名\"功能\n\n虽然cnblogs博客后台提供了\"博客签名\"功能，测试发现该该方法实现的博客签名在IE中打开时不显示，只好改为用跨浏览器的JQuery来实现了。\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n$(document).ready(function(){\n\t$(\"#cnblogs_post_body\").append('\u003cbr/\u003e\u003chr/\u003e\u003cdiv style=\"border: 2px dotted #4d90fe; padding: 2px; background-color: lightgray\"\u003e    作者：\u003ca href=\"http://www.cnblogs.com/enjoy233/\" target=\"_blank\" title=\"Enjoy233的博客\" style=\"color: brown\"\u003eBravo Yeung\u003c/a\u003e\u003cbr\u003e    出处：\u003ca href=\"http://www.cnblogs.com/Enjoy233/\" target=\"_blank\" title=\"http://www.cnblogs.com/Enjoy233/\" style=\"color: blue\"\u003ehttp://www.cnblogs.com/Enjoy233/\u003c/a\u003e    \u003cbr\u003e如果您觉得阅读本文对您有帮助，请点击一下右下方的\u003cb style=\"color: blue; font-size: 16px\"\u003e推荐\u003c/b\u003e按钮，您的\u003cb style=\"color: blue; font-size: 16px\"\u003e推荐\u003c/b\u003e将是我写作的最大动力！    \u003cbr\u003e版权声明：本文为博主原创或转载文章，欢迎转载，\u003cb\u003e但转载文章之后必须在文章页面明显位置注明出处\u003c/b\u003e，否则保留追究法律责任的权利。\u003c/div\u003e');\n});\n\u003c/script\u003e\n```\n\n\n\n## 禁用页面的\"选中复制\"功能\n\n在css中进行相应的设置，只需将下方代码贴入\"页面css\"文本框即可。\n\n```css\n/* 禁止页面，选中 复制 */\nhtml,body {\n\tmoz-user-select: -moz-none;\n\t-moz-user-select: none;\n\t-o-user-select: none;\n\t-khtml-user-select: none;\n\t-webkit-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n}\n```\n\n综合考虑后，这种处理方式并不太友好，于是采用了后文中的\"复制博客内容时自动加版权说明\"。\n\n\n\n## 不显示底部广告\n\n在css中进行相应的设置，只需将下方代码贴入\"页面css\"文本框即可。\n\n```css\n#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {\n    display:none; !important\n}\n```\n\n\n\n## 修改导航栏(修改部分链接的文字 + 增加下拉菜单)\n\ncss部分:\n```css\n/* 定制自己导航栏的样式 */\n#shwtop ul {\n    margin: 0;\n    padding: 0;\n    list-style-type: none; /*去除li前的标注*/\n    background-color: #333;\n    overflow: hidden; /*隐藏溢出的部分，保持一行*/\n}\n#shwtop li {\n    float: left; /*左浮动*/\n}\n#shwtop li a, .dropbtn {\n    display: inline-block; /*设置成块*/\n    color: white;\n    text-align: center;\n    text-decoration: none;\n    padding: 14px 16px;\n}\n/*鼠标移上去，改变背景颜色*/\n#shwtop li a:hover, .dropdown:hover .dropbtn { \n    /* 当然颜色你可以自己改成自己喜欢的，我还是挺喜欢蓝色的 */\n    background-color: blue;\n}\n#shwtop .dropdown {\n    /*\n    display:inline-block将对象呈递为内联对象，\n    但是对象的内容作为块对象呈递。\n    旁边的内联对象会被呈递在同一行内，允许空格。\n    */\n    display: inline-block;\n}\n#shwtop .dropdown-content {\n    display: none;\n    position: absolute;\n    background-color: #f9f9f9;\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n}\n#shwtop .dropdown-content a {\n    display: block;\n    color: black;\n    padding: 8px 10px;\n    text-decoration:none;\n}\n#shwtop .dropdown-content a:hover {\n    background-color: #a1a1a1;\n}\n#shwtop .dropdown:hover .dropdown-content{\n    display: block;\n}\n```\n\n\n\n页脚html部分：\n\n```html\n\u003c!-- 更新导航栏的菜单--\u003e\n\u003cscript\u003e\n    $(function(){\n            $(\"#navigator\").append('\u003cdiv id=\"shwtop\" \u003e    \u003cul style=\"margin-left:5px;margin-right: 5px;\"\u003e       \u003cdiv class=\"dropdown\"\u003e            \u003ca href=\"#\" class=\"dropbtn\"\u003e后台管理\u003c/a\u003e            \u003cdiv class=\"dropdown-content\"\u003e                \u003c!-- \u003ca class=\"menu\" href=\"这里是你文章或随笔分类的链接地址，自己修改下面同理\"\u003e 这里更改下拉具体内容 \u003c/a\u003e --\u003e                \u003ca class=\"menu\" href=\"http://i.cnblogs.com/Configure.aspx\"  target=\"_blank\"\u003eGUI配置\u003c/a\u003e                \u003ca class=\"menu\" href=\"http://i.cnblogs.com/posts\" target=\"_blank\"\u003e博文列表\u003c/a\u003e                \u003ca class=\"menu\" href=\"http://wz.cnblogs.com/\" target=\"_blank\"\u003e收藏\u003c/a\u003e                               \u003ca class=\"menu\" href=\"http://i.cnblogs.com/Files.aspx\" target=\"_blank\"\u003e文件\u003c/a\u003e   \u003ca class=\"menu\" href=\"https://i.cnblogs.com/EditGalleries.aspx\" target=\"_blank\"\u003e相册\u003c/a\u003e          \u003c/div\u003e        \u003c/div\u003e    \u003c/ul\u003e\u003c/div\u003e');\n\n        $(\"#navList\").append('\u003cli id=\"nav_home\"\u003e\u003ca id=\"enjoy233\" rel=\"nofollow\" href=\"https://ing.cnblogs.com/\" target=\"_blank\" title=\"进入我的闪存\"\u003e闪存\u003c/a\u003e\u003c/li\u003e');\n        $(\"#navList\").append('\u003cli id=\"nav_follow\"\u003e\u003ca id=\"enjoy233\" rel=\"nofollow\" href=\"http://home.cnblogs.com/followees/\" target=\"_blank\" title=\"进入我的关注\"\u003e我关注\u003c/a\u003e\u003c/li\u003e');          \n\n        $('#navList')[0].children[\"nav_contact\"].innerHTML='\u003ca id=\"nav_contact\" class=\"menu\" rel=\"nofollow\" href=\"https://msg.cnblogs.com/send/Enjoy233\"\u003e私信\u003c/a\u003e';\n        $('#navList')[0].children[\"nav_rss\"].innerHTML='\u003ca id=\"nav_rss\" class=\"menu\" rel=\"nofollow\" href=\"https://www.cnblogs.com/enjoy233/rss\"\u003eRSS订阅\u003c/a\u003e';\n\n            //加载图片\n            var ponum1 = $(\".postTitle\").length;\n            var ponum2 = $(\".entrylistPosttitle\").length;\n            if(ponum1!=0)\n                articleimg(ponum1);\n            if(ponum2!=0)\n                entrylistarticleimg(ponum2);\n        });\n\u003c/script\u003e\n```\n\n\n效果图:\n\n![custom-nav](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/custom-navigate.bmp)\n\n如需调整请自行修改~\n\n\n\n## 微博秀的嵌入(支持http/https访问)\n\n参看本人的另一篇文章 [当今最全面可用的微博分享组件嵌入方法(亲测2019年2月仍有效) - Enjoy233](https://www.cnblogs.com/enjoy233/p/10349500.html) 即可。\n\n\n\n效果图(见本博客左侧公告栏):\n\n![weibo_show](https://files.cnblogs.com/files/enjoy233/weibo_show.gif)\n\n\n\n## 分享组件的嵌入(支持http/https访问)\n\n由于官方的 [Baidu Share](bdimg.share.baidu.com/static/) 的ssl证书已过期，只好找到一个替代镜像 `//static.dmzj.com/baidushare/static/js/shell_v2.js`，使得通过https访问或http访问本博客都可以看到左下角的分享按钮~\n\n\n\n\n在页脚.html中加入如下代码:\n\n```html\n\u003c!-- Baidu Share BEGIN --\u003e\n\u003cdiv id=\"bdshare\" class=\"bdshare_t bds_tools get-codes-bdshare\"\u003e \n\u003cspan class=\"bds_more\"\u003e分享到：\u003c/span\u003e \n\u003ca href=\"#\" class=\"bds_tsina\" data-cmd=\"tsina\" title=\"分享到新浪微博\"\u003e\u003c/a\u003e\n\u003ca href=\"#\" class=\"bds_qzone\" data-cmd=\"qzone\" title=\"分享到QQ空间\"\u003e\u003c/a\u003e\n\u003ca href=\"#\" class=\"bds_sqq\" data-cmd=\"sqq\" title=\"分享到QQ好友\"\u003e\u003c/a\u003e\n\u003ca href=\"#\" class=\"bds_douban\" data-cmd=\"douban\" title=\"分享到豆瓣网\"\u003e\u003c/a\u003e\n\u003ca href=\"#\" class=\"bds_youdao\" data-cmd=\"youdao\" title=\"分享到有道云笔记\"\u003e\u003c/a\u003e\n\u003ca href=\"#\" class=\"bds_renren\" data-cmd=\"renren\" title=\"分享到人人网\"\u003e\u003c/a\u003e\n\u003ca href=\"#\" class=\"bds_kaixin001\" data-cmd=\"kaixin001\" title=\"分享到开心网\"\u003e\u003c/a\u003e\n\u003ca href=\"#\" class=\"bds_mail\" data-cmd=\"mail\" title=\"分享到邮件分享\"\u003e\u003c/a\u003e\n\u003c/div\u003e \n\u003cscript type=\"text/javascript\" id=\"bdshare_js\" data=\"type=tools\u0026amp;uid=2883522\" \u003e\u003c/script\u003e \n\u003cscript type=\"text/javascript\" id=\"bdshell_js\"\u003e\u003c/script\u003e \n\u003cscript type=\"text/javascript\"\u003e \ndocument.getElementById(\"bdshell_js\").src = \"//static.dmzj.com/baidushare/static/js/shell_v2.js?cdnversion=\" + Math.ceil(new Date()/3600000) \n\u003c/script\u003e \n\u003c!-- Baidu Share END --\u003e\n```\n\n\n\n官方demo:\n\n[分享按钮-百度分享](http://share.baidu.com/code) (获取代码 -\u003e 按向导操作，可查看网页侧边的动态使用效果，也可看到相应代码。)\n\n\n\n效果图:\n\n![baiduShare](https://files.cnblogs.com/files/enjoy233/BaiduShareTool.gif)\n\n\n\n## 打赏功能\n\n本博客基于开源插件 [tctip](\u003chttps://github.com/greedying/tctip\u003e) v1.0.3 来实现~\n\n在页脚.html中插入如下代码即可:\n\n```html\n\u003c!-- tctip 支付赞赏/打赏 --\u003e\n\u003cscript type=\"text/javascript\" src=\"//files.cnblogs.com/files/enjoy233/tctip-1.0.3.min.js\"\u003e\u003c/script\u003e \u003c!-- js文件引入 --\u003e\n\u003cscript\u003e\n    new tctip({\n        top: '20%',\n        button: {\n            id: 1,\n            type: 'zanzhu',\n        },\n        list: [\n            {\n                type: 'alipay',\n                qrImg: 'https://files.cnblogs.com/files/enjoy233/Reward_Alipay_Charge.bmp' //替换成自己的支付宝付款码\n            }, {\n                type: 'wechat',\n                qrImg: 'https://files.cnblogs.com/files/enjoy233/Reward_WX_Charge.bmp' //替换成自己的微信付款码\n            }\n        ]\n    }).init()\n\u003c/script\u003e\n```\n\n\n\n效果图:\n\n![custom-nav](https://files.cnblogs.com/files/enjoy233/reward.gif)\n\n还看到过一个不错的方法，亲测有效：[自制简易打赏功能 - EritPang](https://www.cnblogs.com/eritpang/p/7465484.html) .\n\n\n\n\n## 复制文字时自动加版权\n\n确保页面能成功引入JQuery.js后在页首html中加入如下代码:\n```html\n\u003cscript language=\"javascript\" type=\"text/javascript\"\u003e\njQuery(document).on('copy', function(e)\n{\n  var selected = window.getSelection();\n  var copyFooter = '\u003cbr\u003e---------------------\u003cbr\u003e著作权归作者所有。\u003cbr\u003e' \n                        + '商业转载请联系作者获得授权，非商业转载请注明出处。\u003cbr\u003e'\n                        + '作者：Bravo Yeung\u003cbr\u003e 源地址：' + document.location.href\n                        + '\u003cbr\u003e来源：博客园cnblogs\u003cbr\u003e© 版权声明：本文为博主原创文章，转载请附上博文链接！';\n  var copyHolder = $('\u003cdiv\u003e', {html: selected + copyFooter, style: {position: 'absolute', left: '-99999px'}});\n\n  $('body').append(copyHolder);\n  selected.selectAllChildren( copyHolder[0] );\n  window.setTimeout(function() {\n      copyHolder.remove();\n  },0);\n});\n\u003c/script\u003e\n```\n\n当用户复制文中内容(ctrl+C或鼠标右击复制)时，会自动加上版权文字，csdn的代码复制功能以及知乎的内容复制都有此功能。\n\n\n\n**效果图:**\n\n![copy-With-Copyright](https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/copyWithCopyright.bmp)\n\n\n\n##  隐藏博文右下角的\"反对\"按钮\n\n只需在页面的css(设置下的第一个文本框)中加入如下代码:\n\n```css\n.buryit {\n\tdisplay: none;\n}\n\n.comment_bury {\n\tdisplay: none;\n}\n```\n效果请见[本页面](https://www.cnblogs.com/enjoy233/p/10328361.html)右下角。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyanglr%2Fbeautify-cnblogs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyanglr%2Fbeautify-cnblogs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyanglr%2Fbeautify-cnblogs/lists"}