博客主题自带的备案号页脚样式不够美观，一直看不太顺眼，所以就有了这篇教程。如何美化备案号页脚？

css样式

.github-badge {
    display: inline-block;
    border-radius: 4px;

    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;

    background-color: #ABBAC3;

    margin-bottom: 5px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-yellowgreen {
    background-color: #a4a61d !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

css样式添加方法

以下方法仅针对使用typecho handsome主题的小伙伴，其它还需自己酌情操作。
打开Typecho网站后台->外观->设置外观->开发者设置->自定义CSS，添加以上CSS样式。

html代码

<div>
    <div class="github-badge">
        <span class="badge-subject">build</span><span class="badge-value bg-brightgreen">passing</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">build</span><span class="badge-value bg-red">failure</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">tests</span><span class="badge-value bg-green">185 passed, 7 skipped</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">tests</span><span class="badge-value">inaccessible</span>
    </div></div><div>
    <div class="github-badge">
        <span class="badge-subject">npm</span><span class="badge-value bg-blue">v5.5.1</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">node</span><span class="badge-value bg-brightgreen">&gt;=0.4.0</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">gem</span><span class="badge-value bg-orange">v0.2.5</span>
    </div></div><div>
    <div class="github-badge">
        <span class="badge-subject">stars</span><span class="badge-value bg-brightgreen">☆☆☆☆☆</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">node</span><span class="badge-value bg-yellowgreen">★★★☆☆</span>
    </div></div><div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-brightgreen">brightgreen</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-green">green</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-yellowgreen">yellowgreen</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-yellow">yellow</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-orange">orange</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-red">red</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-lightgrey">lightgrey</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value">grey</span>
    </div>
    <div class="github-badge">
        <span class="badge-subject">color</span><span class="badge-value bg-blue">blue</span>
    </div></div>

handsome主题使用方法

修改footer.php如下代码

<div class="wrapper bg-light">
     <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>

      </span>

      <span class="text-ellipsis">
      <?php $this->options->BottomleftInfo(); ?>

        <a class="github-badge">
         <span class="badge-subject">Copyright</span>
         <span class="badge-value bg-brightgreen">&copy;&nbsp;<?php echo date("Y");?></span>
        </a>
        <a class="github-badge" target="_blank" href="http://www.beian.miit.gov.cn">
         <span class="badge-subject">赣ICP备</span>
         <span class="badge-value bg-brightgreen">20009527号</span>
        </a>

        <a class="github-badge" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo">
         <span class="badge-subject">赣公网安备</span>
         <span class="badge-value bg-brightgreen">36100202000255号</span>
        </a>

      </span>
    </div>

效果

修改后效果如下，顺眼多了