Typecho主题网站侧栏添加视频模块
Typecho主题的一个美化，在侧栏添加一个视频模板，比较新颖个性，可以更好的引导网友点击视频，提升网站点击浏览，喜欢的朋又可以收藏本站，下载使用。效果图：
joe主题教程
将以下代码放置在 header.php 文件中末尾的位置。
<script src="https://www.whbblog.cn/js/jquery-latest.js"></script>将以下代码放置在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 文件中末尾的位置。
<script src="https://www.whbblog.cn/js/jquery-latest.js"></script>将以下代码放置在 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>按照以上方法就可以看到效果了，喜欢的记得收藏本站。
页:
[1]