博客美化
博客 美化
2023-06-13 09:11:39 时间
本文最后更新于2022年02月10日,已超过123天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!
一、右键美化
美化一个博客是作为重要的,但是以往的右键菜单单调而丑陋,所以需要自定义菜单,效果如本博客所示
如何设置? 将以下代码放进博客模板的自定义body 尾部的HTML代码内即可
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="http://lmwa.cn"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
<li><a href="/link.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>
<li><a href="/message.html"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢!") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
二、首页新年倒计时
如下,复制到后台→开发者设置→首页列表最前方广告位
<style> .gn_box{ border: none; border-radius: 15px; } .gn_box { padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff; } #t_d{ color: #982585; font-size: 18px; } #t_h{ color: #8f79c1; font-size: 18px; } #t_m{ color: #65b4b5; font-size: 18px; } #t_s{ color: #83caa3; font-size: 18px; } </style> <div class="gn_box"> <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>3</font><font color=#8C0073>年</font><font color=#75008A>-</font> <font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font></h1><center> <div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span id="t_s"> 秒</span></div></center> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2023/01/1 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); var day = document.getElementById("t_d"); if (day != null) { day.innerHTML = d + " 天"; } var hour = document.getElementById("t_h"); if (hour != null) { hour.innerHTML = h + " 时"; } var min = document.getElementById("t_m"); if (min != null) { min.innerHTML = m + " 分"; } var sec = document.getElementById("t_s"); if (sec != null) { sec.innerHTML = s + " 秒"; } } setInterval(getRTime, 1000); </script> </div>
三、动态标题
如何做到用户离开博客然后改变网页的标题,卖个萌之类的,效果如本站 我们只需将以下代码输进博客模板的:自定义head 头部的HTML代码 代码如下:
<script type="text/javascript">
/* 动态网页标题*/
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
if (document.hidden) {
$('[rel="shortcut icon"]').attr("href", "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-62ccf249-f499-44a5-b575-91969872967e/971dd151-9eaf-4912-81cb-6a2c60719c07.png");
document.title = "你别走吖 Σ(っ °Д °;)っ";
clearTimeout(titleTime)
} else {
$('[rel="shortcut icon"]').attr("href", "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-62ccf249-f499-44a5-b575-91969872967e/971dd151-9eaf-4912-81cb-6a2c60719c07.png");
document.title = "你可算回来了 (。•ˇˇ•。)" + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile
},
2000)
}
});
</script>
相关文章
- wordpress博客怎样安装WP商店没有的插件
- Hexo博客 | 如何为博客添加顶部轮播图和文章推荐卡片
- wordpresss加富强民主点击特效Wordpress博客 2 年前 桃李Taoli
- Halo博客美化修改
- 我分析了2018-2020年青年安全圈450个活跃技术博客和博主
- wordpress博客b2主题致美化首页区块
- 在Windows环境下使用Hexo Volantis主题搭建博客
- 【原创】Typecho博客模板Joe美化记录【持续更新】
- 这款开源博客从部署到访问只要300秒?我不信!
- 搭建Hexo博客-第4章-绑定自定义域名
- 个人博客搭建(3):Typora+PicGo+Github/Gitee搭建免费稳定的图床
- 博客生成静态站点工具 Top 20
- 开源一款多人博客或者社区网站系统,适用于资讯网站!
- 从百度搜索结果列表里点击 CSDN 博客时 url 参数的含义
- 个人博客美化教程
- 如何在博客的日志之间显示广告
- WordPress 技巧:缓存自定义菜单,加快博客速度
- 如何防止你的 WordPress 博客参与 DDOS 攻击
- 大数据技术之找博客共同好友案例详解大数据
- 滥用图片博客做 C&C 配置
- Oracle DBA博客分享专业经验与技术知识(oracle dba博客)