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

admin

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>

复造代码

根据以上办法就能够看到结果了，喜好的记得珍藏本站。