釜底抽薪之一步步山寨博客园皮肤
转自: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的开发人员工具比较好用), 开始动工! 以下是操作步骤。
让Beyone Compare神器就位
分别打开我和7c00的博客首页,右键+V(个人习惯,其实就是点击博客右键选择查看源代码),分别将7c00的首页源码和我的博客首页源码,分别用两个文本文档保存,然后拖到Beyond Compare中进行对比。(此处对比的亮点在于:看两者引用的JAVASCRIPT和CSS是否一致)。 它们一直以为只要隐身着就没有帅哥发现它们穿着的比基尼,但是它们错了,它们就好比田地里的金龟子,夜晚的萤火虫。是那样的鲜明,那样的出众。尤其是它们引用的CSS和JAVASCRIPT都深深的出卖了它们….. 果然亮点来了。如下图
页首引用的css
页尾引用的JS
其实不一定是Notpad++了,也是个人习惯,其实大家只要准备个txt文本文档即可。用于保存css和js。
copy上面给出的css和js地址,放到浏览器中(火狐会直接打开,IE会弹出一个txt文本文档,大家都懂的),将他们下载下来保存到本地(为什么要保存到本地?原因有很多种:1、可以根据自己的喜号编辑修改css和js 。2、万一哪天7c00看到这篇文章,一怒之下给自己的博客移形换面,把所有的css和js都“强A”了,怎么办?那你岂不是比基尼都没得穿?(原因下面会提到。)【注:】copy下来的css/js上传到自己博客中可能会导致中文乱码: 解决方法:用Notpad++或者txt文本文档粘贴后,另存为txt文档,编码方式改为 UTF-8 即可)
让IE8开发人员工具就位将保存在本地的css和js打开,此时你就可以任意发挥你的聪明才智了。按照自己喜欢的风格,给70cc的皮肤做个易容术。一般的修改只需要在custom.css和custom.js中完成即可。在打开的custom.js文档中Ctrl+F查找70cc,
![](http://images0.cnblogs.com/blog/116076/201305/25003713-592bc10655894b27a343d39be9abb1b8.png)
图中是我已经更新后的博客链接和显示名称。只需要将图中标明处改成你的博客链接和大名即可。
然后是custom.css。打开博客F12调出 开发人员工具,这个工具想必大家用的比我熟练多了,因为目前公司主要是开发winform产品。快1年没动这个神奇了。
点击工具上的小箭头,按照自己的风格,找到元素的id或者class,你就可以再custom.css中自定义了(记得download背景图片,custom.css第一行)。
将文件上传到自己博客中阴险吧!防火防盗防师兄嘛!要做到万无一失才行。 保存更新后的custom.css/js,连同“一”中提到的其他js和css文件,都上传到自己的博客中(博客——>设置——>文件),现在可以大呼一口气了,因为只要的工作都做的差不多了。
将上传好的文件,引用到博客中这也是最后一步了,将“一”中提到的css/js路径改为上传到自己博客中的css/js目录,不要告诉我你不知道你自己上传文件的路径! 我是不会告诉你点击文件右键属性可以看到的!
首先把“博客模板”选择为”Custom”,然后将博客设置中的“禁用模板默认css”(这就是“二”中提到的为什么7c00删除文件后你连比基尼都没得穿的原因),将所有的样式css都添加到“页首Html代码”,将所有js都添加到“页脚Html代码”。
【虽然复制粘贴很简单,但是这写是要分析源文件中js和css文件所处的位置来确定的! 好吧,我承认这个地方我浪费了些时间】。
引用的时候注意js编码方式,否则仍然会导致中文乱码。(在上文中提到的UTF-8转码方式,适用于Firefox,GOOGLE 但不适应IE,所以在引用的时候加上了gb2312再次转码,现在3个浏览器都兼容了。具体为什么这么做。请web高手不吝赐教。在此谢过~)
点击保存! 刷新博客! 一切都已在掌握中了….(效果就是我的博客皮肤)
[三分钟热,切换回原来的博皮,效果已经上传如上图。而且有朋友通过我的教程完成了博皮更换,见10# , 谢谢-update time:20130531]
后话
因为很久没用web的工具,所以第一次做上面操作的时候,着实做了一些无用功。汗~~
OK! 以上都是鄙人一步一个脚印弄出来的,如果觉得对您有用的话,点击下面的推荐。
喜欢的话,可以按照我上面提供的步骤完成博皮百变。
好吧,加上惯例客套话!您的推荐,是我无穷的动力。
最后欢迎大家提出您宝贵的意见,【评论按钮悬浮在您屏幕的右下角。欢迎点评】进行交流。谢谢大家!(第一次用windows live Writer,弱爆了!)