釜底抽薪之一步步山寨博客园皮肤

原帖地址：http://www.cnblogs.com/axing/archive/2013/05/25/3098219.html

    今天趁着中午休息时候，来到博客园吸收养分，打开博客园首先映入眼帘的是 7c00的博客皮肤,两个字，给力！这样的皮肤还是在N年前玩Jquery的时候才见到过的（葛优：那年我也18岁）。没想到会在博客园看到。定睛几秒，想到一句口头禅（吴宗宪）：不得了啊，要死了！怎么可以这样子！

    7c00的博客里面有介绍到他的github里面有教程，但是因为公司网络限制（唯独能访问博客园和csdn [此时@dudu和@蒋涛应该翘起嘴角了吧！]），导致无法访问其他网页。更别说下载各种投机取巧的神器！（如Fiddler2、Firebug等神器）。只剩下工具栏上苦逼的IE6，于是我，一个马步向前一去，左勾拳，右勾拳，遍历各种盘符，抱着试试看的心态看能否找到给力点的浏览器安装包，就在这时，奇迹出现了。XP IE8升级包。哥微微一笑。犹如饿狼捕食一样，三下两除二将IE6升级到IE8（因为IE8的开发人员工具比较好用）,  开始动工！  以下是操作步骤。

    

让Beyond Compare神器就位

     分别打开我和7c00的博客首页，右键+V（个人习惯，其实就是点击博客右键选择查看源代码），分别将7c00的首页源码和我的博客首页源码，分别用两个文本文档保存，然后拖到Beyond Compare中进行对比。（此处对比的亮点在于：看两者引用的JAVASCRIPT和CSS是否一致）。 它们一直以为只要隐身着就没有帅哥发现它们穿着的比基尼，但是它们错了，它们就好比田地里的金龟子，夜晚的萤火虫。是那样的鲜明，那样的出众。尤其是它们引用的CSS和JAVASCRIPT都深深的出卖了它们….. 果然亮点来了。如下图

页首引用的css

页尾引用的JS

让Notpad++神器就位

     其实不一定是Notpad++了，也是个人习惯，其实大家只要准备个txt文本文档即可。用于保存css和js。

copy上面给出的css和js地址，放到浏览器中（火狐会直接打开，IE会弹出一个txt文本文档，大家都懂的），将他们下载下来保存到本地（为什么要保存到本地？原因有很多种：1、可以根据自己的喜号编辑修改css和js 。2、万一哪天7c00看到这篇文章，一怒之下给自己的博客移形换面，把所有的css和js都“强A”了，怎么办？那你岂不是比基尼都没得穿？原因下面会提到。）

让IE8开发人员工具就位

      将保存在本地的css和js打开，此时你就可以任意发挥你的聪明才智了。按照自己喜欢的风格，给70cc的皮肤做个易容术。一般的修改只需要在custom.css和custom.js中完成即可。在打开的custom.js文档中Ctrl+F查找70cc，<!--StartFragment -->

 

图中是我已经更新后的博客链接和显示名称。只需要将图中标明处改成你的博客链接和大名即可。

然后是custom.css。打开博客F12调出 开发人员工具，这个工具想必大家用的比我熟练多了，因为目前公司主要是开发winform产品。快1年没动这个神奇了。

点击工具上的小箭头，按照自己的风格，找到元素的id或者class，你就可以再custom.css中自定义了。

将文件上传到自己的博客中

      阴险吧！防火防盗防师兄嘛！要做到万无一失才行。 保存更新后的custom.css/js，连同“一”中提到的其他js和css文件，都上传到自己的博客中（博客——>设置——>文件），现在可以大呼一口气了，因为只要的工作都做的差不多了。

将上传好的文件，引用到博客中

      这也是最后一步了，将“一”中提到的css/js路径改为上传到自己博客中的css/js目录，不要告诉我你不知道你自己上传文件的路径！ 我是不会告诉你点击文件右键属性可以看到的！

首先把“博客模板”选择为”Custom”，然后将博客设置中的“禁用模板默认css”（这就是“二”中提到的为什么7c00删除文件后你连比基尼都没得穿的原因），将所有的样式css都添加到“页首Html代码”，将所有js都添加到“页脚Html代码”。【虽然复制粘贴很简单，但是这写是要分析源文件中js和css文件所处的位置来确定的！ 好吧，我承认这个地方我浪费了些时间】。

点击保存！ 刷新博客！ 一切都已在掌握中了….(效果就是我的博客皮肤)

后话

      刚才回家测试，在IE中头部的名称会乱码，估计是用Notpad++导致的编码问题，不过在火狐中可以正常显示。

      因为很久没用web的工具，所以第一次做上面操作的时候，着实做了一些无用功。汗~~

      OK! 以上都是鄙人一步一个脚印弄出来的，如果觉得对您有用的话，点击下面的推荐。

       喜欢的话，可以按照我上面提供的步骤完成博皮百变。

       好吧，加上惯例客套话！您的推荐，是我无穷的动力。最后欢迎大家提出您宝贵的意见，进行交流。谢谢大家！（第一次用windows live Writer，弱爆了！）

本文链接