博客园页面美化(代码片段)

printwangzhe printwangzhe     2023-05-07     782

关键词:

 对以前的我来说,我觉得博客只有自己搭建的才有页面美化,像博客园这样的可能没有。但是,突然有一天在我查资料的时候,发现了一篇很好看的博客,我就留意了一下他的域名,发现竟然是博客园的。就开始决定把自己的博客弄的好看一点。

  关于博客应该如何去美化,我就不讲了,自己去设置里面看的到,之后开启过JS权限之后就可以开始自己的美化了。

 关于我为啥要写这篇博客,主要原因是,网上关于博客美化的博客太散了,没有那种比较全面的讲解,于是我就想弄一个,以便后面的人做个参考。

首先是选择博客的皮肤:

  毕竟自己不能从零开始写一个页面的css文件,所以就挑一个顺眼的博客皮肤用着。

技术图片

  下面这个就是用来存放css代码的地方,此外如果css代码过长也可以上传到博客,到时候直接调用就好

 技术图片

下面我就来讲下我目前弄的css代码:

第一个:
飘雪花的代码
#Snow
     position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      background: rgba(255,255,240,0.1);
      pointer-events: none;
 这个丢在CSS代码里面
之后再把下面的丢在侧板栏公告的里面就好
    <!--雪花-->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>
第二个:博客背景的设置和块的透明化
body 
  background: url(https://i.loli.net/2019/08/08/zO25erCJysiQZLk.png) fixed;
  url的括号里面放图片的链接,可以把图片丢图床里面做个链接
  background-size: cover;
  background-position: 50% 5%;
  background-repeat: no-repeat;

下面就是块的透明化
div
opacity:0.96;

第三个:
    侧面公告栏的音乐导入
    下面这个是网易云音乐的外链播放器,去网页版的网易云音乐里面找到你喜欢的歌,再点击生成外链播放器就好(注意:博客园不支持iframe标签,需要将其改为embed)
    <embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=230height=86 src="//music.163.com/outchain/player?type=2&id=820665&auto=0&height=66"></embed>
第四个
头像的放置
<img src="https://www.z4a.net/images/2019/08/06/71179231_p0_master1200.md.jpg" alt="WZ的头像" height=180 width=180 class="img_avatar">
第五个:
        鼠标点击爱心特效
        <!-- 爱心特效 -->
<script type="text/javascript">

(function(window,document,undefined)
        var hearts = [];
        window.requestAnimationFrame = (function()
                return window.requestAnimationFrame || 
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame ||
                           window.oRequestAnimationFrame ||
                           window.msRequestAnimationFrame ||
                           function (callback)
                                   setTimeout(callback,1000/60);
                           
        )();
        init();
        function init()
                css(".heartwidth: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);.heart:after,.heart:beforecontent: ‘‘;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;.heart:aftertop: -5px;.heart:beforeleft: -5px;");
                attachEvent();
                gameloop();
        
        function gameloop()
                for(var i=0;i<hearts.length;i++)
                    if(hearts[i].alpha <=0)
                            document.body.removeChild(hearts[i].el);
                            hearts.splice(i,1);
                            continue;
                    
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
            
            requestAnimationFrame(gameloop);
        
        function attachEvent()
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event)
                        old && old();
                        createHeart(event);
                
        
        function createHeart(event)
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push(
                    el : d,
                    x : event.clientX - 5,
                    y : event.clientY - 5,
                    scale : 1,
                    alpha : 1,
                    color : randomColor()
            );
            document.body.appendChild(d);
    
    function css(css)
            var style = document.createElement("style");
                style.type="text/css";
                try
                    style.appendChild(document.createTextNode(css));
                catch(ex)
                    style.styleSheet.cssText = css;
                
                document.getElementsByTagName(‘head‘)[0].appendChild(style);
    
        function randomColor()
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
        
)(window,document);

最后一个是Live2d的二次元看板娘

  由于内容稍微有点多,具体的操作可以参考这篇博客:

  https://www.cnblogs.com/kousak/p/9726514.html

最后,希望我写的这么点东西能对大家有些许的帮助,欢迎大家和我交流一切技术上的问题,希望和大家都能成为朋友。

博客园页面美化(代码片段)

 对以前的我来说,我觉得博客只有自己搭建的才有页面美化,像博客园这样的可能没有。但是,突然有一天在我查资料的时候,发现了一篇很好看的博客,我就留意了一下他的域名,发现竟然是博客园的。就开始决定把自己的... 查看详情

博客园个人界面美化(初入博客园)(代码片段)

刚入博客园,小白也要有一个“高大上”的个人博客页面啊,鼓捣了一下午,感觉自己棒棒的,叉腰得瑟个人感觉Simple的主页样式很美观,大气,哈哈首先,在博客园后台管理的设置里,申请js代码的权限(默认是没有打... 查看详情

博客园的美化(代码片段)

前言第一次写博客想从美化页面开始。页首html代码这里引入的是来自https://www.cnblogs.com/jingmoxukong/p/7826982.html的css文件1<!--自定制样式文件-->2<linkrel="stylesheet"href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.cs 查看详情

博客园主题美化diy教程(代码片段)

...到友人启发,部署了个静态页面,想着太单调了,要不连博客园的修一修,就去网上翻找了一下,果然给我发现了,但是在DIY的中途,遇到一大堆问题,因为是几年前的源码了,很多链接已经噶了。首先这个DIY页面的作者是这位... 查看详情

博客园主题自定义美化(代码片段)

...com/files/JetpropelledSnake/cnblogs.css,然后按ctrl+s,即可将本人博客用到的自定义css下载下来。接着在博客的管理页面,找到文件选项卡,上传刚刚下载的文件: 上传之后,记下该文件的url,如上图中的红框所示。注:上图中的url... 查看详情

博客园界面美化(代码片段)

博客园界面美化0x00.写在前面皮肤作者:@SevenNight皮肤作者博客:SevenNight修改人:@Ryanjie修改人:Ryanjie前几天无意之中看到了一款特别好看(每个人的眼光都不一样)的博客皮肤“verdant”,皮肤的作者是@SevenNight。当时感觉这款... 查看详情

记一次博客页面美化过程,分享代码.(代码片段)

...热心博主分享的攻略二.进行了哪些美化?1.Markdown美化2.给博客页面加上鼠标停留响应Ⅱ.字体大小font-size发生变化Ⅲ.给容器添加阴影效果3.处理一些细节三.源码分享点击此处跳转到Github注册博客园账号有一个多月了,一直想优化一... 查看详情

博客园美化(代码片段)

闲着没事对博客皮肤做了些美化,主要是css,js写了些小功能css部分:整体采用蓝色简洁风,有些部分我不用,所以没优化,比如标签,日历,相册,头部固定在顶部,侧边栏固定250px;右边内容主体自适应,支持,收藏和关注按... 查看详情

美化博客园(代码片段)

设置与我联系侧边栏公告代码<atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&amp;uin=xxxxxxxxxxx&amp;site=qq&amp;menu=yes">  <imgalign="absmiddle"border="0"src="http://wpa.qq.com/pa?p=2:xxxxxx 查看详情

博客园页面自定义美化分享。---------随时更新;(代码片段)

1.页面定制CSS代码:1/*公共样式区域开始*/23body,ol,ul,h1,h2,h3,h4,h5,h6,p,dl,dd,fieldset,legend,input,textarea,select4margin:0;5padding:0;678body9font:12px"幼圆";10word-wrap:break-word;111213/*去掉线*/14a,u,s,del15color:#666;16text-decoration:none171819/*去掉默认属性*/2021i,... 查看详情

博客园美化教程大集合(超详细,看这篇就够了)(代码片段)

阅读目录:  1. 前言  2.定制自己的博客0.美化整体效果1.准备工作2.自定义个性化导航栏3.添加顶部博主信息4.添加顶部滚动公告5.为博客文章添加目录导航6.添加分享功能按键7.定制推荐和反对按键的炫酷样式8.添加快速... 查看详情

[博客美化]博客园syntaxhighlighter代码高亮(代码片段)

...ndowsLiveWriter/OpenLiveWriter代码着色太繁琐了,仅仅为了实现博客代码着色功能就要下载新软件和搞一堆配置。Win10用户只能使用OpenLiveWriter。Web端能干的事干嘛多搞功夫。如果不愿意网页登陆账号只想通过OLW软件编辑全文并且发布... 查看详情

博客园代码高亮美化教程(代码片段)

先简单展示下效果吧:首先需要导入js代码,在侧边栏公告处将以下代码复制进入:<scripttype="text/javascript">!function()varq=null;window.PR_SHOULD_USE_CONTINUATION=!0;(function()functionS(a)functiond(e)varb=e.charCodeAt(0);if(b!==9 查看详情

博客园美化(代码片段)

侧栏字体更改1.catListTitle2font-weight:bold;3line-height:1.2;4margin-top:21px;5margin-bottom:10.5px;6border-left:10pxsolid#008000;7padding:10px010px14px;8text-align:left;9font-family:微软雅黑;1011#profile_blo 查看详情

博客园美化代码备份(代码片段)

#Header1_HeaderTitlefont-family:"华文行楷";font-size:62px;font-weight:bold;padding-top:15px;padding-bottom:5px;padding-left:20px;padding-right:0px;text-align:center;Header2_HeaderTitlefont-fa 查看详情

博客园美化:添加赞赏功能(代码片段)

将以下代码复制粘贴到侧边栏HTML中:<!--tctip支付赞赏/打赏--><scripttype="text/javascript"src="https://blog-static.cnblogs.com/files/zhangshuhao1116/pay.js"></script><!--js文件引入--><script>newtct 查看详情

博客园自动生成目录及页面美化

一、自动生成目录1、在博客园后台管理页面选择“设置”2、生成三级目录2.1、操作步骤找到页脚HTML代码,复制自动生成目录的js代码,保存即可代码如下:ViewCode2.2、效果:3、生成一级目录3.1、操作步骤:找到页脚HTML代码,复... 查看详情

博客园美化:添加qq联系按钮(代码片段)

将以下代码复制粘贴到博客侧边栏公告HTML: <!--联系qq--><divalign="center"><atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=744461004&site=qq&menu=yes"><imgalign="absmiddle"borde 查看详情