在你的网站底部或侧边栏添加美观的徽章式链接，只需要添加下面这段css+js代码即可。以下是html格式的代码。

当你浏览 Github、Gitee 等代码仓库时，常能看到类似于下面这种徽章式的网页链接。它既美观又方便，那么这个徽章是如何制作出来的呢？本文将为你介绍如何制作属于自己的徽章式链接。
<img class="alignnone size-full wp-image-58466" src="https://www.xmy7.com/wp-content/uploads/2024/01/2024011703593440.png" alt="" width="1206" height="678" />

&lt;style&gt;
/*底部页脚css*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #ffa500;
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-fen {
background-color: #e76dcb
}
.github-badge .bg-red {
background-color: #f55066
}
.github-badge .bg-green {
background-color: #3bca6e
}

.github-badge .bg-cai {
background-image: -webkit-linear-gradient(
0deg, #3ca5f6 0%, #a86af9 100%);
&lt;/style&gt;

&lt;div class="github-badge"&gt;
&lt;span class="badge-subject"&gt;站点地图 &lt;/span&gt;
&lt;a style="color:#fff" href="http://www.xmy7.com/" rel="external nofollow" target="_blank"&gt;
&lt;span class="badge-value bg-red"&gt;Sitemap&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div class="github-badge"&gt;
&lt;span class="badge-subject"&gt;申请&lt;/span&gt;
&lt;a style="color:#fff" href="/links" rel="external nofollow" target="_blank"&gt;
&lt;span class="badge-value bg-fen"&gt;友情链接&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;div class="github-badge"&gt;
&lt;span class="badge-subject"&gt;网站运行&lt;/span&gt;
&lt;a style="color:#fff" href="http://www.xmy7.com/" rel="external nofollow" target="_blank"&gt;
&lt;span class="badge-value bg-cai"&gt;&lt;SPAN id=span_dt_dt style="color: #b5c4c3;"&gt;&lt;/SPAN&gt; &lt;SCRIPT language=javascript&gt;function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("1/1/2024 23:32:13");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='&lt;font style=color:#00ffff&gt;'+daysold+' 天&lt;/font&gt; &lt;font style=color:#00ffff&gt;'+hrsold+' 时&lt;/font&gt; &lt;font style=color:#00ffff&gt;'+minsold+' 分&lt;/font&gt; &lt;font style=color:#00ffff&gt;'+seconds+' 秒&lt;/font&gt;';
}
show_date_time();&lt;/script&gt;&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;