泪划痕
Best viewed in Google Chrome

2011年11月13日星期日

【挂件】谁来访过你博客

如上图,就是能够记录谁来访过你博客的的东东
第一步骤:进入网站
http://www.google.com/friendconnect/
登入博客后,点击以上链接进入,然后跟下图号码一步步走。
1 - 如果你有很多博客,旁边会出现你所有博客,选你要添加此挂件的博客。
2 - 如上图,点击 “ Gadgets ”,然后如图红色箭头拉到下面。
3 - 在下面你会看到如上图 Add gadget by URL,点进入。
4 - 在Gadget url: paste上 http://xmlgadgets.com/ig/recent.xml,点击continue继续



5 - 这里你可以自行美化设计那个挂件
6 - 如图点击Generate code 获取代码,把它paste到:

登入博客 - 设计 - 添加小工具 - HTML/Javascript 

把代码 paste进 HTML/Javascript 里,保存。

小熊 CLICK 图


以上素材可以用在:



2011年11月6日星期日

鼠标指向Header 标题有图案滑过

 
如上图,就是鼠标指向header标题的时候会有小熊图案滑过。
第一步骤
登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 .Header h1 {
第二步骤
.Header h1 { 上面 paste以下代码。


#header { 
padding: 0px 0px 0px 100px;
background: url(图片网址)no-repeat; 
}

#header:hover { 
padding: 0px 0px 0px 100px;
background: url(图片网址)no-repeat; 

background-position:top right; 
-webkit-transition-duration: .5s; 
}

小提示:
青色字体 = header标题的位置,像我这样标题调去中间,数目,标题越向右边
红色字体 = 图案的图片网址
图片例子:

图片网址:
http://i1227.photobucket.com/albums/ee428/xiaolei123123/th_basya2.gif


预览+保存模板

2011年11月5日星期六

模糊or清晰图片在鼠标指向后的转变

注意上图的黑色鼠标,就是原本模糊or清晰的图片在鼠标指向后变成清晰or模糊

第一步骤
登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 ]]></b:skin>


第二步骤
在 ]]></b:skin> 上面 添加以下 一款代码
第一款:清晰图片在鼠标指向后变成模糊图片

img{
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

img:hover{
-webkit-transition-duration: .5s;
filter: alpha(opacity=75);
moz-opacity:.75;
opacity:.75;
}
第二款:模糊图片在鼠标指向后变清晰图片

img{
filter: alpha(opacity=75);
moz-opacity:.75;
opacity:.75;
}
img:hover{
-webkit-transition-duration: .5s;
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

添加了后就会像下图红框
预览+保存模板。

Up / Fly 小图案

以上素材可以用在: