博客园 博客 添加 Fork me on GitHub 彩带效果 （更新版本）

博客园 博客 添加 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>

 

[更新后]

<a href="https://github.com/MiracleLunaGitHub">  
<img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;" 
     src="https://s3.amazonaws.com/github/ribbons/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

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png

 

2）绿色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png

 

3）黑蓝色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_left_darkblue_121621.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png

 

4）橘黄色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_left_orange_ff7600.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png

 

5）灰色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_left_gray_6d6d6d.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png

 

6）白色

 图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_left_white_ffffff.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png

 

2、右上方显示

1）红色

 

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png

 

2）绿色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_right_green_007200.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png

 

3）黑蓝色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png

 

4）橘黄色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png

 

5）灰色

图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png

 

6）白色

 图片地址如下：

https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png

 

[更新后]

https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png

 

童鞋们，可以根据自己的喜好设置不同的彩带效果。

也可以参考GitHub官方博客：https://github.blog/2008-12-19-github-ribbons/ （该URL地址目前已不能正常访问！！！）