自定义博客样式
Posted Chuck Lu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义博客样式相关的知识,希望对你有一定的参考价值。
1.将css文件上传到博客园
http://files.cnblogs.com/files/chucklu/SimpleMemory.css
2.设置里面调整
2.1博客皮肤设置为Custom
2.2页面定制css代码
@import url("http://files.cnblogs.com/files/chucklu/SimpleMemory.css"); <style type="text/css"> #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 16px; } #cnblogs_post_body h1 { background: #2B6695; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 18px; font-weight: bold; height: 25px; line-height: 25px; margin: 18px 0 !important; padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h2{ background: #2B6600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 15px; font-weight: bold; height: 24px; line-height: 23px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } #cnblogs_post_body h3{ background: #5B9600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 13px; font-weight: bold; height: 24px; line-height: 20px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } </style>
2.3禁用模板默认CSS
3.添加分享按钮
在页首html代码添加
<script charset="utf-8" type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0&btn=r3.gif"></script>
参考http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddShareButton_3.html
4.推荐按钮浮动
在2.2中,页面定制css代码中添加如下代码。注意是加上<style></style>之间的
#div_digg{ position:fixed; bottom:10px; width:140px; right:390px; border:2px solid #6FA833; padding:10px; background-color:#fff; border-radius:5px 5px 5px 5px !important; box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); }
参考http://www.cnblogs.com/asxinyu/p/Bolg_Category_ButtonMovie_8.html
5.博客自动根据标题识别目录
5.1目录样式文件
5.2自动生成目录代码
参考http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html
6.在每一篇文章的末尾,添加固定的信息
$("#cnblogs_post_body").append(\'<table width="100%" border="1" bgcolor=#DB70DB cellpadding="4" cellspacing="0" style="BORDER-COLLAPSE: collapse" borderColor=#000000><tr><td width=40 hight=40><pre><font size="4" color="blue">作者:卢俊涛(ChuckLu) <a href="https://github.com/chucklu">GitHub</a></font> </pre></td></tr></table>\');
http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html
这篇博客中的目录2
参考文章:http://www.cnblogs.com/asxinyu/p/Bolg_Category_For_BlogBeauty.html
7.上传了css文件后,使用Ctrl+F5进行强制刷新
8.增加打赏
http://www.cnblogs.com/mengfangui/p/7339303.html
或者参考这个人,在公告栏里添加http://www.cnblogs.com/han-1034683568/
在设置里面,可以设置公告,博客侧边栏公告(支持HTML代码)(支持JS代码)
9.添加统计
http://flagcounter.com/
按照提示操作,之后将Code for websites (HTML):复制到我的公告栏里就可以了
10.自动生成阅读目录
http://www.cnblogs.com/wql025/p/5211673.html
11.小老鼠游戏动画,动画时钟,github corners
http://www.cnblogs.com/jingmoxukong/p/7826982.html#github-角
以上是关于自定义博客样式的主要内容,如果未能解决你的问题,请参考以下文章