以下教程来自网络,摘自多个博客,由本人整合而成,包含大多数美化教程,一方面为分享给他人,一方面防止更新后一夜回到解放前。
如有侵权
请联系删除
首页列表最前方广告位
<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>1</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('2021/02/12 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>
自定义CSS
以下内容添加到后台主题外观设置-开发者设置-自定义CSS
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
/*打赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
/*首页文章列表悬浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 15px rgba(73, 90, 47, 0.5);
}
/*文章标题居中*/
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
除使用下面代码外,还可直接下载插件
HoerMouse
使用/*自定义鼠标指针*/
body {
cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url('鼠标指针图片链接'), auto;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
width: 3px;
height: 16px;
background-color: rgba(255,255,255,0);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: rgba(255,255,255,0);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*首页文章版式阴影化*/
/*阴影颜色修改rgba后面的值*/
.panel{
box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
-moz-box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
-moz-box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
}
.panel-small{
box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
-moz-box-shadow: 1px 1px p3x 3px rgba(255,255,255, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px p3x 3px rgba(135 206 250, 0.35);
-moz-box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
span.baidu-record::before {
font: normal normal normal 12px/1 FontAwesome;
content: "\f024";
margin-right: 3px;
}
/*首页文章a标签颜色渐变*/
.index-post-title a:hover{
color:rgba(107, 209, 255, 1);
transition:color 0.2s linear
}
/*文章图片悬停放大*/
.entry-thumbnail {
overflow: hidden;
}/*如果想放大并超出范围请删除上面代码*/
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
可使用插件Copyright
自定义javascript
以下内容添加到后台主题外观设置-开发者设置-自定义javascript
// 鼠标点击爱心
! function (e, t, a) {
function n() {
c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
}
function r() {
for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function o() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), i(e)
}
}
function i(e) {
var a = t.createElement("div");
a.className = "heart", d.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: s()
}), t.body.appendChild(a)
}
function c(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function s() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}
var d = [];
e.requestAnimationFrame = function () {
return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
setTimeout(e, 1e3 / 60)
}
}(), n()
}(window, document);
可用于将左侧各分类下文章数目变成彩色数字,右侧博客信息变成彩色,标签变成彩色
如果启用pjax,添加自定义js的同时还要将代码放入pjax函数中,否则无效果
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
//网页标签获得/失去焦点时更改标题内容
var OriginTitile = document.title;
var titleTime;
document.addEventListener("visibilitychange",
function() {
if (document.hidden) {
OriginTitile = document.title;
document.title = "怎么走了(;д`)ゞ";
clearTimeout(titleTime)
} else {
document.title = "回来了ヾ(◍°∇°◍)ノ゙)";
titleTime = setTimeout(function() {
document.title = OriginTitile
},
2000)
}
});
多处组合改动
功能:当有人复制内容时,会提醒复制者若要转载请保留本文链接
第一步:将以下代码添加到后台主题外观设置-开发者设置-自定义输出head 头部的HTML代码
<!--复制弹框提醒-->
<script src="https://blog.kecho.top/other/layer.js"></script>
第二步:将以下代码添加到后台主题外观设置-开发者设置-自定义 JavaScript
<!--复制弹框提醒-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};
第一步:将以下代码添加到后台主题外观设置-开发者设置-自定义输出head 头部的HTML代码
<!--一言打字特效-->
<script src="https://i.gordsky.cn/assets/weiyu/jquery.min.js"></script>
<script src="https://i.gordsky.cn/assets/weiyu/typed.min.js"></script>
第二步:将以下代码添加到后台主题外观设置-开发者设置-自定义 JavaScript
<!--一言打字特效-->
function typedword(){
$.ajax({
type:"get",url:"https://api.gqink.cn/api/page/love",data:{page:'index'},async:true,success:function(word){
var list=[];
for(var i=0;i<word.data.length;i++){list.push(word.data[i['word'])}$("#word").typed({strings:list,typeSpeed:20,loop:true,backDelay:3000,})}}}
第三步:将以下代码添加到后台主题外观设置-初级设置-首页一行文字介绍
<p>
<i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i>
<span id="word">
<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
</span>
<i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i>
<script>$(function(){typedword();})</script>
</p>
1.彩色标签
自定义css
/*彩色标签,和javascript搭配使用*/
#tag_cloud-2>div>a {
color: #fff;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
padding: 3px 5px;
border: 0;
border-radius: 3px;
display: inline-block;
line-height: 18px;
}
#tag_cloud-2>div>a:hover {
background: #d02f53;
}
自定义javascript
//彩色标签,和css搭配使用
function colorfultags(){
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#f60", "#45B6F7", "#15a287", "#5cb85c", "#d9534f", "#567e95", "#00a67c", "#b37333"];
let count = 1;
tags.forEach(tag => {
tagsColor = colorArr[count%8];
tag.style.backgroundColor = tagsColor;
count++;
});
}
window.onload=colorfultags();
2.3D标签
自定义css
/*3d标签,和javascript搭配使用*/
#tag_cloud-2>div {
position: relative;
width: 200px;
height: 240px;
border: 2px black;
margin: 0 0px 0px 0
}
#tag_cloud-2>div>a {
position: absolute;
}
#tag_cloud-2>div>a:hover {
display: block
}
自定义javascript
//3d标签,和css搭配使用
function around3D() {
var oDiv = document.getElementById('tag_cloud-2').getElementsByTagName('div')[0];
if (null == oDiv) {
return
} else {
var radius = 80;
var d = 200;
var dtr = Math.PI / 180;
var mcList = [];
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 11;
var size = 200;
var mouseX = 0;
var mouseY = 10;
var howElliptical = 1;
var aA = null;
var i = 0;
var oTag = null;
aA = oDiv.getElementsByTagName('a');
for (i = 0; i < aA.length; i++) {
oTag = {};
aA[i].onmouseover = (function(obj) {
return function() {
obj.on = true;
this.style.zIndex = 9999;
this.style.color = '#fff';
this.style.background = '#0099ff';
this.style.padding = '5px 5px';
this.style.filter = "alpha(opacity=100)";
this.style.opacity = 1;
}
})(oTag)
aA[i].onmouseout = (function(obj) {
return function() {
obj.on = false;
this.style.zIndex = obj.zIndex;
this.style.color = '#fff';
this.style.background = '#30899B';
this.style.padding = '5px';
this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
this.style.opacity = obj.alpha;
this.style.zIndex = obj.zIndex;
}
})(oTag)
oTag.offsetWidth = aA[i].offsetWidth;
oTag.offsetHeight = aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine(0, 0, 0);
positionAll();
(function() {
update();
setTimeout(arguments.callee, 40);
})();
function update() {
var a, b, c = 0;
a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
lasta = a;
lastb = b;
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
return;
}
sineCosine(a, b, c);
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var rx1 = mcList[i].cx;
var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;
var rx2 = rx1 * cb + rz1 * sb;
var ry2 = ry1;
var rz2 = rx1 * (-sb) + rz1 * cb;
var rx3 = rx2 * cc + ry2 * (-sc);
var ry3 = rx2 * sc + ry2 * cc;
var rz3 = rz2;
mcList[i].cx = rx3;
mcList[i].cy = ry3;
mcList[i].cz = rz3;
per = d / (d + rz3);
mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
mcList[i].y = ry3 * per;
mcList[i].scale = per;
var alpha = per;
alpha = (alpha - 0.6) * (10 / 6);
mcList[i].alpha = alpha * alpha * alpha - 0.2;
mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
}
doPosition();
}
function depthSort() {
var i = 0;
var aTmp = [];
for (i = 0; i < aA.length; i++) {
aTmp.push(aA[i]);
}
aTmp.sort(
function(vItem1, vItem2) {
if (vItem1.cz > vItem2.cz) {
return -1;
} else if (vItem1.cz < vItem2.cz) {
return 1;
} else {
return 0;
}
}
);
for (i = 0; i < aTmp.length; i++) {
aTmp[i].style.zIndex = i;
}
}
function positionAll() {
var phi = 0;
var theta = 0;
var max = mcList.length;
for (var i = 0; i < max; i++) {
if (distr) {
phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
theta = Math.sqrt(max * Math.PI) * phi;
} else {
phi = Math.random() * (Math.PI);
theta = Math.random() * (2* Math.PI);
}
mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
mcList[i].cz = radius * Math.cos(phi);
aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
}
}
function doPosition() {
var l = oDiv.offsetWidth / 2;
var t = oDiv.offsetHeight / 2;
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var aAs = aA[i].style;
if (mcList[i].alpha > 0.1) {
if (aAs.display != '')
aAs.display = '';
} else {
if (aAs.display != 'none')
aAs.display = 'none';
continue;
}
aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
aAs.zIndex = mcList[i].zIndex;
aAs.opacity = mcList[i].alpha;
}
}
function sineCosine(a, b, c) {
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
}
}
window.onload = around3D();
如果启用了pjax,要实现3D彩色标签,则保持上面两个自定义css不变,将上面两个自定义javascript删掉,换成下面这个自定义javascript
function colorfultags(){
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#f60", "#45B6F7", "#15a287", "#5cb85c", "#d9534f", "#567e95", "#00a67c", "#b37333"];
let count = 1;
tags.forEach(tag => {
tagsColor = colorArr[count%8];
tag.style.backgroundColor = tagsColor;
count++;
});
}
function around3D() {
var oDiv = document.getElementById('tag_cloud-2').getElementsByTagName('div')[0];
if (null == oDiv) {
return
} else {
var radius = 80;
var d = 200;
var dtr = Math.PI / 180;
var mcList = [];
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 11;
var size = 200;
var mouseX = 0;
var mouseY = 10;
var howElliptical = 1;
var aA = null;
var i = 0;
var oTag = null;
aA = oDiv.getElementsByTagName('a');
for (i = 0; i < aA.length; i++) {
oTag = {};
aA[i].onmouseover = (function(obj) {
return function() {
obj.on = true;
this.style.zIndex = 9999;
this.style.color = '#fff';
this.style.background = '#0099ff';
this.style.padding = '5px 5px';
this.style.filter = "alpha(opacity=100)";
this.style.opacity = 1;
}
})(oTag)
aA[i].onmouseout = (function(obj) {
return function() {
obj.on = false;
this.style.zIndex = obj.zIndex;
this.style.color = '#fff';
this.style.background = '#30899B';
this.style.padding = '5px';
this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
this.style.opacity = obj.alpha;
this.style.zIndex = obj.zIndex;
}
})(oTag)
oTag.offsetWidth = aA[i].offsetWidth;
oTag.offsetHeight = aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine(0, 0, 0);
positionAll();
(function() {
update();
setTimeout(arguments.callee, 40);
})();
function update() {
var a, b, c = 0;
a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
lasta = a;
lastb = b;
if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
return;
}
sineCosine(a, b, c);
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var rx1 = mcList[i].cx;
var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;
var rx2 = rx1 * cb + rz1 * sb;
var ry2 = ry1;
var rz2 = rx1 * (-sb) + rz1 * cb;
var rx3 = rx2 * cc + ry2 * (-sc);
var ry3 = rx2 * sc + ry2 * cc;
var rz3 = rz2;
mcList[i].cx = rx3;
mcList[i].cy = ry3;
mcList[i].cz = rz3;
per = d / (d + rz3);
mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
mcList[i].y = ry3 * per;
mcList[i].scale = per;
var alpha = per;
alpha = (alpha - 0.6) * (10 / 6);
mcList[i].alpha = alpha * alpha * alpha - 0.2;
mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
}
doPosition();
}
function depthSort() {
var i = 0;
var aTmp = [];
for (i = 0; i < aA.length; i++) {
aTmp.push(aA[i]);
}
aTmp.sort(
function(vItem1, vItem2) {
if (vItem1.cz > vItem2.cz) {
return -1;
} else if (vItem1.cz < vItem2.cz) {
return 1;
} else {
return 0;
}
}
);
for (i = 0; i < aTmp.length; i++) {
aTmp[i].style.zIndex = i;
}
}
function positionAll() {
var phi = 0;
var theta = 0;
var max = mcList.length;
for (var i = 0; i < max; i++) {
if (distr) {
phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
theta = Math.sqrt(max * Math.PI) * phi;
} else {
phi = Math.random() * (Math.PI);
theta = Math.random() * (2 * Math.PI);
}
mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
mcList[i].cz = radius * Math.cos(phi);
aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
}
}
function doPosition() {
var l = oDiv.offsetWidth / 2;
var t = oDiv.offsetHeight / 2;
for (var i = 0; i < mcList.length; i++) {
if (mcList[i].on) {
continue;
}
var aAs = aA[i].style;
if (mcList[i].alpha > 0.1) {
if (aAs.display != '')
aAs.display = '';
} else {
if (aAs.display != 'none')
aAs.display = 'none';
continue;
}
aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
aAs.zIndex = mcList[i].zIndex;
aAs.opacity = mcList[i].alpha;
}
}
function sineCosine(a, b, c) {
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
}
}
然后后台pjax回调函数加上
colorfultags();
around3D();
文件改动
去网站根目录,找到主题文件夹下handsomecomponentfooter.php修改原有声明代码,找到下方这段代码(在文件中可按Ctrl+F进行查找)
Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a>
|
Theme by <a target="_blank"href="https://www.ihewro.com/archives/489/">handsome</a>
修改为
<div class="wrapper bg-light">
<!--右下角-->
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo(); ?>
<div class="github-badge">
<a href="http://www.typecho.org" title="Typecho" target="_blank">
<span class="badge-subject">Powered by</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
<span> | </span>
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" title="Handsome" target="_blank">
<span class="badge-subject">Theme by</span><span class="badge-value bg-green">Handsome</span>
</a>
</div>
</span>
<!--左下角-->
<span class="text-ellipsis">
<?php $this->options->BottomleftInfo(); ?>
<div class="github-badge">
<a href="https://blog.kecho.top" title="©2020 Kecho" target="_blank">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020 Kecho</span>
</a>
</div>
<span> | </span>
<div class="github-badge">
<a href="http://www.beian.miit.gov.cn" title="赣ICP备 20004569号" target="_blank">
<span class="badge-subject">备案号</span><span class="badge-value bg-green">赣ICP备 20004569号</span>
</a>
</div>
<span> | </span>
<div class="github-badge">
<a href="https://blog.kecho.top/sitemap.xml" title="SiteMap" target="_blank">
<span class="badge-subject">站点地图</span><span class="badge-value bg-purple">SiteMap</span>
</a>
</div>
</span>
</div>
然后在自定义CSS中添加
/*最底部版权声明样式*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 14px;
background-color: #abbac3;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}
第一步:将以下代码添加到后台主题外观设置-开发者设置-自定义CSS
.gundongtiao{
animation: gundongtiao 1s infinite linear;
height:2px;
top:0;
left:0;
position: fixed;
width:100%;
z-index:9999;
}
@keyframes gundongtiao{
0%{
background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}
20%{
background: #000 linear-gradient(to left, #ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc,#5856d6);
}
40%{
background: #000 linear-gradient(to left, #5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc);
}
60%{
background: #000 linear-gradient(to left, #34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff);
}
80%{
background: #000 linear-gradient(to left, #007aff,#34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa);
}
100%{
background: #000 linear-gradient(to left, #5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#4cd964);
}
}
第二步:在网站文件footer.php(文件路径为handsome/component/footer.php)末尾添加
<div class="gundongtiao"></div>
图标出现位置和二维码大小位置可自己修改对应CSS
找到handsome/component/sidebar.php下方代码位置
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span>
<span class="badge
pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
</ul>
</section>
<!--插入位置-->
<?php endif; ?>
<?php if ($this->options->adContentSidebar != ""): ?>
<!--广告位置-->
<section id="a_d_sidebar" class="widget widget_categories wrapper-md clear">
<h5 class="widget-title m-t-none text-md"><?php _me("广告") ?></h5>
<?php $this->options->adContentSidebar(); ?>
</section>
<?php endif; ?>
插入以下代码
<!--自定义访客地球-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
<h3 class="widget-title m-t-none text-md">访客统计</h3>
<div id="visitors" class="tags l-h-2x" style="width:auto;height:185px;">
</div>
</section>
其中height
可以自己修改
然后去 找自己喜欢的地球样式,并且把它给的javascript代码复制下来
将复制的代码进行转义,将/
转为\/
,将"
转为\"
将转义后的代码和下方代码合并在一起,放到后台自定义javascript中
$(document).ready(function(){
$("#visitors").append("这里是您在RevolverMaps地球网站上复制的转义后的代码");
});
$(document).on('pjax:complete', function() {
$('#morphing').tooltip('show');
$("#visitors").append("这里是您在RevolverMaps地球网站上复制的转义后的代码");
});
如果你不会转义,也可以直接使用我转义好的javascript
<script type=\"text/javascript\" src=\"//rf.revolvermaps.com/0/0/8.js?i=51frwlq4tnv&m=0&c=ff0000&cr1=ffffff&f=arial&l=33&bv=65\" async=\"async\"><\/script>
版权属于:Kecho
本文链接:https://blog.kecho.top/archives/33/
转载时须注明出处及本声明