wordpress博客添加折疊功能時光軸美化自己的網站并記錄網站發展歷史

  • A+
所屬分類:知更鳥begin美化

 

wordpress博客添加折疊功能時光軸美化自己的網站并記錄網站發展歷史
  我們玩獨立博客的,都會有一個關于我們或個人檔案的頁面,專門用來記錄我們折騰博客、網站的一些重大事情或者發展歷程。如果用時光軸來記錄這些重大事情,可以讓用戶更加直觀地看到我們的發展歷程,這樣對用戶體驗應該是有好處的。所以,今天就跟大家說一說如何為我們的博客網站添加時光軸記錄,包括WordPress、zblog等程序建站的都可以。

博主提供方法很簡單,就是一段代碼,一段css。時光軸的效果也不錯,比較簡潔,適合記錄博客的一些重大事件。

詳細操作步驟(以WordPress為例說明):

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

    1. /*?站點動態時間軸?*/
    2. #teamnewslist?ol{list-style:none;padding-left:?14px;border-left:?2px?solid?#eee;font-size:?15px;color:?#666;}
    3. #teamnewslist?b{font-size:?12px;font-weight:?normal;color:?#999;display:?block;position:?relative;margin-bottom:5px;}
    4. #teamnewslist?b::after{position:?absolute;top:?6px;left:?-22px;content:?'';width:?14px;height:?14px;border-radius:?50%;background-color:?#fff;border:?2px?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;}
    9. #teamnewslist{padding-left:33px;}
    10. #timedd?dd{margin:0;padding:0;}
    11. #timedd?dl{width:100%;height:auto;display:block;overflow:hidden;margin:0?auto;font-size:10pt;line-height:160%;}
    12. #timedd?dt,dt?a{width:100%;height:auto;display:block;font-weight:?bold;color:#333;font-size:18px;cursor:pointer;padding:?1px?0?0?14px;}
    13. #timedd?dt?a:hover{color:?#FF0000;}

wordpress博客添加折疊功能時光軸美化自己的網站并記錄網站發展歷史
2、在編輯頁面或文章時,請切換到文本模式, 然后按以下格式編輯內容:

  1. <div?id="timedd">
  2. ******這是第一個年份開始,用的時候刪除這句話!******
  3. <dt?onClick=javascript:ShowFLT(1)?href="javascript:void(null)"><a?href="javascript:;">2014</a></dt>
  4. ?????????<dd?id=LM1>
  5. ??<div?id="teamnewslist">
  6. ????<ol>
  7. ????<li><b>2018年X月X日</b>.........</li>
  8. ???????????<li><b>20180101日</b>熱烈慶祝2018年元旦快樂。</li>
  9. ???</ol>
  10. ???</div>
  11. ???</dd>
  12. ******這是第一個年份結束,用的時候刪除這句話!******
  13. ******這是第二個年份開始,用的時候刪除這句話!******
  14. <dt?onClick=javascript:ShowFLT(2)?href="javascript:void(null)"><a?href="javascript:;">2013</a></dt>
  15. ?????????<dd?id=LM2?style="DISPLAY:?none">
  16. ??<div?id="teamnewslist">
  17. ???????<ol>
  18. ???????????<li><b>20170829日</b>成功使用代碼實現郵件發送。</li>
  19. ???????????<li><b>20170822日</b>成功安裝知更鳥Begin5.3版主題。</li>
  20. ???????????<li><b>20170821日</b>成功安裝一個全新的WordPress站點。</li>
  21. ???????????<li><b>20170821日</b>備案順利通過,備案/許可證編號為:皖ICP備17009675號-2。</li>
  22. ???????????<li><b>20170810日</b>注冊國際頂級域名www.ixianzong.com,并購買獨享虛擬主機,申請備案。</li>
  23. ???????</ol>
  24. ???</div>
  25. ???????</dd>
  26. ******這是第二個年份結束,用的時候刪除這句話!******
  27. </div>

大家可以看出來第一個年份代碼和第二個是一樣的,其實就是一段代碼一直循環。如果需要添加年份,就復制其中一段代碼粘貼到后面就可以了,其中上面這段代碼中需要注意的地方有三個。

以下這段代碼是我從上面的每段代碼開頭復制的,以便給大家說清楚需要修改的地方!這段代碼不添加在任何地方,只是為了給大家說明!

    1. <dt?onClick=javascript:ShowFLT(1)?href="javascript:void(null)"><a?href="javascript:;">2018</a></dt><dd?id=LM1>
    2. <dt?onClick=javascript:ShowFLT(2)?href="javascript:void(null)"><a?href="javascript:;">2017</a></dt><dd?id=LM2?style="DISPLAY:?none">

這上面代碼里面的2017 2018 都是年份,里面的ShowFLT(1)和ShowFLT(2)還有dd id=LM1和dd id=LM2 這個1和2就是順序。

如果你想添加一個2016年的年份的話,就把上面循環的那段代碼復制一遍按照格式粘貼在下面,然后把ShowFLT和LM 改成 3 。就行了。

例如:

  1. ******這是第一個年份開始,用的時候刪除這句話!******
  2. <dt?onClick=javascript:ShowFLT(3)?href="javascript:void(null)"><a?href="javascript:;">2015</a></dt>
  3. ?????????<dd?id=LM3>
  4. ??<div?id="teamnewslist">
  5. ????<ol>
  6. ????<li><b>2017年X月X日</b>.........</li>
  7. ??????????<li><b>20170810日</b>注冊國際頂級域名www.ixianzong.com,并購買獨享虛擬主機,申請備案。</li>
  8. ???</ol>
  9. ???</div>
  10. ???</dd>
  11. ******這是第一個年份結束,用的時候刪除這句話!******

如果你想默認展開時間軸記錄,就把?<dd?id=LM2?style="DISPLAY:?none">中的style="DISPLAY:?none"刪除,比如以上代碼中我默認展開的是2018年的時間軸,所以我刪除了style="DISPLAY: none"如果你想默認全部展開,就全部刪除,反之全部添加!

如果你想在所在年份里面添加一條記錄就把上面代碼中的其中一條記錄<li></li>復制粘貼,然后修改文字即可!

  1. <li><b>2015129日</b>這是第一條</li>
  2. <li><b>2015127日</b>這是第二條</li>
  3. <li><b>2015123日</b>就是這樣搞</li>

3、在你的博客footer.php文件里面的之前添加這段js!

    1. <script>
    2. var?number=2;?//定義條目數
    3. function?LMYC()?{
    4. var?lbmc;
    5. ????for?(i=1;i<=number;i++)?{
    6. ????????lbmc?=?eval('LM'?+?i);
    7. ????????lbmc.style.display?=?'none';
    8. ????}
    9. }
    10. function?ShowFLT(i)?{
    11. ????lbmc?=?eval('LM'?+?i);
    12. ????if?(lbmc.style.display?==?'none')?{
    13. ????????LMYC();
    14. ????????lbmc.style.display?=?'';
    15. ????}
    16. ????else?{
    17. ????????lbmc.style.display?=?'none';
    18. ????}
    19. }
    20. </script>

這段js需要修改的地方就是上面的定義條目數 ,這個定義條目數是和上面有幾個年份對應的,如果你有三個年份你就修改成3 ,4個 你就修改成4!

再說簡單一點就是這篇文章最上面的那段代碼,你循環了幾次就填寫幾 !上面我循環了兩次所以我這里是2!

  • 我的微信
  • 技術支持添加二維碼
  • weinxin
  • 我的QQ二維碼
  • 教程下載請掃二維碼
  • weinxin
馬找錢

發表評論

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: