码迷,mamicode.com
首页 > 其他好文 > 详细

自定义博客样式

时间:2018-05-17 11:43:55      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:自定义   分享图片   col   使用   首页   widget   order   标题   idg   

自定义博客样式


一、添加自定义CSS

1. 收藏按钮悬浮

#div_digg {
position: fixed;
bottom: 10px;
right: 15px;
border: 2px solid #ECD7B1;
padding: 10px;
width: 140px;
background-color: #fff;
border-radius: 5px 5px 5px 5px !important;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

2. 修改大标题样式

/*主标题样式*/
#blogTitle h1 {
    font-size: 26px;
    font-weight: bold;
    line-height: 1.8em;
    margin-top: 10px;
}
/*超链接颜色*/
#blogTitle h1 a:hover {
    color: #f06000;
    text-decoration:none;
}

二、页首HTML代码

1. 添加 码云/GitHub 超链接

<div id="page_begin_html">
<div style="display: none" id="__document_write_ajax_div-1"></div>
<a href="https://gitee.com/RedBeast" target="_blank">
<img style="position: absolute; top: 0; right: 0; border: 0" src="https://gitee.com/RedBeast/PicCache/widgets/widget_1.svg?color=f06000" alt="Fork me on Gitee">
</a>
</div>

三、自定义脚本

首先申请JS权限

  • 公告与页首页尾都可以放HTML与JS代码。
  • 使用JS时不要直接放在HTML中,最好上传到码云或者GitHub,然后获取到文件的实际url(查看原始数据即可)。

如何引用JS?

例:雪花生成(忘了从哪荡的了),放到页脚即可。

<script src="https://gitee.com/RedBeast/PicCache/raw/master/js/flake_script.js"></script>

使用:

技术分享图片

效果图:

技术分享图片

自定义博客样式

标签:自定义   分享图片   col   使用   首页   widget   order   标题   idg   

原文地址:https://www.cnblogs.com/Albertiy/p/9048976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!