博客园 博客 添加 Fork me on GitHub 彩带效果
如何在自己的博客园博客的左上角或者右上角添加 Fork me on GitHub 彩带效果呢?
如下图所示:
设置步骤如下:
1、“管理”-->"设置",找到“首页Html代码”设置区域
2、将如下代码,粘贴到“首页Html代码”的空白区域,保存后,刷新页面即可看到效果即可。
<a href="https://github.com/MiracleLunaGitHub"> <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>
【说明】:
1)<a href="https://github.com/MiracleLunaGitHub"> 此处需要换成自己的GitHub地址。
2)<img style="position: fixed; 此处设置为fixed,在上下滑动滚动条时,“Fork me on GitHub”彩带的相对位置保持不变。如果设置为absolute,则只会在固定位置显示。
right: 0; 设置为右侧显示;如果想设置为左侧显示,left: 0; 即可。
z-index:9999; 保证彩带显示在div层的最上层。
更换彩带显示颜色和显示位置
Github官方提供了12种方式(左上方和右上方,分别6种颜色)。
修改的时候,只需要替换 <img 标签 src 对应的图片地址即可。
1、左上方显示
1)红色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_left_red_aa0000.png
2)绿色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png
3)黑蓝色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_left_darkblue_121621.png
4)橘黄色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_left_orange_ff7600.png
5)灰色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_left_gray_6d6d6d.png
6)白色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_left_white_ffffff.png
2、右上方显示
1)红色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png
2)绿色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png
3)黑蓝色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png
4)橘黄色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png
5)灰色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png
6)白色
图片地址如下:
https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png
童鞋们,可以根据自己的喜好设置不同的彩带效果。
也可以参考GitHub官方博客:https://github.blog/2008-12-19-github-ribbons/