详谈如何定制自己的博客园皮肤

Quickstart

如果你仅仅想原封不动的使用本人的定制皮肤,而不想了解实现细节。那么你只需要完成以下几个步骤即可,后面的章节可以忽略。

(1)进入博客园管理后台的设置标签页

这个设置页面下有几个输入框允许你添加 html 、css 、js 代码,博客园会在渲染你的博客页面时自动加载这些代码。

  • 页面定制CSS代码
  • 博客侧边栏公告
  • 页首Html代码
  • 页脚Html代码

(2)页面定制CSS代码

不必添加内容,但是需要勾选 禁用模板默认CSS

(3)博客侧边栏公告

添加以下代码:

<!-- 小老鼠游戏控件 -->
<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>

<!-- 公告栏时钟控件 -->
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

<!-- 百度分享栏控件 -->
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"slide":{"type":"slide","bdImg":"3","bdPos":"right","bdTop":"105.5"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document){0[(getElementsByTagName("head")[0]||body).appendChild(createElement("script")).src="http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion="+~(-new Date()/3600000)]};
</script>

(4)页首Html代码

<!-- fork github 控件 -->
<a href="https://github.com/dunwu" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

<!-- 自定制样式文件以及脚本 -->
<script src="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.js"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />

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

<!-- 标签云相关库 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>

(5)点击保存,完成。

定制博客园 CSS 的原理

为了帮助理解,说明这些输入框的作用时,我都截取了浏览器开发者工具的截图。

说明 市场上流行的浏览器基本上都支持开发者工具,一般快捷键为 F12。你可以在 Elements 栏看到你的页面中添加的元素。

页面定制CSS代码

在这里添加的 css 代码会被博客园添加到一个临时 css 文件中,并用于渲染你的博客页面。

注意 如果勾选 禁用模板默认CSS ,则你选中的博客皮肤的 css 效果将失效。

博客侧边栏公告

在这里添加代码会被嵌入到博客园页面的 sideBar 下。

页首Html代码

在这里添加代码会被嵌入到博客园页面的 body 标签 下。

页脚Html代码

在这里添加代码会被嵌入到博客园页面的 body 标签 下。

说明 从两个截图不难看出,在博客园管理后台的页首或页脚输入框写入代码,并无区别。

定制细节

我在打造自己的博客园皮肤的过程中,也是借鉴了很多网友的例子。在这里分享一下。

说明 下面的内容,需要你了解一定的 html + css + js 知识。我会讲解如何去实现皮肤定制,但是不会在这里解释基础语法。

独立控件

小老鼠游戏动画

忘记在哪儿学习到的。将以下代码粘贴到博客侧边栏公告即可。

<div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;"          data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;"          width="240" height="160"><param name="movie"           value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>

动画时钟

效果图

我在 http://www.cnblogs.com/liyunhua/p/4558480.html 学习来的。将以下代码粘贴到博客侧边栏公告即可。

<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="240" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

百度分享栏

既然选择写博客,自然希望被更多人看到自己的文章。所以,添加一个分享栏,使得访客可以轻松将你的博客分享到各个社交平台是一个不错的功能。

效果图

进入 百度分享官方 页面,按照导航提示。

选择功能 > 设置按钮 > 设置图片按钮 > 获取代码。

将代码粘贴到博客园管理后台的博客侧边栏公告即可。

Github 角

作为程序员,总该有个 github 账户吧。可以使用 GitHub Corners 将博客和 Github 账户关联起来。

效果图

点击右上角,就可以跳转到 Github,还是挺帅气的。

使用方式如下:

进入 GitHub Corners ,选择自己钟意的 Github 角样式,拷贝对应的代码。记得将超链接 ahref 属性替换为你的 github 地址。

然后将代码粘贴到页首Html代码

标签云

效果图

我从 http://www.cnblogs.com/justinw/archive/2010/06/17/1759661.html 学习的。

使用方式如下:

粘贴以下代码到页首Html代码

<!-- 标签云相关库 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.engine3D.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.particlePhysics.js" type="text/javascript" charset="utf-8"></script>
<script src="https://files.cnblogs.com/files/jingmoxukong/jquery.starfieldTagCloud.js" type="text/javascript" charset="utf-8"></script>

<!-- 定时器 -->
<script>
function customTimer(inpId, fn) {
  if ($(inpId).length) {
    fn();
  }
  else {
    var intervalId = setInterval(function () {
      if ($(inpId).length) {  //如果存在了
        clearInterval(intervalId);  // 则关闭定时器
        customTimer(inpId, fn);              //执行自身
      }
    }, 100);
  }
}
function generateTagClouds() {
  $('.catListTag>ul').wrap('<div class=\'wrap\' ></div>').parent().css({ 'width': '240px', 'height': '240px' });

  var options = {
    'range': [-200, 300],
    'gravity': -10,
    'xPos': 0.5,
    'yPos': 0.5,
    'gravityVector': [0, 0, 1],
    'interval': 100,
    'hoverGravityFactor': 0
  };

  $('div.wrap').starfieldTagCloud(options);
}
$(function () {
  ...
  customTimer('.catListTag', generateTagClouds);
  ...
});
</script>

