美化效果图
步骤
此美化仅适用于Handsome主题
第一步:
下载下方JS文件或复制代码新建JS文件,并放到网站文件夹目录下用以引用。
$(document).ready(function () {
//页脚版权信息
var copyrightInfo =
'<div class="github-badge">\n' +
' <a href="https://idc.3123.ws" target="_blank" title="由乐云提供云计算服务">\n' +
' <span class="badge-subject">服务器</span>\n' +
' <span class="badge-value bg-blue">乐云</span>\n' +
' </a>\n' +
'</div>' +
' | \n' +
'<div class="github-badge">\n' +
' <a href="http://typecho.org/" target="_blank" title="小言u博客基于Typecho搭建">\n' +
' <span class="badge-subject">程序</span>' +
' <span class="badge-value bg-orange">Typecho</span>\n' +
' </a>\n' +
'</div>'
//备案号信息
var recodeInfo =
'<div class="github-badge">\n' +
' <a href="" target="_blank" title="">\n' +
' <span class="badge-subject">Copyright</span>' +
' <span class="badge-value bg-blue">©2020-2021</span>\n' +
' </a>\n' +
'</div>'
'</div>' +
' | \n' +
'<div class="github-badge">\n' +
' <a href="http://www.beian.miit.gov.cn" target="_blank" title="">\n' +
' <span class="badge-subject">VPS</span>' +
' <span class="badge-value bg-brightgreen">HongKong</span>\n' +
' </a>\n' +
'</div>';
$('#footer span.pull-right').html(copyrightInfo);
$('#footer span.text-ellipsis').last().html(recodeInfo);
})
第二步:
后台管理->外观->设置外观->开发者设置->自定义CSS
并复制以下代码粘贴到上面
点击展开 查看代码
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #4D4D4D;
margin-bottom: 5px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4D4D4D;
padding: 4px 2px 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-brightgreen {
background-color: #4c1 !important;
}
.github-badge .bg-green {
background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
background-color: #dfb317 !important;
}
.github-badge .bg-yellowgreen {
background-color: #a4a61d !important;
}
.github-badge .bg-orange {
background-color: #fe7d37 !important;
}
.github-badge .bg-red {
background-color: #ff2900 !important;
}
.github-badge .bg-blue {
/* background-color: #007ec6 !important; */
background-color: #39f !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
background-color: #9f9f9f !important;
}
第三步:
找到自定义Javascript(在自定义CSS下面)
并引用上方JS文件
<script type="text/javascript" src="https://zxz.ee/usr/plugins/yejiaostyle/footer.js"></script>
然后就可以查看效果啦~
1 条评论
大佬你好,请问怎么让页脚底部的信息可以延长到这个右侧栏呢,我只能显示在中间