博客园美化操作

Posted 不会起名字

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客园美化操作相关的知识，希望对你有一定的参考价值。

之所以写这篇文章的原因了主要就是博客园的默认样式太单一，而且很多人都在用，就想与众不同一样，不做大多数

 

准备工作

想要美化自己的博客园默认界面，首先需要申请js权限

 

步入正题

当你的这一步做完之后就可以开始给博客化妆了

#########################################页面标题样式================================

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}
#各个等级标题的颜色样式
#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: 23px;
    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: #008eb7;
    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: 20px;
    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 h3    {
    background: #399ab2;
    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 h4{
    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: 16px;
    font-weight: bold;
    height: 24px;
    width:50%;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

#页面中a标签鼠标位置
#cnblogs_post_body h2:a{
   color: rgb(235, 235, 235)
}
#cnblogs_post_body h2 a:hover{
   color: #FF00FF;
}
#页面中标题位置
#cnblogs_post_body h1{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h1:hover{
   color: #FF00FF;
}
#cnblogs_post_body h2{
   color:rgb(235, 235, 235);
}
#cnblogs_post_body h2:hover{
   color: #FF00FF;
}
#cnblogs_post_body h3{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h3:hover{
   color: #FF00FF;
}
#cnblogs_post_body h4{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h4:hover{
   color:#FF00FF;
}
#####################去除广告展示以及默认图片#####################################
#blogTitle{
        display:none}

#ad_t2{
        display:none;
}

body{
        background:none;
        margin-top:-24px;
}

#under_post_news{
        display:none}

#under_post_kb{
        display:none}

#cnblogs_c1,#cnblogs_c2{
        display:none}

#tbCommentBody{
        resize:none}

.go_top {
        display: inline-block;
        position: fixed;
        right: 1%;
        bottom: 3%;
        width: 100px;
        height: 59px;
        background: url(https://files.cnblogs.com/files/zh605929205/2.gif) no-repeat center center;
        background-size: 111%;
        -moz-background-size: 111%;
        display: none;
}
#comment_nav{
        display:none}

.feedbackListSubtitle{
        background:#E1FFFF;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding: 3px;
        margin: 10px 0px;
        text-shadow: 2px 2px 3px #404040;
}

经过以上步骤基本上就差不多了，但是有一个地方，那就是侧边栏公告，我们可以让他变得更美点，先看效果图：↓

这些都可以自定制：总访客，总点击量，github以及时钟，下边就一步步解释

插入时钟
http://www.blogclock.cn        #访问这个链接，然后一步步按照默认的操作，
一直点到最后他会给你生成一串代码，你只需要把代码拷贝出来，粘贴到下图的位置就OK了

插入访客数以及点击量
http://www.amazingcounters.com/
第一步：选择 Create Your Free Web Counter Now!
第二步：选择你需要的样式，继续点击下一步
第三步：有可能要你填写相关的数据了
　　Your Name:用户名（随便写）
　　Email Addredd:邮箱地址（随便写）
　　Password:密码（两次输入要一致，推荐和邮箱一样）
　　site name：因为我要监控的是博客园，所以写博客园就好
　　site url：输入你的博客地址（当访问这个地址才会有流量产生）
　　starting count：开始计数（开始计数这个随便写，代表你的访客从多少开始算起）
　　increment on：两个选择（点击一次计数，登陆点击计数）
第四步：会生成一个按钮，点击一下，会弹出新的页面，将我画出来的那段代码复制到博客园js权限哪里就OK了

贡献一段源码

针对mtclean皮肤美化

/* 设置tongqingliu顶部间距*/
h1 {
    margin-top: 20px;
}

/* 设置tongqingliu方框及背景*/
#top {
    color: #333;
    margin-left: 50px;
    margin-right: 50px;
    border-radius: 10px;
    background-color: royalblue;
    border-top:0px;
    padding-bottom: 35px;
    text-align: center;
}

/* 设置tongqingliu字体及大小*/
#top a, #top a:link, #top a:visited, #top a:active, #top a:hover {
    font-family: "Comic Sans MS";
    font-size: larger;
    color: whitesmoke;
}

/* 设置保持学习的态度 */
#tagline {
    margin-top: 20px;
    font-size: large;
    color:white;
}

/* 导航及以文字所在方框的位置 */
#leftmenu {
    margin-top: 100px;
}

