如何为我们的博客网站添加时光轴记录

投稿   懿古今  2016-04-18 07:36:21  1,040 人阅读  46 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

我们玩独立博客的,都会有一个关于我们或个人档案的页面,专门用来记录我们折腾博客的一些重大事情。如果用时光轴来记录这些重大事情,可以让用户更加直观地看到我们的发展历程,这样对用户体验应该是有好处的。所以,今天就跟大家说一说如何为我们的博客网站添加时光轴记录,包括WordPress、zblog等程序按建站的都可以。

如何为我们的博客网站添加时光轴记录

为博客网站添加时光轴记录的详细操作步骤(以WordPress为例说明):

1、在我们所使用的WordPress主题的style.css文件最后面添加以下代码:

  1. /* 站点动态时间轴 */
  2. #teamnewslist ol{list-style:none;margin-left36px;padding-left14px;border-left2px solid #eee;font-size18px;color#666;}
  3. #teamnewslist b{font-size12px;font-weightnormal;color#999;displayblock;positionrelative;margin-bottom:5px;}
  4. #teamnewslist b::after{positionabsolute;top6px;left: -22px;content'';width14px;height14px;border-radius: 50%;background-color#fff;border2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
  5. #teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
  6. #teamnewslist li:hover{color#555;}
  7. #teamnewslist li:hover b::after{border-color#C01E22;}
  8. #teamnewslist li:hover b{color#C01E22;}

如何为我们的博客网站添加时光轴记录 第2张

2、在编辑页面或文章时,请切换到文本模式, 然后按以下格式编辑内容:

  1. <div id="teamnewslist">
  2.     <ol>
  3.         <li><b>2016年04月</b>根据Unite主题修改而成<a href="http://yigujin.cn/nana/" target="_blank">Nana主题</a>,并启用。</li>
  4.         <li><b>2015年07月</b>根据Unite主题修改而成博客、CMS和博客导航三合一主题:Three主题,并启用。</li>
  5.         <li><b>2015年07月</b>根据Unite主题简化而成移动版主题:<a title="Unite主题" href="http://yigujin.cn/366.html" target="_blank">miniUnite主题</a></li>
  6.         <li><b>2015年07月</b>根据MFBegin主题修改而成<a title="Unite主题" href="http://yigujin.cn/unite" target="_blank">Unite主题</a></li>
  7.         <li><b>2015年06月</b>模仿知更鸟Begin而成<a title="MFBegin主题" href="http://yigujin.cn/mfbegin" target="_blank">MFBegin主题</a>,已停用。</li>
  8.     </ol>
  9. </div>

3、以后增加时光轴记录的时候,就切换到文本模式按以下格式一条条记录增加即可。

  1. <li><b>2016年04月</b>根据Unite主题修改而成<a href="http://yigujin.cn/nana/" target="_blank">Nana主题</a>,并启用。</li>

温馨提示:

1、具体效果,请移步《关于我们》。

2、由于这个时光轴仅仅是通过CSS来实现,所以在编辑时光轴记录的时候一定要严格按照相应的格式编写才行。

3、同样是因为时光轴是通过CSS来实现,所以任何博客网站,包括WordPress、zblog等程序建立的博客网站都可以按这个方法成功添加时光轴记录。

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:http://yigujin.wang/716.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    哦, 原来这个是这么出来的

  2. Koolight
    Koolight 【尚书】 @回复

    晚上看到有人在群里问时光轴,所以跑来找教程了。

    • boke112导航
      boke112导航【村长】2016-10-23 23:28  回复

      @Koolight这个时光轴比较简单,而且使用频率不提高,完全可以通过CSS来达成目的,添加的时候就直接复制格式 然后修改文字即可。

  3. BeautifulDays
    BeautifulDays 【小白】 @回复

    哈哈,受教了,之前就想找个纯代码时间时间轴的效果呢

  4. 归途网
    归途网 【举人】 @回复

    我已经用在了我的博客上 [偷笑] [偷笑] [偷笑] ,这算不算侵权

  5. 流年哔哔
    流年哔哔 【秀才】 @回复

    之前也准备弄一个,博主这个如果是折叠的就好了 [呲牙] 因为一旦添加多了,页面就会狠长。。

  6. 破浪无忧Blog
    破浪无忧Blog 【小白】 @回复

    博主厉害,非常不错。 [强]

  7. 大城小我
    大城小我 【状元】 @回复

    多谢分享,正好需要这个呀

  8. 微部落博客
    微部落博客 【丞相】 @回复

    怎么找不到排行榜了

  9. 陌小雨博客
    陌小雨博客 【进士】 @回复

    恩,简洁好看,改天我分享个可以折叠年份的升级版本,^_^

  10. 自由人理财
    自由人理财 【秀才】 @回复

    博主经常倒腾代码,挺厉害的

  11. saber
    saber 【秀才】 @回复

    emlog也可以。已经试过了。

    • boke112导航
      boke112导航【村长】2016-04-19 21:30  回复

      @saber这个是通过CSS实现的,无关建站程序的,哪怕是HTML站点也是可以

  12. 归途网
    归途网 【举人】 @回复

    正好我的网站上需要,拿过来用就好了,谢谢 博主

  13. 阿飞
    阿飞 【进士】 @回复

    佩服。看着这些个代码头晕。

  14. 微部落博客
    微部落博客 【丞相】 @回复

    哈哈,博主精力真旺盛,调试这些代码是很费时间和精力的

  15. 米粒博客
    米粒博客 【举人】 @回复

    换了虚拟空间,最后不愿意因为换空间服务商,再去折腾备案,还是决定把阿里免费虚拟主机换成阿里ecs服务器了。经过几天的苦逼奋战 终于把我的博客折腾好了,可以放心走亲访友,过来看看,要满血出动啦! 哇哈哈

    • boke112导航
      boke112导航【村长】2016-04-19 08:57  回复

      @米粒博客[强] 才几天就搞定了,挺厉害的。我现在服务器就是在阿里云,不想折腾服务器,还是好好折腾博客和内容吧

  16. 江西养牛人
    江西养牛人 【状元】 @回复

    这个还真实用,可以记录一些精悍短小的事情。博主现在是越来越实力派了。一如既往的顶起。

  17. 好文推荐
    好文推荐 【尚书】 @回复

    感谢分享。。。

  18. 雅兮网
    雅兮网 【尚书】 @回复

    早就在等老古这个教程了,非常棒,我得赶紧将雅兮网的时光轴做出来,时间久了,真的就想不起来了, [衰]

  19. 橘子书
    橘子书 【丞相】 @回复

    等我哪天有空闲了再来试试

  20. videoclub
    videoclub 【尚书】 @回复

    很好的东西 支持一下

  21. 玉满斋
    玉满斋 【尚书】 @回复

    大家可以看看我的“关于我们”,效果很不错!

    http://www.ymanz.com/about.html

  22. 小C博客
    小C博客 【进士】 @回复

    好东西!!我喜欢。等有时间拿走了!!

  23. 明月登楼
    明月登楼 【王爷】 @回复

    嗯,学些了!这个不错!

  24. E书之家
    E书之家 【进士】 @回复

    这个好,可以通用