zoukankan      html  css  js  c++  java
  • 自定义美化博客园 勋爵|X

      最近发现,好多排名靠前的技术博客,首先是排版特别美观,然后博客CSS布局也是自定义设置的,故在网上找了些例子,对自己博客进行了小小改动,将部分代码及链接分享给大家!

    美化博客内容

     1 /* 设置博客正文一二三级标题格式 */
     2 /* 一级标题 */
     3 #cnblogs_post_body h1 {
     4     font-size: 28px;
     5     font-weight: bold;
     6     line-height: 1.5;
     7     color: black;
     8     margin: 10px 0;
     9 }
    10 /* 二级标题 */
    11 #cnblogs_post_body h2 {
    12     font-size: 24px;
    13     font-weight: bold;
    14     line-height: 1.5;
    15     color: whitesmoke;
    16     background-color: royalblue;
    17     margin: 10px 0;
    18 }
    19 /* 三级标题 */
    20 #cnblogs_post_body h3 {
    21     font-size: 20px;
    22     font-weight: bold;
    23     line-height: 1.5;
    24     color: whitesmoke;
    25     background-color: dimgrey;
    26 }
    27 /*  正文 */
    28 #cnblogs_post_body p {
    29     font-size: 12pt;
    30 }

    美化签名

    /* 设置签名格式 */
    #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;
    }
    /*推荐框 悬浮 */
    #div_digg {
        position: fixed;
        bottom: 5px;
         140px;
        right: 300px;
        border: 2px solid #edd7b2;
        padding: 10px;
        background-color: #fff;
        border-radius: 5px 5px 5px 5px !important;
        box-shadow: 0 0 0 1px #ecd7b1, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    }

    屏蔽广告

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

    美化博客侧边栏公告

    插入时钟: 
    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/greedying/p/6483222.html

    添加目录/制定功能:

    请参考:https://www.cnblogs.com/miangao/p/6846916.html

    页首自动生成目录功能:

    请参考:https://www.cnblogs.com/chinas/p/6088341.html

    程序演示效果GIF图录制:

    请参考:http://blog.bahraniapps.com/gifcam/#download

    Typora 高效编写,并快捷同步到博客园

    Typora 是一款跨平台(Windows/Mac/Linux)的功能强大的MarkDown编辑器,实用性非常高。

    并使用博主自己开发的.NET Core开发的工具快速将博客同步到博客园。

    请参考:https://www.cnblogs.com/stulzq/p/9043632.html

    设置页面禁止复制功能:

      1、通过css的方式,添加CSS代码:

    /* 禁止页面,选中 复制 */
    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;
    }

    除了”none”还支持以下值:

    auto——默认值,用户可以选中元素中的内容
    text——用户可以选择元素中的文本
    element——文本可选,但仅限元素的边界内(只有IE和FF支持)
    all——在编辑器内,如果双击或上下文点击发生在子元素上,该值的最高级祖先元素将被选中。

    2、通过在body标签中添加如下属性:
    <body oncontextmenu="return false;" onselectstart="return false">
    前面一句是禁止右键的,后面一句是禁止复制的。
     
    3、在js中添加如下两行语句:
    //禁止页面选择以及鼠标右键
    document.oncontextmenu=function(){return false;}; 
    document.onselectstart=function(){return false;};

    其他美化功能(推荐博客):

    请参考:https://www.cnblogs.com/voidsky/p/5490220.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

        https://blog.csdn.net/siwuxie095/article/details/80151468

                  https://blog.csdn.net/qq_22186119/article/details/78369855

        https://www.cnblogs.com/liuyishi/p/9190459.html#_label2

        https://www.cnblogs.com/hafiz/p/7573464.html

        https://www.cnblogs.com/shwee/p/9060226.html


    【时间仓促,如有错误,欢迎指正! ||   欢迎留下您的评语!  大家一起探讨、学习区块链!】

    【转载请注明出处!http://www.cnblogs.com/X-knight/ 


  • 相关阅读:
    Javascript高性能编程-提高Dom访问速度
    获取在线人数
    js倒计时
    支付宝支付
    微信扫码支付
    多条sql语句实现事物处理
    防止页面重复刷新
    bootstrapTable.js 使用
    org_chart.js 使用方法
    js上传图片及时显示
  • 原文地址:https://www.cnblogs.com/X-knight/p/9159804.html
Copyright © 2011-2022 走看看