泪划痕
Best viewed in Google Chrome

2011年12月6日星期二

把每个小工具标题换成不同的图片

上图粉色箭头前后对比,将小工具标题换成图片
第一步骤:
 登入博客 - 信息中心 - 设计 - 修改HTML - 扩展窗口小部件模板打勾

第二步骤:
CTRL+F 找你要更换成图片小工具标题,如泪划痕的:状态
你会看到如上图红框的一排字。

第三步骤:
把 <h2 class='title'><data:title/></h2> 换成以下代码: 

<center><img src='图片网址'/></center>
小提示:

紫色字体 = 图片网址

完成后,会如下图红框 : (点击查看大图)

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 小图案

以上素材可以用在:

2011年10月26日星期三

移动的帖子标题

如上图,会移动的帖子标题。
第一步骤
登入博客 - 信息中心 - 设计 - 修改HTML (扩展小窗口部件打勾
第二步骤
 CTRL+F <h3 class='post-title entry-title'>

 在 <h3 class='post-title entry-title'> 后面添加 <marquee direction='left'>
第三步骤
CTRL+F </h3>
       
 </h3> 前面添加  </marquee>


添加了后会像下图红框
预览+保存模板。
小提示
红色字体 = 帖子标题的移动方向,可以换成:
left = 左边移动
right = 右边移动

2011年10月23日星期日

帖子下添加移动文字

如上图,每当写完 一部帖子后 ,下面都会有飞过的文字

-------------------------开始------------------------

登入博客 - 信息中心 - 设计 - 修改HTML (扩展窗口小部件打勾

CTRL+F 找 <data:post.body/>

在 <data:post.body/> 下面 添加以下代码 。

<marquee>飞过<img src='图片网址'/>留个评论下来呗</marquee>
小提示:
可以随意更改 你想要写的字。
红色字体 = 跟着文字移动的图案的图片网址


图片例子:
图片网址:
http://1.bp.blogspot.com/-e234BpzoXjQ/TqO4Nv7BGZI/AAAAAAAAEks/v9EzsylfVsk/s1600/2.jpg

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

2011年10月18日星期二

粉色系列 聊天室背景

效果预览图:
分割线
图片网址:
http://4.bp.blogspot.com/-WmzesoeeXkw/TpsGF-BTLyI/AAAAAAAAEh0/mQrblueaVXE/s1600/10.png
图片网址:
http://2.bp.blogspot.com/-MPn4M4aZTng/TpsGGsLfj5I/AAAAAAAAEh8/81sj1sbRRz0/s1600/11.png
图片网址:
http://3.bp.blogspot.com/-WjEVAEDKcUQ/TpsJf1QLZlI/AAAAAAAAEiU/2eMvUmGjf_Y/s1600/7_%25E5%2589%25AF%25E6%259C%25AC.png
图片网址:
http://3.bp.blogspot.com/-7f-h3ZtZ554/TpsGHr5IrlI/AAAAAAAAEiE/7JyWcEafMWo/s1600/12.png

已经调整好位置了,代码如下。
Cbox 使用者的代码
登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具- HTML/Javascript
在 HTML/Javascript 里添加以下代码。


<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cbox-dl-0306" style="padding-top: 20px;padding-left: 22px; width: 263px; height: 470px; background: url(聊天室背景的图片网址) no-repeat scroll left top transparent;" align="left" position: relative;>
<div><iframe src="你的cbox ID&amp;sec=main" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxmain" style="border: 0px solid;" id="cboxmain" width="215" frameborder="0" height="243" scrolling="auto"></iframe></div><div><iframe src="你的cbox ID&amp;sec=form" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxform" style="border-width: 0px; border-style: none solid solid; border-color: -moz-use-text-color;" id="cboxform" width="215" frameborder="0" height="75" scrolling="no"></iframe></div></div><!-- END CBOX -->


红色字体 = 放上你喜欢的聊天室背景的图片网址
黄色Highlight = 放上你的cbox ID,如何寻找 CBOX ID ,点击以下链接
http://dulei-mylife.blogspot.com/2011/10/cbox-id.html
Shoutmix 使用者的代码
登入博客 - 信息中心 - 设计 - 页面元素- 添加小工具 - HTML/Javascript
在 HTML/Javascript 里添加以下代码。

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<div id="shoutmix-dl-0306" style="padding-top: 25px;padding-left: 23px; width: 263px; height: 473px; background: url(聊天室背景的图片网址) no-repeat scroll left top transparent;" align="left" position: relative;>
<iframe src="http://www.shoutmix.com/?你登入shoutmix的Shoutbox ID" width="82%" height="330" frameborder="0" scrolling="auto"></iframe></div>

小提示:如何寻找你登入shoutmix的Shoutbox ID

如图黄色 HIGHLIGHT 部分 = 你登入Shoutmix的Shoutbox ID

如何寻找 CBOX ID

第一步骤
点击以上链接登入cbox官网 - 如下图红框点击 Publish
第二步骤
CTRL+F 找 &amp;sec=main
如上图(看不到可以点击放大图 查看),
Copy &amp;sec=main前面 的 黄色HIGHLIGHT部分


黄色 HIGHLIGHT部分 = 你的cbox ID
然后把你的CBOX ID paste去我cbox背景代码里面指定你的CBOX ID