泪划痕: 教程列表

显示标签为“教程列表”的博文。显示所有博文

2011年12月6日星期二

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

如上图粉色箭头前后对比，将小工具标题换成图片

第一步骤：

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

第二步骤：

CTRL+F 找你要更换成图片的小工具标题，如泪划痕的：状态

你会看到如上图红框的一排字。

第三步骤：

把 <h2 class='title'><data:title/></h2> 换成以下代码：

小提示：

紫色字体 =

的图片网址

完成后，会如下图红框 : （点击查看大图）

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 里，保存。

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);
}

添加了后就会像下图红框。

预览+保存模板。

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>

小提示：

可以随意更改你想要写的字。
红色字体 =

跟着文字移动的图案的图片网址

图片例子：

图片网址：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxSXrF4jKja_f5qP6fJ43HMYTe6PRvUfwIPDg5pTTBGxXP5UY60CBLFr5TAS1nhwYuo-TTOlstjWjtNRaGyeXCn46EVZFtnrGHRve8I4fpL0M0W_DVdYW5AoOpF9uF9tr2ILJDRnJxod5m/s1600/2.jpg

添加了后会像下图红框：

预览 + 保存模板。

2011年10月18日星期二

粉色系列聊天室背景

效果预览图：

分割线

图片网址：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnKK41bgxmRZ-4tSk3Ya-TzUY859h4YHQekzxlra-0wPoRI3LaIo99aJkOmGgW-Dmn4iJn2M0cmhSoIpV9jcOoUybvGrQlcfZDOlx2m48Eso_OzLUFto2F1giIAuFJgut3x_kzDFIebwca/s1600/10.png

图片网址：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeVjX91DEHJLhbBclJk5dBjdjRMiDne-cN_hPuPrCqFTUkU-P8U-9-DLP1e9tvRkcKsRnYPWmO_dthnJCl93iqaInDHzGBzs0O4BWUlJR-n0TVrJ91Jw-uGXlPd-F-E8vXXf5gbEBJ3oUL/s1600/11.png

图片网址：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHp6JA3WYiOdtB6-NXwo-1qQQGqmkYp2KmVSwQQAcEHaeK8eY4B_tkM0DsHCFkba8G4G-jwvBBdmgUrKU1QzXj2-4IWsPRephqXikCvu770fDq2HjKl-FTp2Yl_qTYN2sQqAvM9bSk0lge/s1600/7_%25E5%2589%25AF%25E6%259C%25AC.png

图片网址：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMSt3yFoC6TtuqsmrPV2De4o0qv3JPPGBnCOPM__29Qi6fPab6hXU19G0_IKTDftOnOaOv-tuchSx-MEi_ramTh1bUbd4SFkanWACy9ku5dYpKTsWucLUhFxQQVZ90DZ0khnsjn9tiuTX/s1600/12.png

已经调整好位置了，代码如下。

Cbox 使用者的代码

登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具- HTML/Javascript
在 HTML/Javascript 里添加以下代码。


<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&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&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>

红色字体 = 放上你喜欢的聊天室背景的图片网址
黄色Highlight = 放上你的cbox ID，如何寻找 CBOX ID ，点击以下链接
http://dulei-mylife.blogspot.com/2011/10/cbox-id.html

Shoutmix 使用者的代码

登入博客 - 信息中心 - 设计 - 页面元素- 添加小工具 - HTML/Javascript
在 HTML/Javascript 里添加以下代码。


<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

第一步骤

http://cbox.ws/

点击以上链接登入cbox官网 - 如下图红框点击 Publish

第二步骤

CTRL+F 找 &sec=main

如上图（看不到可以点击放大图查看），
Copy &sec=main前面的黄色HIGHLIGHT部分

黄色 HIGHLIGHT部分 = 你的cbox ID

然后把你的CBOX ID paste去我cbox背景代码里面指定的你的CBOX ID

2011年10月17日星期一

移动的最新帖子

如上面效果，会移动的最新帖子。

登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具 - HTML/Javascript

在 HTML/Javascript 里添加以下代码。

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">

</style>
<script language="javascript">
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://dulei-mylife.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js" type="text/javascript">
</script></div>
</center>

蓝色字体 = 记得换去你的博客网址
完成，保存。

可以自行美化 移动的最新帖子。

美化小提示：

青色字体 = 移动最新帖子的颜色背景的颜色代码
红色字体 = 移动最新帖子的图片背景的图片网址
粉色字体 = 移动最新帖子的形状的形状代码

形状代码如下：

Example A
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;

Example B
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

Example C
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

Example D
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

Example E
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

Example F
-moz-border-radius: 35px;
border-radius: 35px;

小提示：如果移动的最新帖子停止移动

