ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

博客园定制(烟花特效,点击爱心,返回顶部,禁用广告,离开页面提示)

2021-09-29 09:34:17  阅读:140  来源: 互联网

标签:function 特效 text 博客园 back font top 页面


说在前面

  • 定制前需要向博客园申请js权限,具体操作 管理-->设置-->基本设置-->js权限申请(位于博客皮肤下面)

  • 通过权限后可以定制博客园,这些定制是在借鉴他人的基础上稍作修改,开放的定制框都可定制内容

  • 这里还是应用原来的皮肤模板,CSS只做少量修改,如果需要用自己的模板,需要禁用模板默认CSS

  • 博客园提供了免费的使用平台,方便了大家,如果影响不大,不禁用广告比较合适一些,相互理解

  • 定制效果就如当前博客效果所示,借鉴了公共资源,就将资源回馈给公共,我们一起努力让博客园变得更好

博客园定制

1.1 页面定制CSS模板

/* 自定义日历样式 */
#blog-calendar td {
    padding: 5px 3px;
    font-size: 13px;
}
#blog-calendar td a {
    font-weight: bold;
}
#blog-calendar table a:hover {
    color: #FFA500;
    text-decoration: underline;
    background: transparent;
}
#blog-calendar table u {
    text-decoration: none;
}


/* 昵称模块 */
#profile_block {
    font-size: 13px;
}


/* 昵称模块 a标签取消下划线 */
#profile_block a {
    text-decoration: none;
}


/* 侧边搜索框 */
.mySearch {
    padding-bottom: 10px;
}
.mySearch > div {
    padding-top: 10px
}
.mySearch #q {
    height: 40px;
    width: 150px;
    border-radius: 5px;
    border: 1px solid #ddd;
}
.mySearch #btnZzk {
    height: 42px;
    width: 90px;
    border-radius: 5px;
    border: none;
    font-size: 15px;
    cursor: pointer;
}
.div_my_zzk {
    padding: 0 20px;
    display: flex;
    justify-content: space-around;
}


/* 隐藏广告,免费用着博客园平台,如果影响不是很大,不禁用会比较合适一点 */
/* 
#ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
    display: none;
}
*/

1.2 博客侧边栏公告模块

<!-- 自定义侧边栏头像 --> 
<img src="https://images.cnblogs.com/cnblogs_com/zq-zq/2036446/o_210925130930My_.jpg" id="myPhoto" title="很高兴认识你 ^-^" alt="Asimple头像" width="200px" style="border-radius:50%">


<!-- 监听并自定义网页的 title -->
<script>
    // 记录时间
    var time;
    // 记录初始title
    var initTitle=document.title;
    // 添加监听事件
    document.addEventListener('visibilitychange', function () {
        // 参观者离开博客
        if (document.visibilityState == 'hidden') {
            clearTimeout(time);        
            document.title = '人呢?别走啊!

标签:function,特效,text,博客园,back,font,top,页面
来源: https://www.cnblogs.com/zq-zq/p/15351228.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有