全网最全的博客美化系列教程相关文章目录

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

【全网最全的博客美化系列教程】02.添加QQ交谈链接

【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠

【全网最全的博客美化系列教程】04.访客量统计的实现

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

【全网最全的博客美化系列教程】07.添加一个分享的按钮吧

【全网最全的博客美化系列教程】08.自定义地址栏Logo

【全网最全的博客美化系列教程】09.添加"扩大/缩小浏览区域大小" 按钮

【全网最全的博客美化系列教程】10.小火箭置顶特效的实现

【全网最全的博客美化系列教程】11.鼠标点击爱心特效的实现

【全网最全的博客美化系列教程】12.修改鼠标图案

【全网最全的博客美化系列教程】13.鼠标点击效果升级的实现

【全网最全的博客美化系列教程】14.代码高亮设置的实现

【全网最全的博客美化系列教程】15.动画幻灯效果的实现

【全网最全的博客美化系列教程】16.给博客添加一个打赏的实现

【全网最全的博客美化系列教程】17.博客背景刷新切换效果的实现

【全网最全的博客美化系列教程】18.数学之美---动态几何线条的实现

【全网最全的博客美化系列教程】19.旋转立方体的实现

【全网最全的博客美化系列教程】20.给博客添加一个萌萌哒的看板娘

【全网最全的博客美化系列教程】21.给博客添加一个夜间模式吧

【全网最全的博客美化系列教程】22.添加一个文章目录特效

【全网最全的博客美化系列教程】23.图片水纹特效的实现

【全网最全的博客美化系列教程】24.给博客增加一个音乐播放器特效

【全网最全的博客美化系列教程】25.给博客增加一个音乐播放器特效

【全网最全的博客美化系列教程】26.评论头像旋转的实现

【全网最全的博客美化系列教程】27.IP地址定位及天气预报的实现

【全网最全的博客美化系列教程】28.3D标签云动画的实现

【全网最全的博客美化系列教程】29.自制HTML源码运行Javascript特效

【全网最全的博客美化系列教程】30.博客文章实现markdown书写机制

【全网最全的博客美化系列教程】31.用Canvas和requestAnimFrame做动画特效

【全网最全的博客美化系列教程】32.公告栏添加自己的头像

【全网最全的博客美化系列教程】33.添加一只舞动的小知音

【全网最全的博客美化系列教程】34.皮肤背景的选择与定制

添加Github项目链接

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

以上语句如下:

<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地址,复制粘贴到指定位置就行了~~~

【全网最全的博客美化系列教程】01.添加Github项目链接的更多相关文章

  1. 【全网最全的博客美化系列教程】08.自定义地址栏Logo

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  2. 【全网最全的博客美化系列教程】02.添加QQ交谈链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  3. 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  4. 【博客美化】06.添加QQ交谈链接

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  5. 【博客美化】05.添加GitHub链接

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  6. 【博客美化】04.自定义地址栏logo

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  7. Web前端:博客美化:三、右上角的Github Ribbon

    1.保存图片到博客园相册 2.复制代码到可以放html代码的地方 我因为数量问题把这段sei到了 页首Html代码 <a href="https://github.com/zhengw ...

  8. PhpStorm中如何配置SVN,详细操作方法 - 郑加全的博客 - CSDN博客

      登录|注册       郑加全的博客       目录视图 摘要视图 订阅 CSDN日报0711——<离开校园,入职阿里,开启新的程序人生>      征文 | 你会为 AI 转型么? ...

  9. VuePress博客美化之reco主题

    vuepress博客主题-vuepress-theme-reco是一款简洁而优雅的 vuepress博客&文档主题.它既可以成为简洁而又不失美观的主题,又可以书写你的项目文档,看起来更有逼格. ...

随机推荐

  1. 前端AntD框架的upload组件上传图片时遇到的一些坑

    前言 本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...

  2. spring静态代理和动态代理

    本节要点: Java静态代理 Jdk动态代理 1 面向对象设计思想遇到的问题 在传统OOP编程里以对象为核心,并通过对象之间的协作来形成一个完整的软件功能,由于对象可以继承,因此我们可以把具有相同功能 ...

  3. [20181122]模拟ORA-08103错误.txt

    [20181122]模拟ORA-08103错误.txt $ oerr ora 810308103, 00000, "object no longer exists"// *Caus ...

  4. MySQl ifnull()和substr()

    SUBSTR(str,pos,len) substr用来截取字符串: str 被截取的字符串 pos 开始位置 len 长度 举个例子: substr('abc',1,2)='ab' IFNULL(e ...

  5. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  6. js 编辑数组

    删除数组第一个元素使用var length = arr.shift(); 删除arr的第一个元素后, 返回值是删除后的数组长度           删除数组最后一个元素使用var length = a ...

  7. Go学习笔记08-包

    Go学习笔记08-包 Go语言 封装 包 封装 CamelCase命名规则 首字母大写:public 首字母小写:private 包 一个目录即一个包 main包为可执行入口,只能有一个main包 为 ...

  8. Nginx 安装配置

    Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...

  9. 微信小程序多层嵌套循环,二级数组遍历

    小程序中的遍历循环类似于angularJS的遍历. 二级数组遍历有一个坑.二级遍历wx:for循环的时候,需要注意.(代码如下) JS代码: data: { groups: [ [ { title: ...

  10. B. Yet Another Array Partitioning Task ——cf

    B. Yet Another Array Partitioning Task time limit per test 2 seconds memory limit per test 256 megab ...