博客园个人主页美化

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

叉腰得瑟

个人感觉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

转载于:https://www.cnblogs.com/cyuanwu/p/9780927.html

博客园个人主页美化相关推荐

博客园页首html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
博客园页面定制html代码,可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
可爱的博客园样式美化、自定义博客园主题样式
cute-cnblogs 说明 "我经常有那种感觉,如果这个事情来了,你却没有勇敢地去解决掉,它一定会再来.生活真是这样,它会一次次地让你去做这个功课直到你学会为止." -- &l ...
其他：博客园页面美化
看了其他大佬的博客园页面都那么好看,我也决定美化一下自己的博客园,顺便在这里分享一下我的博客园页面美化的方法.这里我选用的模版是SimpleMemory. 效果图页面定制CSS代码 1)页面透明 # ...
博客园如何美化页面 2020最新！！
样板: 我的主博客:https://www.cnblogs.com/laoguantongxiegogo/ 我的附属博客:https://www.cnblogs.com/laoguantongxieg ...
关于博客园CNBLOG美化
本博客美化参照: http://doc.dbnuo.org/cnblogs-theme-docs/v1.1.0/#/ 转载于:https://www.cnblogs.com/Zhu013/p/1117 ...
博客园——打造不一样的个人博客
最近跑去博客园写文章了,一个原因是觉得博客园阅读体验更好,阅读时没有太多的干扰,可以定制主题界面,给人感觉更加舒适.这是我在博客园的博客首页. 点击跳转到我的博客园主题美化方案博客园默认或者官方提 ...
痞子衡博客园主页文章图片无法显示的解决方法
大家好,我是痞子衡,是正经搞技术的痞子. 众所周知,痞子衡主要是在博客园个人主页精心维护文章发布.修改更新以及最重要的目录索引. 个人主页: https://www.cnblogs.com/henja ...
前端小白也能快速学会的博客园博客美化全攻略
前端小白也能快速学会的博客园博客美化全攻略 A呦V,博客园er的自我修养是什么?第一条,别只顾收藏和偷师呀,记得点"推荐"或关注本人喔~ 美化方法论简介一般而言,需要选一个默认的 ...

博客园个人主页美化

博客园个人主页美化相关推荐

最新文章

热门文章

博客园 个人主页美化

博客园 个人主页美化相关推荐

最新文章

热门文章

博客园个人主页美化

博客园个人主页美化相关推荐