网站主题美化代码分享(全部通过测试合集)

分享
372 0

[start-plane type="1"]前言[/start-plane]

本页主题美化内容博主在Wordpress主题CoreNext 全部测试通过,无任何错误,后续我还会继续收集完善一些美化主题内容。

[start-plane type="2"]说明[/start-plane]

① 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后在进行美化。

② 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件。

③ CSS代码添加到后台:主题设置—>自定义代码—>自定义CSS样式

④ HTML小工具:添加网站后台—>外观–>小工具–>区块—>选择放置的位置—>把代码复制进去,保存即可。

[start-plane type="3"]内容分享[/start-plane]

[zd-plane title="用户头像呼吸光环+鼠标悬停旋转放大"]使用方法:主题设置—>自定义代码—>自定义CSS样式

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*头像呼吸光环和鼠标悬停旋转放大结束*/

[/zd-plane]

[zd-plane title="CSS样式代码实现网站全局变灰操作方法"]使用方法:主题设置—>自定义代码—>自定义CSS样式

/*网站整体灰白样式开始一*/
          :root {
            --BG_COLOR: #121212;
            --FONT_COLOR: rgba(255, 255, 255, .87);
            --TAB_TITLES_COLOR: rgba(255, 255, 255, .6);
            --SUB_TITLE_COLOR: rgba(255, 255, 255, .38);
            --TAB_TITLES_HOVER_COLOR: #fff;
            --TITLE_HOVER_COLOR: #0D9BFF;
            --RIGHT_CONTENT_TEXT_COLOR: rgba(255, 255, 255, .5);
            --FOCUS_BG_COLOR: #222222;
            --TAB_SUBTITLES_BG_COLOR: rgba(50, 51, 53, .7);
            --IMG_DEFAULT_COLOR: #333333;
          }
          html {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
          }
          body{
            filter:gray;
          }
/*网站整体灰白样式开始一*/

[/zd-plane]

[zd-plane title="版权申明,样式如本站"]使用方法:主题设置—>文章设置—>文章版权模块

<fieldset style=" border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
      <legend align="center" style=" margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;">
        版权声明
      </legend>
      <span class="btn-info btn-xs">1</span> 本 网 站 名 称:<span style="color: #3333ff"><span style="color: #09ace2; font-size: 15px"><strong>替换你网站名称</strong></span></span><br>
      <span class="btn-info btn-xs">2</span> 本站永久网址:<font color="#09ace2">https://www.youblog.cn</font><br>
<span class="btn-info btn-xs">3</span> 当前文章标题:<font color="#09ace2">#postname# </font><br>
<span class="btn-info btn-xs">4</span> 当前文章网址:<font color="#09ace2">#url#</font><br>
      <span class="btn-info btn-xs">5</span> 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长<a href="http://wpa.qq.com/msgrd?v=3&uin=你的QQ号吗&site=qq&menu=yes" target="_blank">QQ</a>进行删除处理。<br>
      <span class="btn-info btn-xs">6</span> 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。<br>
            <span class="btn-info btn-xs">7</span> 如您发现本站提供资源链接失效,请联系我们处理。<br>
    </fieldset>

[/zd-plane]

[zd-plane title="评论框随机一言,样式如本站评论框 "]将代码放入页脚代码即可[reply]

<script>
 $.getJSON("https://api.yum6.cn/yan.php?format=json",function(data){
 $("#comment").text(data.text);
 });
 $(function(){
 $("#comment").click(function() {
 $(this).select();
 })
 })
</script>

[/reply][/zd-plane]

[zd-plane title="博客增加随便看看功能"][postcard type="list"]231[/postcard][/zd-plane]

[zd-plane title="侧边栏添加滚动播报小工具"][postcard type="list"]286[/postcard][/zd-plane]

[zd-plane title="html自动打字代码"][postcard type="list"]288[/postcard][/zd-plane]

[zd-plane title="随机一言和古诗词"][postcard type="list"]453[/postcard][/zd-plane]

[zd-plane title="一段代码禁止右键查看源代码和按键F12"][postcard type="list"]462[/postcard][/zd-plane]

[zd-plane title="带日历随机一句古诗词"][postcard type="list"]522[/postcard][/zd-plane]

[zd-plane title="文章页面底部美化"][postcard type="list"]554[/postcard][/zd-plane]

[zd-plane title="首页文章缩略图鼠标悬浮放大特效"][postcard type="list"]562[/postcard][/zd-plane]

[zd-plane title="导航菜单栏美化"][postcard type="list"]561[/postcard][/zd-plane]

[zd-plane title="建站时间统计代码"][postcard type="list"]577[/postcard][/zd-plane]

最后更新 2024-03-06
那年今日
09月
13日
评论 ( 0 )
悄悄话