网站底部自定义美化按钮(如:网站地图)

最近浏览博客,看到不少朋友这个底部的美化,我也觉得底部的这些按钮平平无奇,就想着用 css 设置一个样式,从而美化按钮方法,至此分享给大家。教程分为两步,添加 css 样式和添加 HTML 代码即可如下(自定义)

演示截图

网站底部自定义美化按钮(如:网站地图)

1. 主题设置—> 顶部设置—> 自定义 CSS 样式代码:, 添加以下 CSS 代码:

/*CSS 代码网站底部按钮美化 */
<style>

.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 13.1px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
font-family: "Open Sans", sans-serif;
}
.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;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 14.1px;
color: #fff;
line-height: 18px;
margin-bottom: 7px;
}
.github-badge-big .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-big .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.bg-orange {background-color: #ec8a64 !important;}
.bg-red {background-color: #cb7574 !important;}
.bg-apricots {background-color: #f7c280 !important;}
.bg-casein {background-color: #dfe291 !important;}
.bg-shallots {background-color: #97c3c6 !important;}
.bg-ogling {background-color: #95c7e0 !important;}
.bg-haze {background-color: #9aaec7 !important;}
.bg-mountain-terrier {background-color: #99a5cd !important;}
</style>

2、主题设置—> 底部设置—> 网站底部右侧自定义链接, 添加以下 HTML 代码:

<!-- 网站底部按钮美化 html-->
<div class="github-badge">
  <span class="badge-subject bg-apricots">
     <a style="color:#fff" href="链接" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"> 巴拉巴拉 </a>
  </span>-
  <span class="badge-subject bg-casein">
     <a style="color:#fff" href="链接" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"> 巴拉巴拉 </a>
  </span>-
  <span class="badge-subject bg-shallots">
     <a style="color:#fff" href="链接" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"> 巴拉巴拉 </a>
  </span>-
  <span class="badge-subject bg-orange">
     <a style="color:#fff" href="链接" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"> 巴拉巴拉 </a>
  </span>-
    <span class="badge-value bg-haze">
     <a style="color:#fff" href="链接" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"> 巴拉巴拉 </a>
  </span>-
    <span class="badge-value bg-red">
     <a style="color:#fff" href="链接" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank"> 巴拉巴拉 </a>
</div>
<!-- 网站底部按钮美化 html-->
正文完
 0
吾资源网
版权声明:本站原创文章,由 吾资源网 于2023-12-05发表,共计2176字。
转载说明:

1、本站是一个免费且专业提供精品软件、网站源码、PHP源码、高端模板、游戏源码、网站插件、精品教程等站长资源分享的平台,所有资源来源于用户上传和网络,都不包含技术服务请大家谅解!
2、本站所有源码资源(包括源代码、软件、学习资料等)仅供研究学习以及参考等合法使用,请勿用于商业用途以及违法使用,否则后果自负!如本站不慎侵犯您的版权 侵删请致信E-mail:ashw8@qq.com,我们将及时处理,并撤下相关内容!
3、访问本站的用户必须明白,本站对所提供下载的软件和程序代码不拥有任何权利,其版权归该软件和程序代码的合法拥有者所有,请用户在下载使用前必须详细阅读并遵守软件作者的“使用许可协议”,本站仅仅是一个学习交流的平台。如果您喜欢该程序,购买注册,得到更好的正版服务!
4、如遇到加密压缩包,可使用7-ZIP解压,如遇到无法解压的请联系管理员!

评论(没有评论)