前端小白也能快速学会的博客园博客美化全攻略
目录
前端小白也能快速学会的博客园博客美化全攻略
美化方法论简介
一般而言,需要选一个默认的skin,然后在该基础上调整。
官方介绍:
博客皮肤模板 http://skintemplate.cnblogs.com/
宽屏模版:
SimpleMemory
Minyx2_Lite
lessIsMore
BlueSky
组成及对应关系
准备工作
- 首先你得有个cnblogs博客
- 打开 博客后台管理
- 申请js权限
- 在博客皮肤选项卡中将博客皮肤设置为: BlueSky
- 将 页面定制.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权限。
如何模仿一个博客园的自定义风格(样式css+动态效果js)?
模仿一个cnblogs
<link id="MainCss" type="text/css" rel="stylesheet" href="/skins/LessIsMore/bundle-LessIsMore.css?..."> <link type="text/css" rel="stylesheet" href="/blog/customcss/198996.css?v=...">
宽屏模版:
Minyx2_Lite
lessIsMore
BlueSky
补充完整前缀:http://www.cnblogs.com
即可进行模仿。
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部分:
<style type="text/css"> #auto_div { display: none; width: 257px; border: 1px #74c0f9 solid; background: #FFF; position: absolute; top: 24px; left: 0; margin-top: 15px; color: #323232; /*设置显示在当前页面的上一层*/ z-index: 1; } .side_search { float: left; position: relative; height: 31px; margin-left: 25px; display: inline-block; } .side_search:hover { -webkit-box-shadow: 0 0 3px #999; -moz-box-shadow: 0 0 3px #999 } .search_input { width: 210px; vertical-align: middle; height: 30px; line-height: 30px; border: 1px solid #999; border-radius: 2px 0 0 2px; padding: 4px 7px; background-color: #fbfbfb; } .delete_btn { background: #fbfbfb; margin-left: -6px; border: 1px solid #fbfbfb; border-radius: 0 3px 3px 0; cursor: pointer; display: inline-block; vertical-align: middle; color: red; font-weight: bold; width: 38px; font-size: 25px; height: 38px; padding-bottom: inherit; } .search_btn { border-radius: 3px 3px 3px 3px; background: #4d90fe; margin-left: -7px; border: 1px solid #4d90fe; cursor: pointer; display: inline-block; vertical-align: middle; color: #f3f7fc; font-weight: bold; width: 100px; font-size: 18px; height: 41px; } .search_btn:hover { background: #1874CD } .search_btn2 { border-radius: 3px 3px 3px 3px; background: #F0CB85; border: 1px solid #F0CB85; cursor: pointer; display: inline-block; vertical-align: middle; color: #DC143C; font-weight: bold; width: 100px; font-size: 18px; height: 41px; } .search_btn2:hover { background: #DEB887 } input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } </style>
js部分:
html部分:
<h1 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;"> </h1> <div class="side_search"> <input type="text" id="zzk_q" class="search_input" onkeydown="return zzk_go_enter(event);" placeholder="输入 回车搜索" tabindex="1" autofocus x-webkit-speech> <div id="auto_div"> </div> <input onclick="quickdelete()" type="button" class="delete_btn" value="×" title="清空"> <input onclick="zzk_go()" type="button" class="search_btn" value="本博搜索"> <input onclick="zzk_go2()" type="button" class="search_btn2" value="园内搜索"> </div>
在页面顶部添加"音乐播放器"(Flash)播放背景音乐
<div style="display: table; text-align: center; width: 40%; height: 100%;"> <embed src="https://music.163.com/style/swf/widget.swf?sid=26237342&type=2&auto=0&width=320&height=66" width="340" height="86" allowNetworking="all" ></embed> </div>
效果图: gif
在页面顶部添加"Fork me on Github"图标
页首html需要添加
<div> <a href="http://github.com/yanglr" target="_blank" style="position: absolute;right: 0; top: 0; z-index: 100;"> <img src="http://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_git-right-link.gif" alt="Fork me on github"> </a> </div>
为导航栏设置渐变背景色
/* 头部 */ #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标签既能实现文字的滚动
<marquee><a href="#"><font color="blue" size="4">You will make it! </marquee>
在公告栏加入自己的社交网络账号 - 图片链接
<div nowrap align=center> <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_gzh.png" width=150 height=150> </div> <br> <div align="center"> <a href="http://stackoverflow.com/users/6075331/bravo-young" target="_blank" class="mr5 "><strong>StackOverflow</strong></a><font style="color:#BF7158">(</font> <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_reputation-rp.png" class="mr5"> <span style="color:#BF7158" class="mr10">406 <font size=4 color=black>⬆</font>)</span> </div> <br> <div class="c-social" align="center"> <span> <a href="https://github.com/yanglr" target="_blank"> <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_github.png" class="mr5" width = 40 height=40> </a> <a href="http://blog.csdn.net/lzuacm" target="_blank"> <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_csdn.png" class="mr5" width = 40 height=40> </a> <a href="https://www.zhihu.com/people/legege007" target="_blank"> <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_zhihu.png" class="mr5" width = 40 height=40> </a> <a href="http://weibo.com/546671991" target="_blank"> <img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_weibo.png" class="mr5" width = 40 height=40> </a> </span>
在公告栏添加一个能旋转的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); }
<div id="feed"> <a href="https://www.cnblogs.com/enjoy233/rss" title="订阅Feed" target="_blank"> <img 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> </a> </div>
效果图: gif
在公共栏添加"小人时钟"(Flash)
<embed 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">
效果图: gif
在公共栏添加"站点统计"功能
打开网站:http://www.flagcounter.com/ ,无需注册,点击黄色按钮"Get Your Flag Counter",即可生成嵌入该插件的html代码。
生成的html代码如下:
<div> <a href="https://info.flagcounter.com/LCgi"><img 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"></a> <div>
最后将该代码加入到公告栏的html代码中即能生效。
页面底部添加"回到顶部" + "收藏" + "快速评论"功能
js部分:
<script language="javascript" type="text/javascript"> //生成目录索引列表 function GenerateContentList() { var jquery_h3_list = $('#cnblogs_post_body h4');//如果你的章节标题不是h4,只需要将这里的h4换掉即可 if(jquery_h3_list.length>0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>阅读目录</b></p>'; content += '<ul>'; for(var i =0;i<jquery_h3_list.length;i++) { var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label' + i + '"></a></div>'; $(jquery_h3_list[i]).before(go_to_top); var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>'; content += li_content; } content += '</ul>'; content += '</div>'; if($('#cnblogs_post_body').length != 0 ) { $($('#cnblogs_post_body')[0]).prepend(content); } } } GenerateContentList(); </script>
html部分:
<div class="scrollBtn" id="scrollBtn"> <ul class="clearfix"> <li class="sB-home"> <a href="http://www.cnblogs.com/liyunhua" class="ff-t" title="首页"></a> </li> <li class="sB-comment"> <a href="#blog-comments-placeholder" onclick="$('#tbCommentBody').focus();" class="ff-t" title="添加评论"></a> </li> <li class="sB-share"><a onclick="if(cb_entryId !=undefined){AddToWz(cb_entryId)}" href="javascript:void(0);" title="收藏"></a></li> <li class="sB-goTop" id="goTop" style="display: list-item;"> <a href="#top" title="回顶部"></a> </li> </ul> </div>
"自动移动的目录"功能
效果图: gif
改进评论的显示样式
改成了微信聊天的样式。
纯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来实现了。
<script type="text/javascript"> $(document).ready(function(){ $("#cnblogs_post_body").append('<br/><hr/><div style="border: 2px dotted #4d90fe; padding: 2px; background-color: lightgray"> 作者:<a href="http://www.cnblogs.com/enjoy233/" target="_blank" title="Enjoy233的博客" style="color: brown">Bravo Yeung</a><br> 出处:<a href="http://www.cnblogs.com/Enjoy233/" target="_blank" title="http://www.cnblogs.com/Enjoy233/" style="color: blue">http://www.cnblogs.com/Enjoy233/</a> <br>如果您觉得阅读本文对您有帮助,请点击一下右下方的<b style="color: blue; font-size: 16px">推荐</b>按钮,您的<b style="color: blue; font-size: 16px">推荐</b>将是我写作的最大动力! <br>版权声明:本文为博主原创或转载文章,欢迎转载,<b>但转载文章之后必须在文章页面明显位置注明出处</b>,否则保留追究法律责任的权利。</div>'); }); </script>
禁用页面的"选中复制"功能
/* 禁止页面,选中 复制 */ 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; }
不显示底部广告
#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部分:
<!-- 更新导航栏的菜单--> <script> $(function(){ $("#navigator").append('<div id="shwtop" > <ul style="margin-left:0px;margin-right: 5px;"> <div class="dropdown"> <a href="#" class="dropbtn">全部分类</a> <div class="dropdown-content"> <!-- <a class="menu" href="这里是你文章或随笔分类的链接地址,自己修改下面同理"> 这里更改下拉具体内容 </a> --> <a class="menu" href="#" >1.Linux基础</a> <a class="menu" href="#" >2.Python基础</a> <a class="menu" href="http://www.cnblogs.com/shwee/category/1217691.html" >3.Python进阶</a> <a class="menu" href="http://www.cnblogs.com/shwee/category/1217693.html" >4.项目实战</a> <a class="menu" href="http://www.cnblogs.com/shwee/category/1217695.html" >5.人工智能</a> <a class="menu" href="http://www.cnblogs.com/shwee/category/1212750.html" >6.阅读笔记</a> </div> </div> </ul></div>'); $("#navList").append('<li id="nav_config"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Configure.aspx" target="_blank" title="进入配置管理">配置</a></li>'); $("#navList").append('<li id="nav_home"><a id="tufujie" rel="nofollow" href="https://ing.cnblogs.com/" target="_blank" title="进入我的闪存">闪存</a></li>'); $("#navList").append('<li id="nav_follow"><a id="tufujie" rel="nofollow" href="http://home.cnblogs.com/followees/" target="_blank" title="进入我的关注">关注</a></li>'); $("#navList").append('<li id="nav_wz"><a id="tufujie" rel="nofollow" href="http://wz.cnblogs.com/" target="_blank" title="进入我的收藏">收藏</a></li>'); $('#navList')[0].children["nav_contact"].innerHTML='<a id="nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/Enjoy233">私信</a>'; $('#navList')[0].children["nav_rss"].innerHTML='<a id="nav_rss" class="menu" rel="nofollow" href="https://www.cnblogs.com/enjoy233/rss">RSS订阅</a>'; //加载图片 var ponum1 = $(".postTitle").length; var ponum2 = $(".entrylistPosttitle").length; if(ponum1!=0) articleimg(ponum1); if(ponum2!=0) entrylistarticleimg(ponum2); }); </script>
- 美化博客园界面(让您的博客更加赏心悦目)希望对您有用
- 博客园 cnblogs博客 图片显示美化 使用CSS给图片添加圆角阴影
- 学会这些前端移动开发教程,小白也能变大神!
- 【小白】如何写好自己的一篇CSDN博客(美化)
- 小白神器 - 一篇博客学会CSS
- 美化博客园界面(让您的博客更加赏心悦目)希望对您有用【转】
- 强力推荐!web前端小白最常用的5个学习网站,让你快速入门!
- web前端小白快速进阶的网站,强力推荐!
- 前端系统学习快速进阶教程全攻略
- 博客园博客美化相关文章目录
- 博客园美化教程第二篇----极致个性化你的专属博客(为博客添加背景音乐插件,调整页面布局等)
- 作为一个刚入门的前端小白,谨此以该博客记录我的前端历程!
- 小白教程 | 利用Github Pages快速搭建个人博客
- 没学过CSS等前端的我,也想美化一下自己的博客
- 如何快速学会前端开发?
- 帮助曾经像自己一样的小白,快速了解hog和svm,从而学会运用这两个算法来做些简单的行人检测
- (腾讯前端小白结业作业)一个简单的博客模仿页面
- 美化博客园界面(让您的博客更加赏心悦目)希望对您有用
- 前端系统学习快速进阶教程全攻略
- 自己动手美化博客园个人博客