正文

博客园美化操作(代码片段)

不会起名字  不会起名字  2022-10-21  205

关键词：

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

准备工作

想要美化自己的博客园默认界面，首先需要申请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

待续

博客园界面美化(代码片段)

博客园界面美化0x00.写在前面皮肤作者：@SevenNight皮肤作者博客：SevenNight修改人：@Ryanjie修改人：Ryanjie前几天无意之中看到了一款特别好看（每个人的眼光都不一样）的博客皮肤“verdant”，皮肤的作者是@SevenNight。当时感觉这款... 查看详情

博客园的美化(代码片段)

前言第一次写博客想从美化页面开始。页首html代码这里引入的是来自https://www.cnblogs.com/jingmoxukong/p/7826982.html的css文件12<linkrel="stylesheet"href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.cs 查看详情

博客园美化(代码片段)

闲着没事对博客皮肤做了些美化，主要是css，js写了些小功能css部分：整体采用蓝色简洁风，有些部分我不用，所以没优化，比如标签，日历，相册，头部固定在顶部，侧边栏固定250px;右边内容主体自适应，支持，收藏和关注按... 查看详情

美化博客园(代码片段)

设置与我联系侧边栏公告代码<atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxxxxxx&site=qq&menu=yes">　　<imgalign="absmiddle"border="0"src="http://wpa.qq.com/pa?p=2:xxxxxx 查看详情

[博客美化]博客园syntaxhighlighter代码高亮(代码片段)

...ndowsLiveWriter/OpenLiveWriter代码着色太繁琐了，仅仅为了实现博客代码着色功能就要下载新软件和搞一堆配置。Win10用户只能使用OpenLiveWriter。Web端能干的事干嘛多搞功夫。如果不愿意网页登陆账号只想通过OLW软件编辑全文并且发布... 查看详情

博客园美化-darkgreentrip(代码片段)

1、第一步，样式的形成与博客皮肤的选择有很大关系本文选择darkgreentrip2、代码插入2.1页面定制CSS代码```Objective-C#homemargin:0auto;width:95%;/原始65/min-width:980px;/页面顶部的宽度/background-color:rgba(245,245,245,0.7);padding:30px;margin-top:0px; 查看详情

博客园代码高亮美化教程(代码片段)

先简单展示下效果吧：首先需要导入js代码，在侧边栏公告处将以下代码复制进入：<scripttype="text/javascript">!function()varq=null;window.PR_SHOULD_USE_CONTINUATION=!0;(function()functionS(a)functiond(e)varb=e.charCodeAt(0);if(b!==9 查看详情

博客园美化(代码片段)

侧栏字体更改1.catListTitle2font-weight:bold;3line-height:1.2;4margin-top:21px;5margin-bottom:10.5px;6border-left:10pxsolid#008000;7padding:10px010px14px;8text-align:left;9font-family:微软雅黑;1011#profile_blo 查看详情

博客园美化代码备份(代码片段)

#Header1_HeaderTitlefont-family:"华文行楷";font-size:62px;font-weight:bold;padding-top:15px;padding-bottom:5px;padding-left:20px;padding-right:0px;text-align:center;Header2_HeaderTitlefont-fa 查看详情

博客园美化：添加赞赏功能(代码片段)

将以下代码复制粘贴到侧边栏HTML中：<scripttype="text/javascript"src="https://blog-static.cnblogs.com/files/zhangshuhao1116/pay.js"></script><script>newtct 查看详情

博客园主题自定义美化(代码片段)

...com/files/JetpropelledSnake/cnblogs.css，然后按ctrl+s，即可将本人博客用到的自定义css下载下来。接着在博客的管理页面，找到文件选项卡，上传刚刚下载的文件：上传之后，记下该文件的url，如上图中的红框所示。注：上图中的url... 查看详情

博客园美化：添加qq联系按钮(代码片段)

将以下代码复制粘贴到博客侧边栏公告HTML： <divalign="center"><atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=744461004&site=qq&menu=yes"><imgalign="absmiddle"borde 查看详情

博客园页面美化(代码片段)

　对以前的我来说，我觉得博客只有自己搭建的才有页面美化，像博客园这样的可能没有。但是，突然有一天在我查资料的时候，发现了一篇很好看的博客，我就留意了一下他的域名，发现竟然是博客园的。就开始决定把自己的... 查看详情

博客园主题美化diy教程(代码片段)

...到友人启发，部署了个静态页面，想着太单调了，要不连博客园的修一修，就去网上翻找了一下，果然给我发现了，但是在DIY的中途，遇到一大堆问题，因为是几年前的源码了，很多链接已经噶了。首先这个DIY页面的作者是这位... 查看详情

博客园自动生成目录及页面美化

一、自动生成目录1、在博客园后台管理页面选择“设置”2、生成三级目录2.1、操作步骤找到页脚HTML代码，复制自动生成目录的js代码，保存即可代码如下：ViewCode2.2、效果：3、生成一级目录3.1、操作步骤：找到页脚HTML代码，复... 查看详情

博客美化(代码片段)

...r/cnblogs-theme-silence介绍Silence是一款界面简洁、运行高效的博客园主题，主要面向于经常混迹博客园的朋友。简单概括其几个主要特点：专注阅读、精致漂亮的UI；事无巨细的部署文档；兼容移动端浏览器；源码结构清晰、易扩展... 查看详情

博客园美化教程大集合（超详细，看这篇就够了）(代码片段)

阅读目录：　　1. 前言　　2.定制自己的博客0.美化整体效果1.准备工作2.自定义个性化导航栏3.添加顶部博主信息4.添加顶部滚动公告5.为博客文章添加目录导航6.添加分享功能按键7.定制推荐和反对按键的炫酷样式8.添加快速... 查看详情

博客园样式美化ii(代码片段)

前言感谢大家对之前博客园样式美化的认可，我终于更新啦啦啦啦更新内容01|优化首页显示效果优化前：优化后：有没有感觉瞬间立体起来了呢～02|增加管理入口这个很简单，就是导航条上加了个管理的入口原本想设置为只有博... 查看详情