美化教程
有时候网站侧边栏默认的光秃秃，看起来比较单调，这个时候可以用一些代码进行美化
来访信息美化
可以看到某些博客网站侧边有来访信息的小工具
下面以WordPress博客为例，进入外观→小工具→自定义HTML→粘贴→保存
WordPress:
<div class="card-content"><img width="100%" height="200px" src="https://dh.43vg.cn/ip/IP-master/"></div>效果：
导航网站：
<div class="card"> <div class="card-head"><i class="fa fa-address-card-o" aria-hidden="true"></i>来访信息</div> <div class="card-content"> <img width="100%" height="150px" src="https://dh.43vg.cn/ip/IP-master/"> </div></div>效果：
高清壁纸欣赏
下面以WordPress博客为例，进入外观→小工具→自定义HTML→粘贴→保存，该接口每次刷新一次页面就会自动随机切换一张图片
WordPress:
<a class="pic" href="https://dh.43vg.cn/mn/tp.html" target="_blank"><img src="https://dh.43vg.cn/mn/sj.php"></a>效果：
导航网站：
<div class="card"> <div class="card-head"><i class="fa fa-pie-chart fa-fw"></i>高清壁纸欣赏-点击图可切换</div> <style type="text/css">.box .triggers { width: 9px; position: absolute; right: 12px; top: 40px; height: 95px; overflow: hidden }.box .triggers a { display: block; width: 9px; height: 9px; margin-bottom: 8px; float: left; _display: inline; color: #fff; text-align: center; font: 600 14px/19px arial,sans-serif; overflow: hidden; background: url(https://dh.43vg.cn/assets/images/T1.lJGFlVcXXa6Q3bb-9-18.gif) no-repeat 0 0 }.box .triggers a.current { background-position: 0 -9px }.box .frames { width:92%;height:340Px; overflow: hidden; position: relative; top: 5px; left: 5px; float: left }.box .frames .item { display: none; width:100%; position: relative }.box .item .pic { display: table-cell; vertical-align: middle; width:100%; text-align: center; font: normal 12px/1.5 arial; *display: block; overflow: hidden; *font-size: 139px }.box .item .pic img { width:100%; border: none; vertical-align: middle }</style><div class="card-body"><div class="box"><div id="ds1-ef1"><div class="frames"><div class="item" id="pic0" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;"><a class="pic" href="https://dh.43vg.cn/mn/tp.html" target="_blank"><img src="https://dh.43vg.cn/mn/sj.php"> </a></div><div class="item" id="pic1" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;"><a class="pic" href="https://dh.43vg.cn/mn/tp.html" target="_blank"><img src="https://dh.43vg.cn/mn/sj1.php"> </a></div><div class="item" id="pic2" onmouseout="mmplay()" onmouseover="mmstop()" style="display: block;"><a class="pic" href="https://dh.43vg.cn/mn/tp.html" target="_blank"><img src="https://dh.43vg.cn/mn/sj2.php"> </a></div><div class="item" id="pic3" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;"><a class="pic" href="https://dh.43vg.cn/fj/tp.html" target="_blank"><img src="https://dh.43vg.cn/fj/sj.php"></a></div><div class="item" id="pic4" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;"><a class="pic" href="https://dh.43vg.cn/fj/tp.html" target="_blank"><img src="https://dh.43vg.cn/fj/sj1.php"> </a></div><div class="item" id="pic5" onmouseout="mmplay()" onmouseover="mmstop()" style="display: none;"><a class="pic" href="https://dh.43vg.cn/fj/tp.html" target="_blank"><img src="https://dh.43vg.cn/fj/sj2.php"> </a></div></div><div class="triggers"><a class="j-trigger" id="tabpic0" onmouseout="showpic(0)" onmouseover="mmstop()"> </a> <a class="j-trigger" id="tabpic1" onmouseout="showpic(1)" onmouseover="mmstop()"> </a> <a class="j-trigger current" id="tabpic2" onmouseout="showpic(2)" onmouseover="mmstop()"> </a> <a class="j-trigger" id="tabpic3" onmouseout="showpic(3)" onmouseover="mmstop()"> </a> <a class="j-trigger" id="tabpic4" onmouseout="showpic(4)" onmouseover="mmstop()"> </a> <a class="j-trigger" id="tabpic5" onmouseout="showpic(5)" onmouseover="mmstop()"> </a> </div></div></div></div><script type="text/javascript">document.getElementById("tabpic0").className = "j-trigger current";document.getElementById("pic0").style.display = "block";var a = 0;var b = 6;var time = 3000;function showpic(id) { a = id; clearTimeout(mytime); for (i = 0; i < b; i++) { document.getElementById("tabpic" + i).className = "j-trigger"; document.getElementById("pic" + i).style.display = "none"; } document.getElementById("tabpic" + id).className = "j-trigger current"; document.getElementById("pic" + id).style.display = "block"; mytime = setTimeout("showpic(" + (id == (b - 1) ? 0 : id + 1) + ")",time);}mytime = setTimeout("showpic(1)",time);function mmstop() { clearTimeout(mytime); }function mmplay() { mytime = setTimeout("showpic(" + a + ")",time); }</script> </div>效果：
随机热门视频
下面以WordPress博客为例，进入外观→小工具→自定义HTML→粘贴→保存，该接口每次刷新一次页面就会自动随机切换一个热门视频
WordPress:
<video width="100%" height="530px" id="player" src="https://dh.43vg.cn/xjj/video.php" controls="" webkit-playsinline="" playsinline=""></video>效果：
导航网站：
<div class="card"> <div class="card-head"> <i class="fa fa-video-camera" aria-hidden="true"></i>热门视频</div> <div class="card-body"> <video width="100%" height="530px" id="player" src="https://dh.43vg.cn/xjj/video.php" controls="" webkit-playsinline="" playsinline=""></video> <center><section id="buttons"> <button id="switch" style="width: 80px;height: 40px;background: #4CAF50;border: none;color: white;font-size: 16px;">连续: 开</button> <button id="next" style="width: 100px;height: 40px;background: #FF0000;border: none;color: white;font-size: 16px;">播放下一个</button> </section></center></div></div><script> (function (window, document) { if (top != self) { window.top.location.replace(self.location.href); } var get = function (id) { return document.getElementById(id); } var bind = function (element, event, callback) { return element.addEventListener(event, callback); } var auto = true; var player = get('player'); var randomm = function () { player.src = 'https://dh.43vg.cn/xjj/video.php?_t=' + Math.random(); player.play(); } bind(get('next'), 'click', randomm); bind(player, 'error', function () { randomm(); }); bind(get('switch'), 'click', function () { auto = !auto; this.innerText = '连续: ' + (auto ? '开' : '关'); }); bind(player, 'ended', function () { if (auto) randomm(); }); })(window, document); </script> 效果：
粘贴后记得别忘了点击保存！否则不会生效，保存成功后返回首页刷新看看效果吧~
导航以及其他网站，请将代码放在index文件合适位置，具体自测！
