typecho网站侧栏添加小姐姐视频组件

效果展示

joe主题教程
将以下代码放置在 header.php 文件中末尾的位置。

将以下代码放置在joe主题-侧栏设置-自定义PC侧栏模块里.

<section data-id="sidebar-meimei" class="mb-4">
  <style>#player { margin: 10px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 10px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style>
  <button type="button" id="ckxjj">点我看小姐姐视频</button>
  <div id="xjjsp">
    <video id="player" src="" controls alt="小姐姐视频"></video>
    <div class="kzsp">
      <button id="switch">连续: 开</button>
      <button id="next">下一个</button>
    </div>
    <button type="button" id="gbxjj">关闭视频</button>
  </div>
  <script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
  </script>
</section>

其他主题教程
将以下代码放置在 header.php 文件中末尾的位置。

将以下代码放置在 sidebar.php 文件中合适的位置。

<section data-id="sidebar-meimei" class="mb-4">
  <style>#player { margin: 10px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 10px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style>
  <button type="button" id="ckxjj">点我看小姐姐视频</button>
  <div id="xjjsp">
    <video id="player" src="" controls alt="小姐姐视频"></video>
    <div class="kzsp">
      <button id="switch">连续: 开</button>
      <button id="next">下一个</button>
    </div>
    <button type="button" id="gbxjj">关闭视频</button>
  </div>
  <script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
  </script>
</section>