|    Blogger  |  随手写下  |  网络服务  |  做好每一件事  |  我的视频  |  给我留言   |

2011年3月2日星期三

Blogger侧边栏优化之Css Sprites应用

   本身Blogger是一直被封了的,虽然经过绑定域名CNAME的方式可以浏览Blogger了,可是速度总是不很理想,闲了就搜索关于博客速度优化的帖子看,能做到都基本做了,做不了的始终是无法下手,代码盲啊,复制什么的还可以。

   我的博客上的图片有点多了,这肯定增加了Http请求,无疑会拖慢显示速度,知道Css Sprites两年多了,始终不会使用啊,前两天无意中看到了一篇介绍,代码都贴出来了,反复的实验,终于被我给搞成功了,哈哈对于代码盲来说是非常痛苦的事情,目前能做到只是把侧边栏里的Feed图标等做了优化,也就是5张小图标合成一张图片来显示,这样以前5次Http请求现在变成了1次,当然了一张图片肯定是要大一些的,没办法啊,下面把本人的实践贴出来:


       1. 图片合成:首先是把小图片合成一张大图片,博客右侧的图标共5个,每张44*44,所以大图做出来是224*44的,宽度上图标和图标之间加了1px的距离,大图是背景透明的PNG格式。

       2. 背景定位:Css Sprites就是可以通过一张大图显示出每个小图标,这就要求定位好每个小图标的位置,定位不好图标就无法显示或者是链接和图片错开了,定位呢我下载了CSS森林的Css Sprites样式生成工具,非常好用,不但可以定位图标,还可以生成Css 样式呢,使用方法可以参考他的帮助,也可以给我留言。

        3. 放置代码:准备工作做好了,然后就要放入代码了,直接放置上边软件生成的代码是不行的,最少我这里不行,我是用W3school在线测试工具反复测试才生成了代码的,你也可以先测试好再添加代码,我是这样做的:

A. 打开修改HTTP,勾选扩展窗口小部件(做好备份),查找代码
]]></b:skin>
在之前添加如下代码:

<!--
/* 基本定义 */
#Misc ul{
padding:0px 0 5px;
list-style-type: none;
}
#Misc li{
width:43px;
height:55px;
float:left;
margin-left:12px;
display:inline;
}
/* 定义Feed图标集链接a的样式 */
#Misc li a {
text-decoration: none;
background-image:url('https://lh5.googleusercontent.com/_rp9M5PusFSA/TWzBePgFzDI/AAAAAAAAZJw/I8pHjwNsCXY/s800/feed.png');
background-repeat: no-repeat;
width: 44px;
height: 44px;
display: block;
}
/* 隐藏链接文字 */
#Misc li a span{
display: none;
}
/* 通过调整背景大图的位置定义每个图标链接a的样式 */
#f-a {background-position: -0px 0;}
#f-b {background-position: -45px 0;}
#f-c {background-position: -90px; 0}
#f-d {background-position: -135px; 0}
#f-e {background-position: -180px; 0}

-->

B. 在HTML里找到侧边栏的代码位置,把以下代码加入你想要加入的地方:
<div id='Misc'>
<ul>
<li><a href='http://feeds2.feedburner.com/mifia' id='f-a' target='_blank' title='Subscribe me on feedburner'><span>Feedburner</span></a></li>
<li><a href='http://feed.mifia.com.cn/' id='f-b' target='_blank' title='Subscribe me on feedsky'><span>Feedsky</span></a></li>
<li><a href='http://t.qq.com/mifia1980/' id='f-c' target='_blank' title='Follow my Tencent microblogging '><span>Tencent microblogging</span></a></li>
<li><a href='http://www.google.com/reader/shared/04745602405300583246' id='f-d' target='_blank' title='My Google Reader Share'><span>Google Reader</span></a></li>
<li><a href='http://friendfeed.com/mifia' id='f-e' target='_blank' title='Subscribe My Friendfeed'><span>Friendfeed</span></a></li>
</ul></div>

4.OK,通过这样几步我们完成了一次关于Css Sprites的应用,至于博客速度的改观嘛还有待观察,国内网络太不稳定了。效果呢参见本人Blogger侧边栏图标。