首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >【全网最全的博客美化系列教程】01.添加Github项目链接

【全网最全的博客美化系列教程】01.添加Github项目链接

作者头像
Angel_Kitty
发布2018-08-01 11:12:24
发布2018-08-01 11:12:24
7510
举报

添加Github项目链接

你们肯定对左上角的Fork me on Github比较好奇吧,这个是怎么弄的呢,其实你们通过F12控制台去找到这个控件,你们也能实现这个效果,如下图,很明显,我们可以看到是我用红色矩形框住的这部分语句控制着这个图标,点击以后会跳转到我的Github项目管理。

以上语句如下:

代码语言:javascript
复制
<a href="https://github.com/AngelKitty">
<img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub">
</a>

把href的内容替换为自己的GitHub仓库地址

src的图片链接地址可以设置为其他地址,我就选择直接引用了。

添加方式:进入自己的博客园->设置,将以上html代码添加到“页首Html代码”

原理:学过一点前端知识的人就知道,这是一个很简单的东西,通过href引用链接跳转,再用img标签装上一个图片的样式。

添加以后效果如下:

更多风格请移步至这里:https://blog.github.com/2008-12-19-github-ribbons/

这里有很多不同风格的形式供你选择,上面都提供了源码,你只需要更改href地址,复制粘贴到指定位置就行了~~~

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-07-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 添加Github项目链接
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档