51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

主题Theme Joe3添加“自定义”侧边栏HTML代码

效果

QQ20241129-104702.png

后台--外观--主题--侧边栏,拉到最下面点击添加选择自定义内容

QQ20241129-102536.png

代码很乱酬和用吧

在里面复制下面代码

<style>
.my-div {
  border-radius: 15px; /* 圆角15px */
  width: auto; /* 宽度自动 */
  height: 305px; /*栏目整体高度280px */
  /*font-weight: bold;  字体加粗 */
  font-size: 16px; /* 字体大小18px */
  text-align: left; /* 文本靠左对齐 */
}
.my-p{
  /**自定义标签名字的样式**/
  border-bottom: 1px solid #f0f0f0; /* 添加1px黑色下边框 */
  /*padding: 15px;  添加15px内边距 */
  line-height: 40px;  /*设置行高为35px */
  padding-left: 15px; /* 添加15px左内边距 */
}
.my-img{
  /**图片的最大尺寸**/
  width: 280px; /* 设置宽度为200像素 */
  height: 115px; /* 设置高度为100像素 */
}
.element {
  /**iframe标签**/
  margin-left: -10px;
  margin-right: 0px;
  margin-top: -10px;
  margin-bottom: 0px;
}
</style>
<div class="my-div">
        <!--主题自带的标签样式-->
        <div class="joe_aside__item-title">
          <i class="joe-font joe-icon-message"></i>
          <span class="text">站点公告</span>
        </div>
  <!--<p class="my-p" style="">站点公告</p>-->
  <p style="margin-top: 5px;margin-bottom: 5px;font-size: 14px;margin-left: 5px;color: #FFA500;">本站开启注册评论<br />
  如果需要发表文章请在留言板告知<br />
  有什么需求或建议可以在留言板告知</p>
 <!--<p class="my-p" style="border-top: 1px solid #f0f0f0;">这是自定义HTML</p>-->
 <img src="/upload/~/.halo2/attachments/upload/2024-11/wx123.png" alt="微信qq" />
 <div style="width:auto;border-bottom: 1px solid #f0f0f0;height: 5px;"></div>
 <!--<iframe class="element" frameborder="no" border="0" marginwidth="0" marginheight="0" width=auto height=86 src="//music.163.com/outchain/player?type=2&id=28864602&auto=1&height=66"></iframe>-->
<--
网易云音乐//music.163.com/outchain/player?type=2&id=434070315&auto=1&height=66
只要替换player?type=2&id=434070315&auto=1&height=66也就是//music.163.com/outchain/后面的
-->
 <iframe class="element" frameborder="no" border="0" marginwidth="0" marginheight="0" width=auto height=86 src="//music.163.com/outchain/player?type=2&id=434070315&auto=1&height=66"></iframe>
`</div>`

退出全屏然后保存





赞(0)
未经允许不得转载:工具盒子 » 主题Theme Joe3添加“自定义”侧边栏HTML代码