主题美化-添加文章统计信息美化框小工具

教程5个月前更新壳壳

161 0 0

前言

可以在你的文章添加一个文章统计的小框，让用户更加了解你的网站

展示效果图

主题美化-添加文章统计信息美化框小工具 \

实现教程

首先需要把下面的代码放入onenav/header.php这个文件里（必须放）

隐藏内容！

登录后才能查看！

然后再把下面的图片放入这个目录onenav/img（是演示效果的图片，不喜欢可以替换成自己的），图片已经打包好了，zip解压到这个目录下即可

最后到外观/小工具/区块 添加下面的代码即可

<!--信息统计开始 www.xbnb.cn-->
<div class="tongji">
<section class="cards pcbdmapss">
    <div class="cardhu card--oil">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
               <img src="/wp-content/themes/onenav/img/%E4%BC%9A%E5%91%98.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><strong><script type="text/javascript">
document.write(xbnb_jstext);
</script></strong></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/wp-content/themes/onenav/img/%E4%BC%9A%E5%91%98.png">
            </div>
            <div class="card__stuff-text">网站用户数</div>
        </div>
    </div>
    <div class="cardhu card--tree">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/wp-content/themes/onenav/img/%E6%95%99%E7%A8%8B.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><script type="text/javascript">
document.write(xbnb_rzzs);
</script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/wp-content/themes/onenav/img/%E6%95%99%E7%A8%8B.png">
            </div>
            <div class="card__stuff-text"> 所有文章</div>
        </div>
    </div>
    <div class="cardhu card--water">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/wp-content/themes/onenav/img/时间.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><script type="text/javascript">
document.write(xbnb_wdyx);
</script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/wp-content/themes/onenav/img/时间.png">
            </div>
            <div class="card__stuff-text"> 建站天数</div>
        </div>
    </div>
    <div class="cardhu card--oil1">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/wp-content/themes/onenav/img/写文章.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><script type="text/javascript">
document.write(xbnb_24h);
</script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/wp-content/themes/onenav/img/写文章.png">
            </div>
            <div class="card__stuff-text"> 今日更新</div>
        </div>
    </div>
    <div class="cardhu card--tree2">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img src="/wp-content/themes/onenav/img/renwu.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big">+<script type="text/javascript">
          document.write(xbnb_view);
        </script></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img src="/wp-content/themes/onenav/img/renwu.png">
            </div>
            <div class="card__stuff-text"> 文章浏览</div>
        </div>
    </div>
    <div class="cardhu card--water3">
        <div class="card__svg-container">
            <div class="card__svg-wrapper">
                <img style="animation: 10s linear 0s normal none infinite running fa-spin;" src="/wp-content/themes/zibll/img/晴.png">
            </div>
        </div>
        <div class="card__count-container">
            <div class="card__count-text">
                <span class="card__count-text--big"><p id="ptime"></p></span>
            </div>
        </div>
        <div class="card__stuff-container">
            <div class="card__stuff-icon">
                <img style="animation: 10s linear 0s normal none infinite running fa-spin;" src="/wp-content/themes/zibll/img/晴.png">
            </div>
            <div class="card__stuff-text">   实时时间</div>
        </div>
    </div>
</section>
<style>
@media (max-width: 800px){.tongji{display: none;}}
section1 {
  width: 97vw;
  max-width: 100%;
  min-width: 58.9rem;
  margin: 0 0px;
}
.tongji{
        margin-bottom: 20px;
}
.cards {
  padding-top: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.cardhu {
  width: 14%;
    height: 10rem;
    background-color: var(--main-bg-color);
    border-radius: 15px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--main-color);
    font-size: 0.3rem;
    font-weight: 800;
    letter-spacing: 0.05rem;
    box-shadow: 0 0rem 2rem #aac1c7;
}

.card__svg-container {
  height: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.card__svg-wrapper {
  width: 5rem;
}
.card__count-container {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card__count-text {
 /* -webkit-transform: translate(0, -0.5rem);
          transform: translate(0, -0.5rem);*/
}
.card__count-text--big {
  text-transform: uppercase;
  font-size: 2rem;
  /*font-weight: 300;*/
}
.card__stuff-container {
  margin: 0 auto;
  width: 90%;
  height: 35%;
  border-top: 2px solid #eabbbc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card__stuff-icon, .card__stuff-text {
  display: inline-block;
}
.card__stuff-icon {
  width: 1.5rem;
  height: 1.3rem;
  -webkit-transform: translate(0, -0.3rem);
          transform: translate(0, -0.3rem);
}
.card__stuff-text {
  text-transform: uppercase;
  margin-left: .4rem;
  -webkit-transform: translate(0, -0.2rem);
          transform: translate(0, -0.2rem);
font-size: 1.2rem;
}
.cardhu:after {
  content: "";
    display: block;
    position: absolute;
    top: -125px;
    left: 4%;
    width: 75%;
    height: 0.625rem;
    -webkit-transform: translate(1.5rem, 22.5rem);
    transform: translate(1.5rem, 22.5rem);
}
.card--oil:after {
  background-image: -webkit-radial-gradient(top, rgb(250 194 7), rgba(179, 62, 62, 0) 70%);
  
}
.card--tree:after {
  background-image: -webkit-radial-gradient(top, rgb(255 187 187), rgba(0, 0, 0, 0) 70%);
  
}
.card--water:after {
  background-image: -webkit-radial-gradient(top, rgb(255 85 88), rgba(0, 0, 0, 0) 70%);
  
}
.card--oil1:after {
  background-image: -webkit-radial-gradient(top, rgb(131 238 156), rgba(0, 0, 0, 0) 70%);
  
}
.card--tree2:after {
  background-image: -webkit-radial-gradient(top, rgb(238 131 150), rgba(0, 0, 0, 0) 70%);
  
}
.card--water3:after {
  background-image: -webkit-radial-gradient(top, rgb(254 255 0), rgba(0, 0, 0, 0) 70%);
  
}</style>
<script>
 var mytime = setInterval(function () {
 getTime();
 },1000);
 function getTime() {
 var d = new Date();
 var t = d.toLocaleTimeString();
 document.getElementById("ptime").innerHTML = t;
 }
 </script>
</div><!--信息统计结束 www.xbnb.cn-->

教程结束，更多可玩性可以收藏本站，不定时分享新教程

附
件
下
载

文件名称：主题美化-添加文章统计信息美化框小工具

更新日期：

文件大小：15KB

提示：如遇问题或者链接失效请联系站长，欢迎捐赠本站以及广告合作！

点击下载

温馨提示：本文最后更新于2024-05-22 09:39:18，某些文章具有时效性，若有错误或已失效，请在下方评论区留言或站内联系站长。

# 教程 # 小工具 # 教程 # 美化

本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。

如果用于其他用途，请购买正版支持作者，谢谢！若您认为「KKOK.CC」发布的内容若侵犯到您的权益，请联系站长邮箱:[email protected] 进行删除处理。
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。