背景动画

效果图就不上了,各位看官请直接看我的博客背景动画,还是挺有趣的吧。

我的背景动画是我在闲逛 Github 时找到的动画效果。其原理就是基于 HTML5 新特性 canvas,渲染的动画效果。有兴趣可以访问一下:动画库原地址

使用方法:

粘贴以下代码到页首Html代码

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

这段代码的意思就是定义一个 canvas 元素,然后使用我下载的 canvas-nest.min.js 库文件去渲染动画。

动态标题

闲逛 codepen 时找到的一个动态文字效果:codepen上的动画文字效果,觉得还挺炫的。我做了一个简单的移植。

效果图

使用方式:粘贴如下代码到页首Html代码即可。

<script src="https://files.cnblogs.com/files/jingmoxukong/title.min.js"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/title.min.css" />

以上引用文件被我压缩了,源码在我的 Github 上:

如果你也想使用这种动态标题,需要对源码做一些修改

// 为了渲染 cavans 效果的标题,生成一个 title 列表
function generateBlogTitle() {
  var root=document.createElement("div");
  root.id='ui';
  for (var i=0; i < 50; i++) {
    var node=document.createElement("div");
    node.className='text';
    node.innerHTML='静默虚空';
    root.appendChild(node);
  }
  document.getElementById("blogTitle").appendChild(root);

  var subTitle=document.createElement("h2");
  subTitle.innerHTML='Talk is cheap, show me the code.';
  document.getElementById("blogTitle").appendChild(subTitle);
}

将上面代码中的 node.innerHTML='静默虚空'; 替换为你的主标题;

subTitle.innerHTML='Talk is cheap, show me the code.'; 替换为你的子标题。

另外,需要将博客管理后台的主标题、子标题清空。

文章内容样式定制

有关文章内容的样式定制,我都写入了 cnblog.js 和 cnblog.css。当然,为了提高访问速度,这两个文件被我压缩了。

使用方式:添加以下代码到页首Html代码

<!-- 自定制样式文件以及脚本 -->
<script src="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.js"></script>
<link rel="stylesheet" href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.css" />

由于,我实在是懒得一一讲解代码,所以仅在下面罗列这两个文件支持的特性。如果想在我的源码基础上作一些修改,可以在这里访问源码:

cnblog.js cnblog.css

带头像的评论栏

博客园的评论栏默认不显示用户头像,这样显得非常单调。所以我添加了一段定制代码。

效果图

js 源码

自动生成文章目录

如果你的文章内容较长,有个目录,可以帮读者快速定位感兴趣的内容。

效果图

快捷操作栏

这个也是我从博客园其他朋友那儿学习的,但是实在想不起出处了。

响应式布局

我对于博客做了一些简单的响应式布局处理。使得读者在移动端上访问时不至于有过于糟糕的体验。

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

@media only screen and (max-width: 736px) {
  #navigator {
    width: 90%;
    margin: auto;
    float: none;
  }

  #mainContent {
    width: 90%;
    margin: auto;
    float: none;
  }

  #sideBar {
    width: 90%;
    margin: auto;
    float: none;
  }

  ...

效果图

样式的美化

剩下的内容就是一些琐碎的美化细节了。比如我对标题文字增加了阴影效果,表格重新渲染了颜色等等。如果不喜欢,请自行参考我的源码修改。

资料

本文的样式定制源码

github-corners

canvas-nest

codepen上的动画文字效果

美化博客园界面(让您的博客更加赏心悦目)希望对您有用

jQuery]3D效果的标签云

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

IEPNGFix:Unclickable children of element 解决办法

以前我有写过一篇关于让IE6支持png半透明图片的方法,这期间这一神器一直发挥了很大的作用,并且没有出现过什么差错,直到昨天。 昨天同事做的一个项目因为设计图的...

36610
来自专栏腾讯大讲堂的专栏

移动H5前端性能优化指南

移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用 2. 在Mobile侧我们提出三秒种渲染完成首屏指标 3. 基于第二点,首屏加载3秒...

5336
来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

1132
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

1402
来自专栏惶心 - 技术博客

为博客标题自定义字体

最近 @Shawn 的群里超级多人问 Shawn 博客标题字体怎么弄的。(其实我的博客也弄了只不过他们不看而已)。

4044
来自专栏calmound

基于iframe的移动端嵌套

需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其...

5496
来自专栏coding

vue.js组件间通信

组件间需要能相互通信才价值,通信包括数据的传递,方法的调用。这样才能将不同组件结合起来搭建页面

891
来自专栏前端知识分享

第146天:移动H5前端性能优化

4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB

1484
来自专栏CSDN技术头条

【独家】饿了么前端团队快应用背后研发实践

饿了么是一年前开始参与内测尝试开发快应用的,看着快应用平台一步一步的走过来,发展的越来越好。目前来说快应用开发条件已经比较完善,本次分享,为大家介绍前端开发人员...

2063
来自专栏疯狂的小程序

关于微信小程序内置组件swiper,circular使用分享

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技...

62410

扫码关注云+社区

领取腾讯云代金券