博客园特效

程序员文章站 2022-06-27 22:14:16

要定制你自己的博客园大体上分两种方式一种是不需要js权限的：比如在页脚HTML，页首HTML里加点结构，给你的博客加上一个回到顶部的导航：在页脚HTML里复制粘贴如下代码在页面定制css里复制如下代码：保存设置，去你的随笔里就可以在右下角看到一个·回到顶部的方块。再比如给你的博客加个 ......

　　要定制你自己的博客园大体上分两种方式

　　一种是不需要js权限的：

比如在页脚html，页首html里加点结构，

给你的博客加上一个回到顶部的导航：

在页脚html里复制粘贴如下代码　　　　　　

<div class="scrollbtn" id="scrollbtn">
  <ul class="clearfix"><li class="sb-gotop" id="gotop" style="display: list-item">
      <a href="#top" title="回顶部"></a>
    </li>
  </ul>
</div>

在页面定制css里复制如下代码：

.scrollbtn {
    position: fixed;
    right: 15px;
    bottom: 45px;
    width: 54px
}

.scrollbtn a {
    display: inline-block;
    width: 54px;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
    text-align: center;
    opacity: .6;
    color: #fff;
    background: url(http://images2015.cnblogs.com/blog/459873/201601/459873-20160127210900473-1080897398.png) no-repeat;
    filter: alpha(opacity=60)
}

.scrollbtn li {
    float: left;
    margin-bottom: 5px
}

.scrollbtn a:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}
.scrollbtn a, .scrollbtn li {
    overflow: hidden;
    height: 54px
}

保存设置，去你的随笔里就可以在右下角看到一个·回到顶部的方块。

---------------------------------------------------------------------------------------------

再比如给你的博客加个头像，在设置里的标题前面加上：

你的标题

再在页面定制css里改下样式，甚至可以用css3加上动画，基础样式可以参考：

.portrait {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    overflow: hidden;
    background-image: url("你的图片地址");
    background-size: 100% 100%;
    border-radius: 50%;
    background-repeat: no-repeat;
    overflow: hidden;
    transform-origin: center center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

url 改成你的图片地址，然后保存。

也可以把所有的css样式写在一个文件里，然后再点管理 =》文件 =》上传到博客园，

上传完成后点击文件名就可以看到url 了，然后在页首html里用link 标签引入这个文件：

基于此，如果你想完全定制你的博客园的话，就禁用模板css

博客园特效

然后重新写一套css 引入进去，怎么调样式不用我多说了把，打开谷歌控制台，调css所见即所得。

ps(样式没加上可能是权重不够，实在没办法加上!important把权重提到最高)

================================================================

然而这样完全没有满足前端童鞋的需求，你需要js权限

怎么申请js权限，很简单

博客园特效

博客侧边栏公告右边，如果你没有js权限的话，右边是一个申请权限的按钮，点击有个弹窗，

你需要输入你为什么要申请js权限，大家*发挥，考验小学语文的时候到了，然后等1 到 2 个小时就好了。

有js权限以后，你就可以引入别人封装好的特效了，当然牛逼也可以自己写。

烂大街的特效： 1 随鼠标移动的线条，在页脚html种插入：

<script type="text/javascript" color="47,135,193" opacity='0.5' zindex="-2" count="199" src="http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

参数可以自己改： color ：线条颜色rgb, opacity：透明的， z-indx：层级， count：数量

　　　　　　　　2，雪花飘落，下载jquery 和 jquery.snow.js 然后上传到博客园，再用script标签引入进页首html，

　　　　　　　　嫌麻烦的可以直接用别人的233333

　　　　　　　　3 点击特效，同理复制下面代码到一个js文件并上传到博客园

/* 鼠标特效 
var a_idx = 0;
jquery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new array("❤","⚡","

打赏

微信扫一扫

Extjs6 经典版 combo下拉框数据的使用及动态传参

Extjs的下拉框，在点击的时候会请求一次数据，我们可不可以在点击前就请求好数据，让用户体验更好呢？答案当然是肯定的。如果是公用的下拉框还可以传入不... [阅读全文]
10.Python初窥门径(函数进阶)

Python(函数进阶) 一、函数的传参(接上期) 形参角度(一共四种,后两种) 1. 动态参数(万能参数) 动态参数特殊用法形参角度的最终顺序... [阅读全文]
洗牌算法及 random 中 shuffle 方法和 sample 方法浅析

洗牌算法是一个简单而使用的算法，Python 标准库中已有实现。另外分析了标准库中随机取样算法的实现。 ... [阅读全文]
Spring 团队开源 nohttp，尽可能不用 HTTP

Spring 团队开源 nohttp 项目，用以查找、替换和阻止 http:// 的使用。项目是为了在可能使用 https:// 的情况下不使用到... [阅读全文]
springboot启动报错,Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.

报错: Error starting ApplicationContext. To display the conditions report re... [阅读全文]