参考博文：
1.如何在博客园添加 Fork me on GitHub 彩带效果
2.GitHub Ribbons | The GitHub Blog
3.Hexo添加Follow me on CSDN效果
博客园添加fork
进入博客园后台
进入博客园的管理界面，依次点击 管理 -> 设置，进入到设置页面后，将页面拖动到最下面，您会看到：页首Html代码一栏
添加代码
在页面Html代码框中输入如下代码：
1
2
3
4
5
| <a href="https://github.com/pistachio">
<img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;"
src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png"
alt="Fork me on GitHub">
</a>
|
注意，您需要将 <a href=""> 中的链接换成您自己的 GitHub 主页地址。
保存后，随意打开一篇您自己的博客，就可以看见和教程开头展示的效果一样了。大功告成！
更换彩带颜色
我上面使用的是红色的彩带，如果您需要更换成其他颜色，只需将 <img> 标签中的 src 地址更换成您想要颜色的地址即可。
1
2
3
4
5
6
7
8
9
10
11
| # 绿色
https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png
# 黑色
https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png
# 橘黄色
https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png
# 灰色
https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png
# 白色
https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png
|
从上面挑选一款您喜欢的样式颜色吧！！
hexo添加fork
实现方法
粘贴复制如下的代码到themes\hexo-theme-next\layout\layout.ejs文件中(放在<div id="l_body"></div>的下面 如图)，并把href改为你的csdn主页,换成github同上，记得换上自己的链接。
1
2
3
4
5
6
7
8
9
| # 黑色版本
# 个人认为position属性值改为fixed好一点~
<!--Follow me on CSDN-->
<a href="https://blog.csdn.net/qq_38452951"> <img loading="lazy" width="149" height="149" style="position: absolute; top: 0; right: 0; border: 0;" src="https://img-blog.csdnimg.cn/abe3797b7d77419b81ecc02dd1bf8c34.png" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
# 白色版本
<!--Follow me on CSDN-->
<a href="https://blog.csdn.net/qq_38452951"><img loading="lazy" width="149" height="149" style="position: absolute; top: 0; right: 0; border: 0;" src="https://img-blog.csdnimg.cn/1f8e1ef9be9f4f7db01fe3a2d57829de.png" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
|
效果图
详情请见：
1.追风赶月的少年 - 博客园 (cnblogs.com)
2.相思似海深旧事如天远 (pistachio0812.github.io)
