自定义博客样式

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&amp;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.在每一篇文章的末尾,添加固定的信息

http://www.cnblogs.com/asxinyu/p/Bolg_Category_AddArticleCategory_6.html

这篇博客中的目录2

参考文章:http://www.cnblogs.com/asxinyu/p/Bolg_Category_For_BlogBeauty.html

时间: 2024-12-14 06:11:23

自定义博客样式的相关文章

自定义博客园主题样式

自定义博客园主题样式 基础实现 之前有记录自己自定义目录以及相关样式功能,感兴趣的可以看下 博客园如何设置目录生成&设置目录&设置标题背景色&修改标题背景色 在此基础上再加点捣鼓内容,实现主题样式透明化.增加侧边“分享”模块.标题级别显示设置 具体代码中会进行注释,可进行相应参考 内容比较粗略,将就看喽~ 透明化 效果 具体实现 ****************************************** 页面定制CSS代码 ************************

玩转CSDN之自定义博客栏目

玩转CSDN之自定义博客栏目 不得不说,CSDN在IT界还是非常不错的, 不管是文章数量还是质量,都非常不错,很多程序猿也在CSDN建了窝,那么如何把CSDN的主页设置的更加符合自己的口味,就是我们今天要做的事. CSDN博客的栏目指的是这块内容: 这里面,有的是CSDN博客自带的内容,比如个人资料.博客专栏等,还有些内容,我们可以自定义,首先,我们需要进入个人的博客首页,点击管理博客,并切换到博客栏目选项卡,这里,就是我们修改自定义栏目的主战场了. 自定义链接 我们首先来看最简单的,增加一个栏

自定义博客园模板/css/html/js

唔....实在是找不到什么别的事情好干了,省选凉凉回去学文化课真的说实话很无聊...而且导致现在OI做题并没有什么目的性和系统性...还不如去做物理... 可能有对我博客样式感兴趣的朋友...我这里省去你们F12的时间来介绍一下我的博客模板吧... 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯,连接在这,可以自己去看:博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级). 这里着重感谢学姐帮我指导和完善了博客的样式. 看完了上面的应该就已经有了

博客入门--自定义博客主题

对于以往博客网站已提出较多主题供用户使用,但对于海量用户而言其主题难免过于单一. 为突出博客主题个性化显示,目前已有第三方开源库(https://github.com/BNDong/Cnblogs-Theme-SimpleMemory)供大家使用.本文以博客园为例,实现自定义主题设置. 进入博客园设置页面 下载第三方库.本文重要使用资源包中的.\src\style\base.min.css的样式资源(https://github.com/BNDong/Cnblogs-Theme-SimpleMe

博客样式测试

博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试博客样式测试 ? 1 2 3 4 5 6 7 8 9 1

自定义博客总结

参考链接:[详细图解]一步一步教你自定义博客园(cnblog)界面 原文地址:https://www.cnblogs.com/ilaozhao/p/11006270.html

博主自己的博客样式分享

#下载 ??Github:源码下载 #声明 ??1. 本站模仿[夏日浅笑.]博主的博客样式,再此基础上进行二次加工,因为该博主分享出来的源码我使用时出来挺多问题. ??2. 本分享提供给懒于设置样式的人和新入门的小白. ??3. 如果使用该样式请说明出处 #使用方式 打开 博客设置,将博客皮肤设置为BlueSky,并申请JS代码支持 一般来说,快的话1小时,慢的话最晚一天 下载源码 将修改好的源码,复制到后台中,3个文件对应. #修改源码 ??列出需要修改的地方 ??1.所有a标签以及页面描述改

自定义博客园样式

相必每个在博客园开通博客的人都抱怨博客园的皮肤丑得要死,尤其是我这种类处女座的孩子根本把持不住所以我遍鼓敲着美化(老板,我有1WQB,给我美美脸~~) 其实发现博客园里面有个自定义CSS样式,你可以加样式思路就是你选定一个预选皮肤,博客园会给你固定的html结构然后你根据结构来自己添加css,尤其在现在CSS3的年代,你可以把你的博客变得妈都不认得fighting! 1,预选皮肤选择LessIsMore(大多数人用这个皮肤来做自定义)2,然后在页面定制里加入如下代码(only示例,最美的还是你自

自定义博客园首页样式

1.来个效果图 2.进入博客园后台(设置->添加页首Html代码),将下面的代码复制粘贴保存即可 1 1 <script src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"> 2 2 <canvas id="c_n4" width="860" height="958" style="position: fixed; t