18 January 2014

部落格 | 教程 · Date Header设计


1:登入你的 Blogger ID
2:按 Template
3:按 Customize
 
 
4:按 Adcanced - Add CSS


5:然后在右边 Paste 下面的代码(请按Ctrl+C复制下面代码)

h2.date-header
{
    position: relative;
    width:20%;
    font-size: 1.5em;
    font-weight: bold;
    padding: 7px 20px 7px 25px;
    margin: 0 10px 50px 35px;
    }

h2:before, h2:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    }

/* wrap */
h2.date-header:after {
    left: 0px;
    top: 100%;
    border-width: 5px 5px;
    border-style: solid;
    border-color: #666 #666 transparent transparent;
    }

/* flag */
h2.date-header:before {
    left: auto;
    right: -2px;
    top: 0px;
    border-width: 20px 10px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    }

/* Ribbon color */
h2.date-header { background:url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg); }
P/s:红色字体是你的图片连接

6:过后按右上角的 Apply to Blog

No comments: