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

你的放下成了我的放不下 你的放下成了我的放不下     2022-11-23     209

关键词:

刚入博客园,小白也要有一个“高大上”的个人博客页面啊,鼓捣了一下午,感觉自己棒棒的,

叉腰得瑟

个人感觉Simple的主页样式很美观,大气,哈哈

首先,在博客园后台管理的设置里,申请js代码的权限(默认是没有打开的)

  申请的时候一定要有礼貌,有礼貌,有礼貌(申请了三次才通,别着急,慢慢来)

在博客侧边栏公告中添加如下代码(注意github链接请自行修改)

  在这里有一个小问题,使用h5的canvas绘制的背景和时钟能正常使用,小企鹅的插件是一个swf,部分浏览器会拦截

<!-- 时钟控件 -->
<div id="clockdiv"><canvas id="dom" width="180" height="180">您的浏览器不兼容canvas</canvas></div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/cyuanwu/clock.js"></script>

<!-- 小企鹅游戏控件 -->
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/penguins/penguins.swf?" width="240" height="160"><param name="movie" value="http://cdn.abowman.com/widgets/penguins/penguins.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

<!-- Fork me on GitHub -->
<a href="https://github.com/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>

 页首Html代码中插入如下代码(超喜欢这个背景,就是为了这个炫酷的背景才鼓捣的,哈哈)

<!-- 背景动画 -->
<canvasid="c_n9"width="1920"height="990"style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<scriptsrc="https://blog-static.cnblogs.com/files/cyuanwu/canvas-nest.min.js"></script>

<!-- 标签云相关库 -->
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery-3.3.1.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>

另:个人强迫症,所以修改了一丁点的CSS


body
background: #fafafa;

#clockdiv
text-align: center;
margin-bottom: 20px;
margin-bottom: 20px;

.c_b_p_desc_readmore
padding-left: 1.5rem;

a
text-decoration: none!important;

#profile_block, .newsItem >.catListTitle
display: none;

 

 

 参考链接(万分感谢):

1.http://www.cnblogs.com/felove2013/articles/4729841.html

2.https://www.cnblogs.com/jingmoxukong/p/7826982.html?utm_source=gold_browser_extension

3.https://www.cnblogs.com/javaIOException/p/7521849.html

4.https://blog.csdn.net/siwuxie095/article/details/80151468

博客园美化操作(代码片段)

之所以写这篇文章的原因了主要就是博客园的默认样式太单一,而且很多人都在用,就想与众不同一样,不做大多数 准备工作想要美化自己的博客园默认界面,首先需要申请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 查看详情

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

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

美化博客园(代码片段)

设置与我联系侧边栏公告代码<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 查看详情

博客园美化(代码片段)

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

博客园美化-darkgreentrip(代码片段)

1、第一步,样式的形成与博客皮肤的选择有很大关系本文选择darkgreentrip2、代码插入2.1页面定制CSS代码```Objective-C#homemargin:0auto;width:95%;/原始65/min-width:980px;/页面顶部的宽度/background-color:rgba(245,245,245,0.7);padding:30px;margin-top:0px; 查看详情

博客园美化(代码片段)

侧栏字体更改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 查看详情

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

先简单展示下效果吧:首先需要导入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 查看详情

博客美化(代码片段)

...r/cnblogs-theme-silence介绍Silence是一款界面简洁、运行高效的博客园主题,主要面向于经常混迹博客园的朋友。简单概括其几个主要特点:专注阅读、精致漂亮的UI;事无巨细的部署文档;兼容移动端浏览器;源码结构清晰、易扩展... 查看详情

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

#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 查看详情

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

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

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

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

记录帖如何自定义博客园界面

关于如何自定义博客园界面的文章记录博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了)博客园cnblogs:自定义页面风格博客园自定义样式 查看详情

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

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

博客园样式美化ii(代码片段)

前言感谢大家对之前博客园样式美化的认可,我终于更新啦啦啦啦更新内容01|优化首页显示效果优化前:优化后:有没有感觉瞬间立体起来了呢~02|增加管理入口这个很简单,就是导航条上加了个管理的入口原本想设置为只有博... 查看详情

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

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

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

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

博客园美化资源网站链接

详谈如何定制自己的博客园皮肤(禁用css模板级别)博客美化汇总NSDog博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了)博客园美化教程第二篇----极致个性化你的专属博客(为博客添加背景音乐插件,调... 查看详情