Typecho主题网站侧栏添加视频模块

Typecho主题的一个美化，在侧栏添加一个视频模板，比较新颖个性，可以更好的引导网友点击视频，提升网站点击浏览，喜欢的朋又可以收藏本站，下载使用。

效果图：



joe主题教程

将以下代码放置在 header.php 文件中末尾的位置。

1. <script src="https://www.whbblog.cn/js/jquery-latest.js"></script>

复制代码

[color=rgba(58, 58, 58, 0.88)]将以下代码放置在joe主题-侧栏设置-自定义PC侧栏模块里.

1. <section data-id="sidebar-meimei" class="mb-4">
   
2.   <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>
   
3.   <button type="button" id="ckxjj">点我看小姐姐视频</button>
   
4.   <div id="xjjsp">
   
5.     <video id="player" src="" controls alt="小姐姐视频"></video>
   
6.     <div class="kzsp">
   
7.       <button id="switch">连续: 开</button>
   
8.       <button id="next">下一个</button>
   
9.     </div>
   
10.     <button type="button" id="gbxjj">关闭视频</button>
    
11.   </div>
    
12.   <script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
    
13.   </script>
    
14. </section>

复制代码

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

1. <script src="https://www.whbblog.cn/js/jquery-latest.js"></script>

复制代码

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

1. <section data-id="sidebar-meimei" class="mb-4">
   
2.   <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>
   
3.   <button type="button" id="ckxjj">点我看小姐姐视频</button>
   
4.   <div id="xjjsp">
   
5.     <video id="player" src="" controls alt="小姐姐视频"></video>
   
6.     <div class="kzsp">
   
7.       <button id="switch">连续: 开</button>
   
8.       <button id="next">下一个</button>
   
9.     </div>
   
10.     <button type="button" id="gbxjj">关闭视频</button>
    
11.   </div>
    
12.   <script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
    
13.   </script>
    
14. </section>

复制代码

按照以上方法就可以看到效果了，喜欢的记得收藏本站。