您的位置:新葡亰496net > 奥门新萄京娱乐场 > 新葡亰496net:详谈如何定制自己的博客园皮肤,

新葡亰496net:详谈如何定制自己的博客园皮肤,

发布时间:2019-11-23 15:13编辑:奥门新萄京娱乐场浏览(98)

    回去目录页

    转自:

    任由说几句:

      本人平素学的都以 C 和 Java 以至Python语言,根本不懂高大上的 CSS 和 知名的 HTML5.认为那多个能自个儿规划那么雅观的博客的相恋的人都好狠心。能够团结充足博客文告栏的小宠物和微博以至足够背景音乐,都感到好牛逼,好高大上,博客的近乎感立马就上来了。

      不过小编又没学过 CSS等前端的事物,心想,搞那样优质的博客会不会很难啊?这几个</class>这一个什么鬼?会不会很麻烦?难道要本身把 前端的东西学习风流罗曼蒂克边才行?

    第后生可畏谢谢 sevennight 对自身的着力帮扶,因此他也改为了笔者的首先位园友;其次,由于自身并不打听 HTML/CSS,由此差那么一点儿都在 李宝亨 设计的 博皮源码 的底子上拓宽的改进;最终,为了拿到 尤其自由的导航,不懂 Javascript 的本身只得照搬旁人 现存的源码。

    前言

    本人小白生龙活虎枚,弄这么些也是查了好多材质,下边推荐多少个网站,也便是小编借鉴的网站

    网址1    网址2    背景象网站

     

    目录

      前言
      Quickstart
      定制今日头条 CSS 的法则
        页面定制CSS代码
        博客侧边栏布告
        页首Html代码
        页脚Html代码
      定制细节
        独立控件
          小耗子游戏动漫
          动漫石英钟
          百度分享栏
          Github 角
        标签云
        背景动漫
        动态标题
        作品内容样式定制
          起头像的斟酌栏
          自动生成作品目录
          飞速操作栏
          响应式布局
          样式的美化
      资料

    开始:

      但是并非那样,笔者不会前端,可是作者也能够弄:小宠物和天涯论坛以至丰盛背景音乐。


     


    大器晚成、博皮设计方法

    本博客皮肤设计步骤如下:

    • 选择博客四肢 LessIsMore
    • 页面定制 CSS 代码 框中输入自定义的 CSS 代码;
    • 勾选 剥夺模板暗中认可 CSS
    • 如需使用 Javascript,请联系 contact at cnblogs dot com 申请 js 权限;

    推荐一些使得的网址:

    • 图标:
    • 背景图:
    • 图表制作:
    • 横幅:

    提示

    方法一:有俩个公文要求自身上传播自个儿文件里(管理---文件---上传卡塔尔

    文件:

    新葡亰496net 1.js文件

    新葡亰496net 2.css文件

    复制文件代码,在桌面新建文本文书档案,粘贴进去,修正文本文书档案名后缀为  .js    .css      

    新葡亰496net 3

    上传后分别点击文件,弹出新的页面后,页面内容便是您复制进去的剧情,复制网站到页首、页脚html代码中替换作者的网站就好了

     新葡亰496net 4

    新葡亰496net 5

     

     新葡亰496net 6

     

    前言

    新近,有比相当多果壳网的爱侣给作者留言或私信,询问笔者的博客背景是哪些做的。

    不是小编爱惜羽毛,而是由于内容很多,大器晚成一次复实在是太困难。未有登时答复的相恋的人,请见谅。

    自己在这里处做二回聚焦式分享,假设有喜欢的原委,即便拿去。

      大器晚成:到场果壳网

      首先,在  http://open.weibo.com/connect 登陆本身的今日头条,然后点击“新浪直播”:

      新葡亰496net 7

     

      踏入后,在左边栏,点击“搜狐秀”后:

     

     

      新葡亰496net 8

     

      设置好团结想要的样式后点击下边包车型客车 “复制代码”:

      新葡亰496net 9

     

      然后踏入到天涯论坛的后台装置 --》 博客设置:

      在博客左侧栏通告处写入:

    <div id="weiboIframe">
    </div>
    

      然后把刚刚复制过来的代码粘贴到<div> </div> 之间,保存,就OK了。

      新葡亰496net 10

     

     


     


    二、HTML/CSS/Javascript 源码

    源码改过才干:

    • 慎挑对象样式的页面;
    • 利用浏览器选项 查看源 能够赢得指标页面包车型地铁 HTML 源码;
    • 接受浏览器选项 检查成分 能够博得指标页面包车型地铁 HTML/CSS/Javascript 源码,并能接收一定成分,直接改正相关代码进行调节和测量检验。

    办法黄金年代:右下角目录

    Quickstart

    假使您独自想维持原状的施用本身的定制身体发肤,而不想打听完成细节。那么您只需求产生以下多少个步骤就可以,后边的章节能够忽视。

    (1卡塔尔国走入搜狐管理后台的设置标签页

    新葡亰496net 11

    其大器晚成设置页面下有多少个输入框允许你增多 html 、css 、js 代码,新浪会在渲染你的博客页面时自动加载这几个代码。

    • 页面定制CSS代码
    • 博客侧面栏公告
    • 页首Html代码
    • 页脚Html代码

    (2卡塔尔页面定制CSS代码

    毋庸增多内容,但是须要勾选 剥夺模板私下认可CSS

    (3卡塔尔国博客左侧栏公告

    加多以下代码:

    <!-- 小老鼠游戏控件 -->
    <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>
    
    <!-- 公告栏时钟控件 -->
    <embed wmode="transparent" src="http://www.paidtyping.com/uploads/allimg/191123/1513332V1-11.jpg" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
    
    <!-- 百度分享栏控件 -->
    <script>
    window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"3","bdPos":"right","bdTop":"105.5"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document){0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://www.paidtyping.com/uploads/allimg/191123/1513334a9-12.jpg" ~(-new Date()/3600000)]};
    </script>
    

    (4)页首Html代码

    <!-- fork github 控件 -->
    <a href="https://github.com/dunwu" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
    
    <!-- 自定制样式文件以及脚本 -->
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513333233-13.jpg"></script>
    <link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />
    
    <!-- 背景动画 -->
    <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/15133361L-14.jpg"></script>
    
    <!-- 标签云相关库 -->
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513335919-15.jpg"></script>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513332127-16.jpg" type="text/javascript" charset="utf-8"></script>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513334547-17.jpg" type="text/javascript" charset="utf-8"></script>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513332V2-18.jpg" type="text/javascript" charset="utf-8"></script>
    

    新葡亰496net:详谈如何定制自己的博客园皮肤,源码共享。(5卡塔 尔(英语:State of Qatar)点击保存,完毕。

      二 . 增添背景音乐:

      参考博客:

                在歌曲/歌单页面下,点击“生成外链播放器”(今日头条卡塔尔就能够看见歌曲的HTML代码了。

       把代码复制到刚才的 博客左侧栏文告的编写制定器 就能够了:

      新葡亰496net 12

       

    <embed border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=18607260&auto=1&height=66"></embed>
    

    1、总体框架

    body {  padding: 0; margin: 0; font-size: 14px; color: #444444; min-width: 1200px;  font-family: "Microsoft YaHei UI",Verdana,Arial,Helvetica,sans-serif;  background: #205424 url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_wrapBg.jpg') no-repeat top center fixed; } #home {  opacity: 0.95; filter: alpha(opacity=95); box-shadow: 0 0 10px #000; margin: 40px auto;  width: 1200px; background: #fff; overflow: auto; border: solid 1px #fff; } .postBody p, .postCon p {text-indent: 2em; margin: 7px 0; line-height: 24px;} a { outline: none; text-decoration: none;} a:link, a:visited {color: #69c;} a:hover, a:active {color: #f36;/* text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted;*/} ul,ol { list-style: none; margin: 0; padding: 0; line-height: 1.8;} image { border:solid 1px #fff; box-shadow:0 0 10px #aaa;}
    

    页面定制css代码

    背景象网站

    新葡亰496net 13新葡亰496net 14

    <!--此处自定义标题背景色-->
    #cnblogs_post_body h1 {
        background: #265B8A;
        border-radius: 6px 6px 6px 6px;
        color: #FFFFFF;
        font-family: FZShuTi;
        font-size: 23px;
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        margin: 18px 0 !important;
        padding: 12px 0 8px 5px;
        text-shadow: 2px 2px 3px #222222;
        text-align:center;
        margin-bottom: 20px;
    }
    #cnblogs_post_body h2 {
    background-color: #008FC6;
        border-radius: 3px;
        text-align:center;
        color: white;
        text-shadow: 1px 1px 2px #222222;
        padding-left: 15px;
        margin-bottom: 12px;
    }
    #cnblogs_post_body h3 {
    background-color: #51C332;
        border-radius: 3px;
        text-align:center;
        color: white;
        text-shadow: 1px 1px 2px #222222;
        padding: 5px 15px;
        margin-bottom: 10px;
        width:50%
    }
    #cnblogs_post_body h4 {
        background-color: #5bc0de;
        border-radius: 3px;
        text-align:center;
        color: white;
        text-shadow: 1px 1px 2px #222222;
        padding: 5px 15px;
        margin-bottom: 10px;
        width:25%
    }
    code {
        padding: 1px 3px;
        margin: 0 3px;
        background: #ddd;
        border: 1px solid #ccc;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word;
        font-size: 14px;
    }
    #cnblogs_post_body table {
        text-align: center;
        width: 100%;
        border: 1px solid #dedede;
        margin: 15px 0;
        border-collapse: collapse;
    }
    #cnblogs_post_body table thead tr {
        background: #f8f8f8;
    }
    #cnblogs_post_body table tbody tr:hover {
        background: #efefef;
    }
    

    页面定制css代码

    新葡亰496net 15

    定制天涯论坛 CSS 的法规

    为了协助通晓,表达那几个输入框的功能时,小编都截取了浏览器开垦者工具的截图。

    说明

    市情上流行的浏览器基本上都扶助开垦者工具,平日快速键为 F12。你能够在 Elements 栏看见您的页面中丰盛的要素。

      三. 领养宠物:

      到那些网址去:找到自身想要的宠物:

      新葡亰496net 16

     

      复制代码:

      新葡亰496net 17

    <object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/fish/fish.swf?" width="290" height="300">
    <param name="movie" value="http://cdn.abowman.com/widgets/fish/fish.swf?" />
    <param name="AllowScriptAccess" value="always" />
    <param name="wmode" value="opaque" />
    <param name="scale" value="noscale" />
    <param name="salign" value="tl" /></object>
    

      相仿是放到:天涯论坛左侧栏的编辑器里。

     


    新葡亰496net:详谈如何定制自己的博客园皮肤,源码共享。 


    2、博客标题

    #blogTitle, #blogTitle a { font-weight: bold; color: #666; font-family:Jokerman;} #blogTitle .title {  margin-top: 10px; height: 100px; line-height: 100px; font-size: 36px; padding-left: 120px;  background: #fff url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_2015012507540191_easyicon_net_96.png') no-repeat; } #blogTitle, #blogTitle a:hover { text-decoration:none;} .subtitle { display: none;}
    

     博客左侧栏公告(帮衬HTML代码卡塔 尔(英语:State of Qatar)(扶助JS代码卡塔 尔(英语:State of Qatar)

    新葡亰496net 18新葡亰496net 19

    <script type="text/javascript">
          //以下是锚点JS
          var a = $(document);
          a.ready(function() {
            var b = $('body'),
              d = 'sideToolbar',
              e = 'sideCatalog',
              f = 'sideCatalog-catalog',
              g = 'sideCatalogBtn',
              h = 'sideToolbar-up',
              i = '<div id="sideToolbar"style="display:none;"><div class="sideCatalogBg"id="sideCatalog"><div id="sideCatalog-sidebar"><div class="sideCatalog-sidebar-top"></div><div class="sideCatalog-sidebar-bottom"></div></div><div id="sideCatalog-catalog"><ul class="nav"style="width:225px;zoom:1"></ul></div></div><a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable"></a></div>',
              j = '',
              k = 200,
              l = 0,
              m = 0,
              n = 0,
              //限制存在个数,如数量过多,则只显示h2,不显示h3
              //o, p = 13,
              o, p = 100,
              q = true,
              r = true,
              s = b;
            if(s.length === 0) {
              return
            };
            b.append(i);
            //指定获取目录的范围-------------这一点非常重要,因为每个人指定的范围都不一样,所以这是要修改的地方
            //o = s.find(':header');
            o = $('#cnblogs_post_body').find(':header')
            if(o.length > p) {
              r = false;
              var t = s.find('h2');
              var u = s.find('h3');
              if(t.length   u.length > p) {
                q = false
              }
            };
            o.each(function(t) {
              var u = $(this),
                v = u[0];
    
              var title = u.text();
              var text = u.text();
    
              u.attr('id', 'autoid-'   l   '-'   m   '-'   n)
              //if (!u.attr('id')) {
              //    u.attr('id', 'autoid-'   l   '-'   m   '-'   n)
              //};
              if(v.localName === 'h2') {
                l  ;
                m = 0;
                if(text.length > 14) text = text.substr(0, 20)   "...";
                j  = '<li>'   l   '&nbsp&nbsp<a href="#'   u.attr('id')   '" title="'   title   '">'   text   '</a></li>';
              } else if(v.localName === 'h3') {
                m  ;
                n = 0;
                if(q) {
                  if(text.length > 12) text = text.substr(0, 16)   "...";
                  j  = '<li class="h2Offset">'   l   '.'   m   '&nbsp&nbsp<a href="#'   u.attr('id')   '" title="'   title   '">'   text   '</a></li>';
                }
              } else if(v.localName === 'h4') {
                n  ;
                if(r) {
                  j  = '<li class="h3Offset">'   l   '.'   m   '.'   n   '&nbsp&nbsp<a href="#'   u.attr('id')   '" title="'   title   '">'   u.text()   '</a></li>';
                }
              }
            });
            $('#'   f   '>ul').html(j);
            b.data('spy', 'scroll');
            b.data('target', '.sideCatalogBg');
            $('body').scrollspy({
              target: '.sideCatalogBg'
            });
            $sideCatelog = $('#'   e);
            $('#'   g).on('click', function() {
              if($(this).hasClass('sideCatalogBtnDisable')) {
                $sideCatelog.css('visibility', 'hidden')
              } else {
                $sideCatelog.css('visibility', 'visible')
              };
              $(this).toggleClass('sideCatalogBtnDisable')
            });
            $('#'   h).on('click', function() {
              $("html,body").animate({
                scrollTop: 0
              }, 500)
            });
            $sideToolbar = $('#'   d);
    
            //通过判断评论框是否存在显示索引目录
            var commentDiv = $("#blog-comments-placeholder");
    
            a.on('scroll', function() {
              //评论框存在才调用方法
              if(commentDiv.length > 0) {
                var t = a.scrollTop();
                if(t > k) {
                  $sideToolbar.css('display', 'block');
                  $('#gotop').show()
                } else {
                  $sideToolbar.css('display', 'none')
                  $('#gotop').hide()
                }
              }
            })
          });
          //以上是锚点JS
          //以下是返回顶部JS
          $(function() {
            $('body').append('<div id="gotop" onclick="goTop();"></div>');
          });
    
          function goTop(u, t, r) {
            var scrollActivate = !0;
            if(scrollActivate) {
              u = u || 0.1;
              t = t || 16;
              var s = 0,
                q = 0,
                o = 0,
                p = 0,
                n = 0,
                j = 0;
              document.documentElement && (s = document.documentElement.scrollLeft || 0, q = document.documentElement.scrollTop || 0);
              document.body && (o = document.body.scrollLeft || 0, p = document.body.scrollTop || 0);
              n = window.scrollX || 0;
              j = window.scrollY || 0;
              s = Math.max(s, Math.max(o, n));
              q = Math.max(q, Math.max(p, j));
              p = 1   u;
              window.scrollTo(Math.floor(s / p), Math.floor(q / p));
              0 < s || 0 < q ? window.setTimeout('goTop('   u   ', '   t   ')', t) : 'undefined' != typeof r && r()
            } else {
              scrollActivate = !0
            }
          }
          //以上是返回顶部JS
        </script>
    

    博客侧面栏布告(帮衬HTML代码卡塔 尔(英语:State of Qatar)(扶助JS代码卡塔 尔(英语:State of Qatar)

    新葡亰496net 20

    页面定制CSS代码

    在这里边丰硕的 css 代码会被新浪加多到一个临时 css 文件中,并用于渲染你的博客页面。

    新葡亰496net 21

    注意

    即便勾选 禁止使用模板暗中认可CSS ,则你选中的博客皮肤的 css 效果将失效。

       四. 加多回到最上部

      原版的书文链接

       在"页面定制CSS代码"中增多如下css样式,当然你能够改为和谐喜欢的样式

      

    #back-to-top 
    {
        background-color: #00CD00;
        bottom: 0;
        box-shadow: 0 0 6px #00CD00;
        color: #444444;
        padding: 10px 10px;
        position: fixed;
        right: 50px;
        cursor: pointer;
    }
    

      在"页脚Html代码"中加多如下代码,能够将文字改为图片

    <a href="#top">TOP</a>
    

      


    3、导航栏

    #header { padding: 20px 20px 10px 20px;} #navigator { font-size: 16px; height: 48px; background: #55895B; text-align: center; margin-top: 20px; margin-bottom: 20px;} #navList li { margin: 0; line-height: 48px; display: inline-block; float: left;} #navList li:hover { background: #6DA47D;} #navList li a { padding: 0 30px; text-decoration: none; line-height: 48px; border: 0; color: #fff;  display: -moz-inline-box; display: inline-block;} #main { padding: 20px;} .blogStats { display: none;}
    

    页首、页脚Html代码

    新葡亰496net 22新葡亰496net 23

    <link  type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/zss0520/zss.css">
    

    页首Html代码

    新葡亰496net 24新葡亰496net 25

    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513335202-34.jpg"></script>
    

    页脚Html代码

    新葡亰496net 26

    博客侧边栏布告

    在这里处丰盛代码会被内置到搜狐页面包车型地铁 sideBar 下。

      五.  增加分享

        新葡亰496net 27

      增加分享的章程能够团结搜索一下“百度享受”,然后一步一步跟着就足以了,相仿是把获得的代码复制到 公告栏编辑器里。

    内需专心的是,那么些需求向du du发邮件申请开通 js 权限

      新葡亰496net 28

     



    Top Bar

    以下代码填写在 页首 Html 代码 框中。

    <div class="top_blogtitle">  <div style="width:1150px;margin-left:auto;margin-right:auto;">         <a target="_blank" href="http://home.cnblogs.com/u/Pandaman/ing">那 些 回 忆 丶 挥 之 不 去</a>     <a target="_blank" href="http://home.cnblogs.com/u/712172/">巛熊猫人灬</a>   <a href="http://i.cnblogs.com/">管理</a>   <a href="http://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a>  </div></div>
    

    主意二:在顶端展现目录 

    唯有标题2、标题3.俩种分类

    页首Html代码

    在那处丰盛代码会被置于到天涯论坛页面包车型客车 body 标签 下。

    新葡亰496net 29

      六.    增加目录

     

        未有成文目录的稿子不是好小说。(一大堆文字,胡言乱语淅,令人怎么看?卡塔尔

      Tips:

        天涯论坛中博文编辑器的第二级标题作为小说的第超级标题(当然也能够自身改造,但是本人感觉,标题太大了会吓到小伙子的卡塔 尔(阿拉伯语:قطر‎

        援助文中再次回到跳转,在翻阅二级标题下的内容时能够跳转回到目录

        补助二级目录

    <script language="javascript" type="text/javascript">
    
    // 生成目录索引列表
    // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
    // modified by: zzq
    function GenerateContentList()
    {
        var mainContent = $('#cnblogs_post_body');
        var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
    
        if(mainContent.length < 1)
            return;
    
        if(h2_list.length>0)
        {
            var content = '<a name="_labelTop"></a>';
            content  = '<div id="navCategory">';
            content  = '<p style="font-size:18px"><b>目录</b></p>';
            content  = '<ul>';
            for(var i=0; i<h2_list.length; i  )
            {
                var go_to_top = '<div style="text-align: right"><a href="#_labelTop">回到顶部</a><a name="_label'   i   '"></a></div>';
                $(h2_list[i]).before(go_to_top);
    
                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = '';
                for(var j=0; j<h3_list.length; j  )
                {
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                    if(!tmp.is(h2_list[i]))
                        break;
                    var li3_anchor = '<a name="_label'   i   '_'   j   '"></a>';
                    $(h3_list[j]).before(li3_anchor);
                    li3_content  = '<li><a href="#_label'   i   '_'   j   '">'   $(h3_list[j]).text()   '</a></li>';
                }
    
                var li2_content = '';
                if(li3_content.length > 0)
                    li2_content = '<li><a href="#_label'   i   '">'   $(h2_list[i]).text()   '</a><ul>'   li3_content   '</ul></li>';
                else
                    li2_content = '<li><a href="#_label'   i   '">'   $(h2_list[i]).text()   '</a></li>';
                content  = li2_content;
            }
            content  = '</ul>';
            content  = '</div><p>&nbsp;</p>';
            content  = '<p style="font-size:18px"><b>正文</b></p>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }  
    
        var qqinfo =  '<p style="color:navy;font-size:12px">讨论QQ群:135202158</p>';
        $(mainContent[0]).prepend(qqinfo);
    }
    
    GenerateContentList();
    </script>
    

     

      引用自:【博文】

    应用形式:登陆到新浪随后,张开新浪的后台管理,切换来“设置”选项卡,将方面包车型地铁代码,粘贴到 “页脚HTML代码” 区保存就能够。

    新葡亰496net, 

    静心:上述js代码中领到的h3作为章节的标题,假诺您的标题不是h3请在代码注释的地方活动改善。该代码除了在篇章的最开首转移目录索引之外,还大概会在每四个章节最终右下角(也正是下三个章节题指标右上角)会变动八个“回到顶端”的链接,以福利读者回到目录。本篇文章的目录结构正是自动生成的法力,要是你感到可行,就急匆匆试用一下啊。

    JavaScript

    以下代码填写在 页脚 Html 代码 框中。若是填写在 页首 Html 代码 框中,只怕有脚本被推行时的卡通生龙活虎闪而过,极为影响赏心悦目。

    <script type="text/javascript"> $(function(){   $("#navList").append('<li><a class="menu" href="http://www.cnblogs.com/Pandaman/p/">随笔</a></li><li><a class="menu" href="http://www.cnblogs.com/Pandaman/tag/">标签</a></li><li><a class="menu" href="http://www.cnblogs.com/Pandaman/gallery.html">相册</a></li><li><a class="menu" target="_blank" href="http://msg.cnblogs.com/msg/send/巛熊猫人灬">联系</a></li><li><a class="menu" target="_blank" href="http://feed.cnblogs.com/blog/u/211366/rss">RSS</a></li>');    $("#navList li").eq(7).remove(); $("#navList li").eq(4).remove();   $("#navList li").eq(3).remove(); $("#navList li").eq(2).remove(); });</script>
    

    页面定制CSS代码

    背景象网站

    新葡亰496net 30新葡亰496net 31

    <!--此处自定义标题背景色-->
    #cnblogs_post_body h1 {
        background: #265B8A;
        border-radius: 6px 6px 6px 6px;
        color: #FFFFFF;
        font-family: FZShuTi;
        font-size: 23px;
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        margin: 18px 0 !important;
        padding: 12px 0 8px 5px;
        text-shadow: 2px 2px 3px #222222;
        text-align:center;
        margin-bottom: 20px;
    }
    #cnblogs_post_body h2 {
    background-color: #008FC6;
        border-radius: 3px;
        text-align:center;
        color: white;
        text-shadow: 1px 1px 2px #222222;
        padding-left: 15px;
        margin-bottom: 12px;
    }
    #cnblogs_post_body h3 {
    background-color: #51C332;
        border-radius: 3px;
        text-align:center;
        color: white;
        text-shadow: 1px 1px 2px #222222;
        padding: 5px 15px;
        margin-bottom: 10px;
        width:50%
    }
    #cnblogs_post_body h4 {
        background-color: #5bc0de;
        border-radius: 3px;
        text-align:center;
        color: white;
        text-shadow: 1px 1px 2px #222222;
        padding: 5px 15px;
        margin-bottom: 10px;
        width:25%
    }
    code {
        padding: 1px 3px;
        margin: 0 3px;
        background: #ddd;
        border: 1px solid #ccc;
        font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
        word-wrap: break-word;
        font-size: 14px;
    }
    #cnblogs_post_body table {
        text-align: center;
        width: 100%;
        border: 1px solid #dedede;
        margin: 15px 0;
        border-collapse: collapse;
    }
    #cnblogs_post_body table thead tr {
        background: #f8f8f8;
    }
    #cnblogs_post_body table tbody tr:hover {
        background: #efefef;
    }
    

    页面定制CSS代码

    页脚Html代码

    在那间丰盛代码会被放到到果壳网页面包车型大巴 body 标签 下。

    新葡亰496net 32

    说明

    从四个截图轻松看出,在天涯论坛管理后台的页首或页脚输入框写入代码,并无分化。

       七.  让评价框动起来

    #div_digg{
      position:fixed;
      bottom:5px;
      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);
    }
    

      直接把代码放到天涯论坛设置的定制CSS这里就 OK 了。


     

     

    好了,马到成功,但是,博客版面究竟是行使外人的模板,想自定义的话比较难,所以,作为姿首控,学习一下 前端也无妨哈。。。

     

    4、侧边栏

    #sideBarMain { padding: 0 10px 0 0; background: #fff; margin: 0 0 20px 0; width: 190px; font-size: 12px; line-height: 22px;} #leftcontentcontainer { color: darkseagreen;} /* #sideBar{ position: relative;}#sideBarMain a { color: #666;} */
    

    新葡亰496net 33

     

    定制细节

    本人在创设和睦的网易四肢的进程中,也是以史为镜了非常多网络老铁的例证。在这里间享受一下。

    说明

    上边包车型地铁剧情,须求你询问一定的 html css js 知识。作者会批注怎么样去贯彻四肢定制,可是不会在这里处解释底工语法。

    公告

    #profile_block { margin-top: 0px; line-height: 24px; text-align: left;} #profile_block { display: none;} .newsItem { color: #666;} .newsItem h3{ display: none;}
    

    以下代码填写在 博客侧边栏公告(扶植 HTML 代码卡塔 尔(阿拉伯语:قطر‎ 框中。

    <MARQUEE scrollAmount=1 scrollDelay=60 direction=up width=200 height=50> Welcome to my blog!</MARQUEE> <a onclick"this.innerHTML='已关注';cnblogs.UserManager.FollowBlogger('c4179971-5097-e411-b908-9dcfd8948a71')" href="javascript:void(0);">关注我</a>
    

    页脚Html代码

    新葡亰496net 34新葡亰496net 35

    <script language="javascript" type="text/javascript">
    // 生成目录索引列表
    // ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
    // modified by: zzq
    function GenerateContentList()
    {
        var mainContent = $('#cnblogs_post_body');
        var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
    
        if(mainContent.length < 1)
            return;
    
        if(h2_list.length>0)
        {
            var content = '<a name="_labelTop"></a>';
            content  = '<div id="navCategory" style="color:#152e97;">';
            content  = '<p style="font-size:18px;"><b>目录</b></p>';
            content  = '<ul>';
            for(var i=0; i<h2_list.length; i  )
            {
                var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">Top</a><a name="_label'   i   '"></a></div>';
                $(h2_list[i]).before(go_to_top);
    
                var h3_list = $(h2_list[i]).nextAll("h3");
                var li3_content = '';
                for(var j=0; j<h3_list.length; j  )
                {
                    var tmp = $(h3_list[j]).prevAll('h2').first();
                    if(!tmp.is(h2_list[i]))
                        break;
                    var li3_anchor = '<a name="_label'   i   '_'   j   '"></a>';
                    $(h3_list[j]).before(li3_anchor);
                    li3_content  = '<li><a href="#_label'   i   '_'   j   '">'   $(h3_list[j]).text()   '</a></li>';
                }
    
                var li2_content = '';
                if(li3_content.length > 0)
                    li2_content = '<li><a href="#_label'   i   '">'   $(h2_list[i]).text()   '</a><ul>'   li3_content   '</ul></li>';
                else
                    li2_content = '<li><a href="#_label'   i   '">'   $(h2_list[i]).text()   '</a></li>';
                content  = li2_content;
            }
            content  = '</ul>';
            content  = '</div><p>&nbsp;</p>';
            content  = '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
            if($('#cnblogs_post_body').length != 0 )
            {
                $($('#cnblogs_post_body')[0]).prepend(content);
            }
        }   
    }
    
    GenerateContentList();
    </script>
    

    页脚Html代码

    新葡亰496net 36

     

    单身控件

    搜索

    #q { height:22px; width:120px; border:solid 1px #ccc; box-shadow:inset 0 0 3px #ddd; border-radius:4px;} .btn_my_zzk {  border:none; height:26px; width:60px; padding:1px; font-size:14px; cursor:pointer; position:relative;  vertical-align:middle; display:inline-block; background:#e6e6e6; border-radius:4px; color:#7c7c7c; } .btn_my_zzk:hover { background: #C6EFD2;}  .mySearch h3{ display: none;} /* .mySearch{ top: -50px; position: absolute;}*/
    

    小耗子游戏动画

    新葡亰496net 37

    忘记在何方上学到的。将以下代码粘贴到博客左侧栏通告即可。

    <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>
    

    5、Main Page

    #mainContent {  margin-top: 0px; padding-top: 0px; padding-right: 0px; background: #fff; padding-bottom: 0px;  float: right; width: 960px; padding-left: 0px; } #topics .post { background: #fff;} .postCon { padding: 15px 30px 0 20px;} .postDesc { margin: 0 30px; margin-bottom: 2px; padding: 8px 0px; font-size: 12px; color: #aaa; background: #fff; text-align: right;} .postDesc a { color: #aaa;} .postBody { padding: 0;} .day { background: #fff; padding: 0; margin: 0 0 20px 0;} .dayTitle { display: none;} .postTitle {  padding-bottom: 10px; font-size: 20px; font-weight: bold; color: #464646; padding-left: 30px;  background: url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_2015012508164381_easyicon_net_24.png') no-repeat 0 3px; } .postTitle a, .entrylistPosttitle  a { color: rgba(155, 186, 111, 1);} .entrylist { padding: 10px 20px; background: #fff;} .entrylistItem { margin: 10px 0; padding: 10px;} .entrylistPosttitle {  font-size: 18px; font-weight: bold; padding-left: 30px;  background: url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_2015012508164381_easyicon_net_24.png') no-repeat 0 3px; } .entrylistDescription{ display:none;} .entrylistPostSummary { padding: 20px 10px 0 20px;} .entrylistItemPostDesc { font-size: 12px; color: #999; margin: 0 10px; padding: 8px 0;} .entrylistItemPostDesc a { color: #aaa;} .c_b_p_desc { padding: 0px; line-height: 24px; color: #888;} .desc_img { float: right; margin: 0  0 0 20px ;} /* 摘要图片 */ .c_b_p_desc_readmore{ display:none;} #footer { font-size:12px; margin:20px; padding:12px; text-align:center; background:#55895B; color:#DDD; font-size:14px;} #Pager { margin-top: 20px; color: #686868; font-size: 12px; text-align: center;} .Pager a, .topicListFooter a {     text-decoration: none; display: inline-block; color: #777; background-color: #f5f5f5; border: 1px solid #eaeaea;     -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 1px 8px 2px; } .Pager a:hover, .topicListFooter a:hover {     border: 1px solid #e64a19; color: #fff !important;      background-image: -webkit-gradient(linear,left top,left bottom,from(#ff7043),to(#f4511e));     background-image: -webkit-linear-gradient(top,#ff7043,#f4511e);     background-color: #ff7043; background-image: linear-gradient(top,#ff7043,#f4511e);     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    

    卡通机械钟

    效果图

    新葡亰496net 38

    我在 学习来的。将以下代码粘贴到博客侧面栏文告即可。

    <embed wmode="transparent" src="http://www.paidtyping.com/uploads/allimg/191123/1513332V1-11.jpg" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
    

    6、博文样式

    #cnblogs_post_body p img { margin: 10px;} p span{ line-height: 1.8;}
    

    百度分享栏

    既然如此选拔写博客,自然期望被更三个人看到本人的篇章。所以,加多二个分享栏,使得访客能够轻巧将您的博客分享到各种社交平台是贰个不错的法力。

    效果图

    新葡亰496net 39

    进入 百度享受官方 页面,遵照导航提醒。

    选拔成效 > 设置开关 > 设置图片开关 > 获替代码。

    将代码粘贴到和讯管理后台的博客左边栏布告即可。

    标题

    #cnblogs_post_body h1 {  padding: 6px 20px; background: #93C8A2; color: #fff;  font-size: 18px; border-radius: 4px; clear: both; }   #cnblogs_post_body h2 {  text-align: left; padding: 6px 20px; overflow: auto; border-radius: 4px;  background: lightgray; color: #fff; font-size: 18px; clear: both; } #cnblogs_post_body h3 { font-size: 14px; font-weight: bold;} #cnblogs_post_body h4 { text-align:center; font-size: 14px; font-weight: normal; margin-top: 0px;} /* 用于图表标题*/ #cnblogs_post_body h5 {   font-size: 16px; font-weight: normal; padding-left: 30px; color: orange;  backgroundnull:url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_resize_png_new.png) left center no-repeat; }/* Point*/
    

    Github 角

    用作技师,总该有个 github 账户吧。可以动用 GitHub Corners 将博客和 Github 账户涉嫌起来。

    效果图

    新葡亰496net 40

    点击右上角,就足以跳转到 Github,依旧挺秀气的。

    动用方法如下:

    进入 GitHub Corners ,选拔本身钟意的 Github 角样式,拷贝对应的代码。记得将超链接 ahref 属性替换为你的 github 地址。

    然后将代码粘贴到页首Html代码

    列表

    #cnblogs_post_body ul, #cnblogs_post_body ol {  margin: 10px 10px; padding: 15px 20px 15px 70px; font-size: 15px;color: gray; box-shadow: 0 0 8px #aaa; clear: both;  background: #FCFAA9 url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_o_yellow-pin.png') no-repeat 10px 2px; }  
    

    标签云

    效果图

    新葡亰496net 41

    我从 学习的。

    使用办法如下:

    粘贴以下代码到页首Html代码

    <!-- 标签云相关库 -->
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513335919-15.jpg"></script>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513332127-16.jpg" type="text/javascript" charset="utf-8"></script>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513334547-17.jpg" type="text/javascript" charset="utf-8"></script>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513332V2-18.jpg" type="text/javascript" charset="utf-8"></script>
    
    <!-- 定时器 -->
    <script>
    function customTimer(inpId, fn) {
      if ($(inpId).length) {
        fn();
      }
      else {
        var intervalId = setInterval(function () {
          if ($(inpId).length) {  //如果存在了
            clearInterval(intervalId);  // 则关闭定时器
            customTimer(inpId, fn);              //执行自身
          }
        }, 100);
      }
    }
    function generateTagClouds() {
      $('.catListTag>ul').wrap('<div class='wrap' ></div>').parent().css({ 'width': '240px', 'height': '240px' });
    
      var options = {
        'range': [-200, 300],
        'gravity': -10,
        'xPos': 0.5,
        'yPos': 0.5,
        'gravityVector': [0, 0, 1],
        'interval': 100,
        'hoverGravityFactor': 0
      };
    
      $('div.wrap').starfieldTagCloud(options);
    }
    $(function () {
      ...
      customTimer('.catListTag', generateTagClouds);
      ...
    });
    </script>
    

    引用区块

    blockquote{ color:#555555;} .postBody blockquote{  border-left: 5px solid #ddd; padding:0 0 0 20px; margin-left: 20px  min-height: 35px; _height: 35px; line-height: 1.6em; }
    

    背景动漫

    效果图就不上了,各位看官请直接看本人的博客背景动漫,依旧挺有意思的吧。

    本身的背景动画是本人在游荡 Github 时找到的卡通片效果。其原理正是依赖 HTML5 新特征 canvas,渲染的动漫片效果。风野趣可以访谈一下:动漫片库原地址

    行使办法:

    粘贴以下代码到页首Html代码

    <!-- 背景动画 -->
    <canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
    <script src="http://www.paidtyping.com/uploads/allimg/191123/15133361L-14.jpg"></script>
    

    这段代码的情致正是概念一个 canvas 成分,然后利用笔者下载的 canvas-nest.min.js 库文件去渲染动漫。

    博客签字

    #MySignature {  margin: 10px 0; color: #999; font-size:12px; padding:0 0 0 90px;  background: url('http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_i.png') no-repeat 20px 12px;  border: dotted 2px #999; line-height: 200%; border-radius: 4px; height:74px; }
    

    以下代码在 设置 - 博客签字 中填写。

    作者:<a href="http://www.cnblogs.com/Pandaman/">Pandaman</a> <br /> 如果您喜欢这篇文章,不妨点个 <a onclick="this.innerHTML='谢谢';votePost(cb_entryId,'Digg')" href="javascript:void(0);">赞</a>!<br /> 欢迎转载、演绎或用于商业目的,但请务必保留本文署名(包含链接)。
    

    动态标题

    闲逛 codepen 时找到的三个动态文字效果:codepen上的卡通片文字效果,感到还挺炫的。小编做了贰个轻便的移植。

    效果图

    新葡亰496net 42

    运用方法:粘贴如下代码到页首Html代码即可。

    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513332636-58.jpg"></script>
    <link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/title.min.css" />
    

    以上援引文件被笔者压缩了,源码在自身的 Github 上:

    • title.js
    • title.css

    借使您也想接受这种动态题目,供给对源码做一些改过

    // 为了渲染 cavans 效果的标题,生成一个 title 列表
    function generateBlogTitle() {
      var root=document.createElement("div");
      root.id='ui';
      for (var i=0; i < 50; i  ) {
        var node=document.createElement("div");
        node.className='text';
        node.innerHTML='静默虚空';
        root.appendChild(node);
      }
      document.getElementById("blogTitle").appendChild(root);
    
      var subTitle=document.createElement("h2");
      subTitle.innerHTML='Talk is cheap, show me the code.';
      document.getElementById("blogTitle").appendChild(subTitle);
    }
    

    将上面代码中的 node.innerHTML='静默虚空'; 替换为您的主标题;

    subTitle.innerHTML='Talk is cheap, show me the code.'; 替换为您的子标题。

    除此以外,必要将博客管理后台的主标题、子标题清空。

    新葡亰496net 43

    评论

    #btn_comment_submit { border: none; height: 48px; width: 120px;} .comment_btn {  border: none; height: 48px; width: 120px; font-size: 18px; cursor: pointer; position: relative;  vertical-align: middle; display: inline-block; background: #55895B; color: #fff; } #btn_comment_submit:hover { background: #6DA47D;} .feedback_area_title { padding: 10px; font-size: 24px; font-weight: bold; color: #55895B; border-bottom: solid 6px #55895B;} .feedbackListSubtitle { font-size: 12px; color: #888;} .feedbackListSubtitle a { color: #888;} .comment_quote { background: #FCFAAC; padding: 15px; border: 1px solid #CCC;} #commentform_title {  color: #55895B; background-image: none; background-repeat: no-repeat; margin-bottom: 10px;  padding: 10px 20px 10px 10px; font-size: 24px; font-weight: bold; border-bottom: solid 6px #55895B; } .commentbox_title { width: 940px;} #commentbox_opt { position: absolute; text-align: right; width: 940px;} #comment_form { margin: 10px 0; padding: 0;} .commentform { margin: 10px 0; padding: 10px 20px; background: #fff;} #tbCommentBody {  margin-top: 10px; width: 940px; max-width: 940px; min-width: 940px; background: white;  color: #333; border: 2px solid #fff; box-shadow: inset 0 0 8px #aaa;  padding: 10px; height: 120px; font-size: 14px; min-height: 120px; } .feedbackItem { font-size: 14px; line-height: 24px; margin: 10px 0; padding: 20px; background: #F2F2F2; box-shadow: 0 0 5px #aaa;} } .feedbackListSubtitle { font-weight: normal;} #myposts .PostList { font-size:14px; line-height:24px; margin:10px 0; padding:20px; background:#F2F2F2; box-shadow:0 0 5px #aaa;} #myposts .postTitl2 a { color:#6DA47D;}
    

    随笔内容样式定制

    至于小说内容的体制定制,小编都写入了 cnblog.js 和 cnblog.css。当然,为了巩固访谈速度,那多个文本被小编压缩了。

    使用办法:增加以下代码到页首Html代码

    <!-- 自定制样式文件以及脚本 -->
    <script src="http://www.paidtyping.com/uploads/allimg/191123/1513333233-13.jpg"></script>
    <link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />
    

    由于,笔者其实是无意间生龙活虎风华正茂批注代码,所以仅在底下罗列那五个文本帮衬的特点。要是想在小编的源码底蕴上作一些改变,能够在那间访谈源码:

    cnblog.js
    cnblog.css

    此外杂项

    潜伏页面尾部一些因素:顶、踩、原野绿通道、作者新闻、广告等。

    #div_digg .diggnum {display:none;} .diggnum, .diggit  {display:none;} .buryit, .diggword {display:none;} #green_channel {display:none;} #author_profile {display: none;} #site_nav_under {display: none;} #comment_nav{display: none;} #ad_under_google {display: none;} .c_ad_block, .ad_text_commentbox {display: none;}
    

    带头像的批评栏

    博客园的切磋栏暗中同意不展现客商头像,这样显得特别干燥。所以作者增多了风姿洒脱段定制代码。

    效果图

    新葡亰496net 44

    js 源码

    7、分类与标签

    #BlogPostCategory a, #EntryTag a, #MyTag1_dtTagList a, .catListTag a {  margin-right: 6px; text-shadow: 0 1px 0 #fff; padding: 2px 5px; border: 1px solid #ECECEC;  background-color: rgba(0,0,0,0.04); text-decoration: none; border-radius: 3px;  color: #777; font-size: 12px; } #BlogPostCategory{     margin-right:5px; padding: 1px 30px; color:white; font-size:0px; /*不会用 js 隐藏文字“分类:”而想到的笨方法*/     backgroundnull:url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_20150127110428792_easyicon_net_16.png) no-repeat; } #EntryTag{     margin-right:5px; padding: 1px 30px; color:white; font-size:0px;      backgroundnull:url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_o_biaoqianfenlei.png) no-repeat; } /*#taglist_title_wrap { margin-left: auto; margin-right: auto; width:70%; text-align: left;}*/ #taglist_title {display:none;margin-bottom: 30px} #Gallery h2, .thumbTitle, .galleryTitle {display:none;} .entrylist h1 {display:none;}
    

    自动生成小说目录

    假诺您的文章内容较长,有个目录,能够帮读者比相当慢牢固感兴趣的原委。

    效果图

    新葡亰496net 45

    三、Back2Top

    #elevator_item {  position: fixed; right: 0px; bottom: 15px; z-index: 100020; display: none; width: 60px;  height: 100px; opacity: 1; -webkit-transition: opacity .4s ease-in-out;  -moz-transition: opacity .4s ease-in-out; -o-transition: opacity .4s ease-in-out } #elevator_item.off { visibility: hidden; opacity: 0;} #elevator {  display: block; width: 41px; height: 41px;  backgroundnull:url(http://images.cnblogs.com/cnblogs_com/Pandaman/653138/o_o_icon_top.png) center center no-repeat;  box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; background-color: #ccc;  -moz-transition: background-color .3s; -o-transition: background-color .3s;  -webkit-transition: background-color .3s; transition: background-color .3s; } #elevator:hover { background-color: rgba(83, 134, 88, 1);} #elevator:active { background-color: #0;} .top_blogtitle{ border-bottom: 1px solid #dddddd; background: #f1f1f1; height: 30px;} .top_blogtitle a{ margin-left: 20px; color: #757575; text-decoration: none;} .top_blogtitle a:hover{ text-decoration: underline;} .top_blogtitle span{ font-size: 12px; height: 30px; line-height: 30px;}
    

    以下代码填写在 页脚 Html 代码 框中。

    <div id="elevator_item"><a title="回到顶部" id="elevator" href="#top"></a></div>
    

    动态展现/掩盖的 Javascript 命令如下:

    $("#elevator_item").hide(); $(window).scroll(function(){     if($(this).scrollTop() > 500){$("#elevator_item").fadeIn();}     else{$("#elevator_item").fadeOut();}
    

    高效操作栏

    那么些也是自个儿从和讯别样朋友这儿学习的,可是实际上想不起出处了。

    新葡亰496net 46

    四、图片与表格的居中

    鉴于在 HTML 区块标签间的 马克down 格式语法不被帮忙(详见于此卡塔 尔(阿拉伯语:قطر‎,因而使用 马克down 语法撰写的图片无法水平居中显得,而 HTML 语法又展现繁杂。经过自个儿坚决搜寻,终于在 w3school 找到了相比完备的施工方案:

    添加 Javascript 命令:$("img").wrap("<div ></div>"); $("table").wrap("<center></center>");

    响应式布局

    本人对此博客做了部分轻松的响应式布局管理。使得读者在活动端上访问时不至于有过于不佳的体会。

    使用 @media 查询,你能够本着不相同的传媒类型定义不相同的样式。
    @media 能够本着区别的显示屏尺寸设置分化的体制,非常是后生可畏旦你必要安装规划响应式的页面,@media 是非常实用的。
    当你重新初始化浏览器大小的进度中,页面也会依照浏览器的上涨的幅度和惊人重复渲染页面。

    @media only screen and (max-width: 736px) {
      #navigator {
        width: 90%;
        margin: auto;
        float: none;
      }
    
      #mainContent {
        width: 90%;
        margin: auto;
        float: none;
      }
    
      #sideBar {
        width: 90%;
        margin: auto;
        float: none;
      }
    
      ...
    

    效果图

    新葡亰496net 47

    五、Table of Contents

    借使博文里面有目录,会给人组织清晰、生机勃勃种不言而喻标认为到,看目录就清楚那篇博文要上课的内容,何况点击目录标题就能够跳转到具体的剧情,那样园友们在看博客的时候就足以很便利地浏览本人感兴趣的原委,可是缺憾的是天涯论坛不扶持博文目录的成形。

    感激 孤傲苍狼 分享了 自动生成博文目录的方法,由于源码过长,因而另启一文存档。


    体制的吹捧

    余下的内容就是生龙活虎对零碎的鼓吹细节了。比方本身对标题文字扩大了阴影效果,表格重新渲染了颜色等等。假使厌倦,请自行参照他事他说加以考察小编的源码改过。

    资料

    github-corners

    canvas-nest

    codepen上的动画片文字效果

    吹嘘和讯界面(让您的博客尤其酣畅卡塔 尔(阿拉伯语:قطر‎希望对你有用

    jQuery]3D效果的标签云

    本文由新葡亰496net发布于奥门新萄京娱乐场,转载请注明出处:新葡亰496net:详谈如何定制自己的博客园皮肤,

    关键词: