为博客园添加github跳转链接

一般程序员都会有自己的github仓库,在博客园添加跳转链接,可以很方便的进行访问查看。

添加html

首先,需要在设置中添加一段html,用于跳转链接

<a class="git-link" href="https://github.com/xinghalo"></a>

修改样式

然后设置相应的样式,,可以根据自己的导航条样式,决定css是absolute的还是fixed。由于我的导航条就是固定在屏幕上的,因此github的链接也采用了fixed模式。

.git-link {
    z-index: 100;
    position: fixed;
    top: 0;
    right: 0;
    border: 0;
    height: 149px;
    width: 149px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    background-image: url(//images2015.cnblogs.com/blog/459873/201603/459873-20160317090540131-1089895320.png);
}

最终的效果

posted @ 2017-09-28 14:44  xingoo  阅读(2638)  评论(1编辑  收藏  举报