只限出现这种状况的博客，
在你每个置放 HTML 代码的小工具里 CTRL+F 找以下的链接。
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
例如 scroll to top 的代码里你会看到 以上链接。

Copy（此教程）最新帖子的代码只需从 <style media="screen" type="text/css">开始
然后 paste在 scroll to top（例子）的代码下面。

2011年10月15日星期六

右上角添加dashboard & follow

如图红色箭头，放 “信息中心”（dashboard）和 “关注”（follow）小图在右上角。

第一步骤放代码。

登入博客 - 信息中心 - 设计 - 添加小工具 - HTML/Javascript

在 HTML/Javascript 里添加以下其中一款代码。

第一款如下图样式的图片

<a style="display:scroll;position:fixed;top:10px;right:76px;" href="http://www.blogger.com/home" title="Dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?468" /></a><a style="display:scroll;position:fixed;top:10px;right:15px;" href="http://www.blogger.com/follow-blog.g?blogID=你的博客ID" title="Follow"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?468" /></a>

第二款用自己制作的图片

第二步骤获取博客ID

登入博客 - 信息中心 - 设计

现在，往上看你的网址，你会看到如下图：

如图灰框，copy blogID=后面部分

copy好后，paste在第一步骤的红色字体。

最后，保存。

2011年10月13日星期四

鼠标指向小工具标题变色

如上图，前后对比，鼠标指向小工具标题改变颜色。

开始

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 h2 {

在 h2 { 上面添加以下一款代码

第一款： “ 颜色 ” 背景

h2:hover {

background:#000000;

color: #FFFFFF;

-webkit-transition-duration: .5s;

}

第二款，“ 图片 ” 背景

h2:hover {

background: url(图片网址 / image direct link) repeat;

color: #FFFFFF;

-webkit-transition-duration: .5s;

}

添加了后会像下图红框：

小提示：

青色字体 = 如图青色箭头，鼠标指向后改变背景颜色的颜色代码 or 图片网址
粉色字体 = 如图粉色箭头，鼠标指向后改变字体颜色的颜色代码

2011年10月12日星期三

滑行移动的分页图片

以后不放谁问的教程了/.\ 懒惰print screen ，还是照旧先问的先发 =）。

如上图，滑行移动的分页图片

我把它做成我的博客头图，想把它做成什么都可以

相册，热门帖子……等等，随你创意。

第一步骤，放美化/功能的代码

登入博客 - 信息中心 - 设计 - 修改HTML

CTRL+F 找 /* header

Copy 以下的代码 Paste 到 /* header 上面
（华语字体解释可以连同拷贝，方便你们日后美化）

/* 美化图片外的框框 */
.window {
height:330px;
width: 470px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 2px solid #272727;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;top: 0; left: 0;
}
.image_reel img {
float: left;
}
/* 更改数字调整分页的位置 */
.paging {
position: absolute;
top: 320px; right: 160px;
width: 160px; height:5px;
z-index: 100;
text-align: center;
line-height: 80px;
display: none;
}
/* 美化分页 */
.paging a {
padding: 3px 8px;
text-decoration: none;
border: 2.5px solid #BEBEBE;
color: black;
}
.paging a.active {
color: #FFFFFF;
background: #000000;
}
/* 鼠标指向分页的时候的效果 *//
.paging a:hover {
font-weight: bold;
color: #FFFFFF;
background: #000000;
}

----------------------------------别拷贝超越这条线-----------------------------

还没有效果的，先预览看看有没问题，没有问题的话才再保存模板。

美化小提示：（这个你可以先跳过，先完成第二步骤的教程才美化）

橙色字体 = 等下有解释，请继续看以下教程。
蓝色字体 = 分页在不同的博客会有不同的位置，更改蓝色字体更改位置。
粉色字体 = 框框线条的厚度，数目越大，线条厚度越厚
青色字体 = 颜色代码
红色字体 = 框框线条的类型

框框线条的类型如下：

第二步骤，放上图片。

登入博客 - 信息中心 - 设计 - 页面元素 - 添加小工具 - HTML/JAVAscript

Copy 以下代码 paste在 HTML/JAVAscript 里面

<center><div class="main_view">
<div class="window">
<div class="image_reel">
<img src="图片网址" width="470" height="330"/>
<img src="图片网址" width="470" height="330"/>
<img src="图片网址" width="470" height="330"/>
<img src="图片网址" width="470" height="330"/>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 4000);
};
rotateSwitch();
$(".image_reel a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});
</script></center>

------------------------------别拷贝超越这条线条------------------------

红色字体 = 会移动的图片的图片网址 / image direct link
橙色字体 = 图片的高度（height）&宽度（width），你可以随意自行调整图片大小。

** 切记， 第一步骤的橙色字体和第二步骤的橙色字体数目一定要一样。

这教程有点复杂 -_- 不明白的尽管问 =）