/* 导航，统计信息 */
#leftmenu h3 {
    font-family: palatino,georgia,times new roman,serif;
    color: whitesmoke;
    background-color: royalblue;
    font-size: 1.5em;
    font-weight: normal;
    padding: 3px;
    margin-top: 0;
    line-height: 1.5;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* 首页，联系，管理，随笔，文章，评论 */
#leftmenu ul {
    font-size: 14px;
}

/* 置顶随笔及以下所在方框 */
#main {
    margin-top: 50px;
}

/* 置顶随笔， 日期  */
p.date {
    color: black;
    font-family: Palatino,georgia,times new roman,serif;
    font-size: 1em;
    font-weight: bold;
    padding-top: 15px;
    padding-bottom: 10px;
    display: none;
}

/* 设置首页目录 */
div.post h2 a:link {
    font-family: Palatino,Georgia,Verdana,arir,Sans-Serif;
    font-size: 18pt;
    font-weight: bold;
    color: whitesmoke;
    background-color: green;
    line-height: 40px;
    text-decoration: none;
}
div.post h2 a:visited {
    font-family: Palatino,Georgia,Verdana,arir,Sans-Serif;
    font-size: 18pt;
    font-weight: bold;
    line-height: 40px;
    color: whitesmoke;
    background-color: green;
    text-decoration: none;
}
div.post h2 {
    font-family: palatino,georgia,verdana,arial,sans-serif;
    font-size: 18pt;
    /* color: #606060; */
    font-weight: bold;
    /* background: #fff; */
    line-height: 40px;
    margin-top: 28px;
    background-color: green;
    text-decoration: none;
}

美化博客内容

/* 设置博客正文一二三级标题格式 */
/* 一级标题 */
#cnblogs_post_body h1 {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: black;
    margin: 10px 0;
}
/* 二级标题 */
#cnblogs_post_body h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: royalblue;
    margin: 10px 0;
}
/* 三级标题 */
#cnblogs_post_body h3 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    color: whitesmoke;
    background-color: dimgrey;
}
/*  正文 */
#cnblogs_post_body p {
    font-size: 12pt;
}

美化签名

/* 设置签名格式 */
#MySignature {
    display: none;
    background-color: #B2E866;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #6B6B6B;
    padding: 10px;
    line-height: 1.5;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family: \'Microsoft Yahei\';
}

美化推荐反对按钮

/* 推荐及反对 */
#div_digg {
    padding: 5px;
    position: fixed;
    z-index: 1000;
    bottom: 0px;
    right: 0;
    border: 0px solid #D9DBE1;
    background-color: #FFFFFF;
    opacity: 0.8;
    width: 46px;
    float: right;
    margin-bottom: 10px;
    margin-right: 10px;
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
    border: 2px solid red;
}
/* ignore反对 */
.buryit {
    display: none;
}

美化代码，代码使用Monokai格式

/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
pre {
/*控制代码不换行*/
    white-space: pre;
    word-wrap: normal;
}
.cnblogs-markdown .hljs {
    font-size: 16px!important;
    font-family: consolas,monospace !important;
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #23241f !important;
    color: #FFF;
    white-space: pre;
    word-break: normal;
    padding: 10px 15px !important;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e;
}

屏蔽广告

/* adblock */
#ad_t2 {
    display: none;
}
.c_ad_block {
    display: none;
}

增加打赏按钮

<script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
  <script>  
  new tctip({
    top: \'20%\',
    button: {
      id: 9,
      type: \'dashang\',
    },
    list: [      {        type: \'alipay\',        qrImg: \'https://xxxxx\'      }, {        type: \'wechat\',        qrImg: \'https://xxxxxx\'      }    ]
  }).init()
  </script>

插入时钟： 
http://www.blogclock.cn/ 
插入访客来源： 
http://s11.flagcounter.com/more/Fe64/ 
插入总访客数： 
http://www.amazingcounters.com/ 
插入QQ通讯组件： 
https://connect.qq.com/intro/wpa

生成后的代码放在【博客侧边栏公告（支持html代码）（支持JS代码）】中。

 参考样式：http://www.cnblogs.com/jackson0714/p/4833669.html

待续

以上是关于博客园美化操作的主要内容，如果未能解决你的问题，请参考以下文章

[美化] 博客园美化历程

博客园美化博客随笔目录

博客园个人界面美化（初入博客园）

[博客美化] 博客园SyntaxHighlighter代码高亮

博客园代码高亮美化教程

博客园美化代码备份