泪划痕: 十月 2011

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 图片网址
粉色字体 = 如图粉色箭头，鼠标指向后改变字体颜色的颜色代码

PMR paper 1 answer

PMR已经结束了，答案在有传在面子书地说 /.\
不用等到公布成绩那天，现在已经可以预知自己的成绩了。

所有来源来自：
http://www.facebook.com/event.php?eid=135131626536146
答案可以到该网站上讨论 X)

答案不一定100% 正确，或许有1% 错误的可能性，供参考参考。

BI PMR Answer 2011:

01.C 02.A 03.D 04.A 05.D 06.B 07.C 08.C 09.D 10.B
11.B 12.A 13.C 14.D 15.B 16.A 17.C 18.D 19.A 20.C
21.A 22.B 23.A 24.C 25.D 26.A 27.C 28.B 29.A 30.C
31.B 32.B 33.D 34.D 35.B 36.A 37.D 38.D 39.B 40.C

BM PMR Answer 2011:

01.A 02.C 03.A 04.C 05.A 06.C 07.B 08.B 09.C 10.D
11.D 12.D 13.B 14.B 15.D 16.A 17.D 18.D 19.A 20.C
21.D 22.B 23.A 24.A 25.C 26.C 27.B 28.A 29.B 30.C
31.B 32.A 33.D 34.C 35.D 36.B 37.A 38.C 39.D 40.C

BC PMR Answer 2011:

01B 02C 03A 04D 05D 06C 07D 08A 09B 10B
11A 12C 13B 14C 15B 16C 17D 18A 19B 20C
21B 22D 23C 24C 25B 26A 27D 28A 29A 30D
31C 32D 33B 34C 35B 36D 37C 38A 39A 40C

SC PMR Answer 2011:

01.D 02.C 03.A 04.A 05.C 06.A 07.A 08.A 09.B 10.D
11.C 12.A 13.D 14.B 15.D 16.C 17.D 18.D 19.A 20.B
21.A 22.B 23.B 24.C 25.D 26.A 27.C 28.D 29.B 30.B
31.D 32.A 33.D 34.B 35.C 36.C 37.A 38.C 39.A 40.B

Maths PMR Answer 2011:

01B 02D 03A 04A 05C 06A 07B 08B 09C 10A
11B 12C 13C 14B 15C 16B 17A 18C 19C 20B
21A 22D 23D 24B 25C 26C 27A 28D 29B 30C
31D 32B 33C 34C 35B 36D 37B 38D 39A 40D

Geografi PMR Answer 2011:

01.D 02.D 03.D 04.B 05.B 06.A 07.D 08.A 09.A 10.C
11.D 12.C 13.C 14.A 15.D 16.A 17.B 18.A 19.C 20.D
21.A 22.B 23.B 24.A 25.B 26.C 27.D 28.D 29.C 30.C
31.A 32.B 33.B 34.D 35.B 36.B 37.C 38.A 39.C 40.A
41.C 42.B 43.B 44.C 45.D 46.D 47.C 48.D 49.B 50.B
51.C 52.A 53.B 54.C 55.D 56.B 57.C 58.A 59.A 60.A

Sejarah PMR Answer 2011:

01.C 02.A 03.B 04.D 05.D 06.B 07.C 08.B 09.B 10.C
11.B 12.B 13.D 14.B 15.D 16.A 17.B 18.A 19.C 20.B
21.A 22D 23.A 24.D 25.C 26.A 27.C 28.C 29.D 30.A
31.C 32.B 33.D 34.C 35.D 36.A 37.C 38.D 39.B 40.A
41.B 42.A 43.D 44.B 45.C 46.D 47.C 48.A 49.C 50.A
51.B 52.D 53.A 54.D 55.C 56.A 57.D 58.B 59.B 60.D

会不会有人越改越想喷血……

还没对华语考卷，等下才对看 /.\

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），你可以随意自行调整图片大小。

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

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