Jealous'❤: 七月 2012

2012年7月23日星期一

小工具坊 ‖ 愿望清单 Wish List

什么是愿望清单呢 ?

愿望清单就是在部落格里很常见的小工具

就是列入下面的小工具

这个清单非常的简单 ~

步骤和前几个教程一样 ~

只是代码不同 ~

首先先到信息中心 ( DashBoard )
然后点击设计( Design )
也就是如下图所显示的

点击了后就会到设计 (Design) 的页面元素(Page Elements)
然后请点击页面元素(Page Elements)在页面元素
那边开一个新的小工具然后选择HTML/Java Script如下图:

然后放入一下的代码 ~

<form name=myform>



<input type="checkbox" name="wishlist" value="1" checked />你的愿望<br />



<input type="checkbox" name="wishlist" value="1" disabled />你的愿望<br />



<input type="checkbox" name="wishlist" value="1" checked />你的愿望<br />



<input type="checkbox" name="wishlist" value="1" checked />你的愿望<br />



 </form>

这些代码得自行更改

如何更改代码呢?

如果你想要更多的愿望 ~

就在</form> 上面添加一下代码

<input type="checkbox" name="wishlist" value="1" checked />你的愿望<br />

然后把你的愿望代替在你的愿望那边

checked 是已完成，就表示在你的愿望旁边有个勾勾

disabled 是指还没完成

记得自行更改哦 xDD

2012年7月21日星期六

鼠标效果 ‖ 多色散落的星星

这个教程和之前所教过的单色散落的星星一样

不过这个事是多色版的

效果图 :

首先先到信息中心 ( DashBoard )

然后点击设计( Design )
也就是如下图所显示的

点击了后就会到设计 (Design) 的页面元素(Page Elements)
然后请点击页面元素(Page Elements)
在页面元素那边开一个新的小工具
然后选择HTML/Java Script
如下图:

然后把下面的代码贴在那边

<script type='text/javascript'>

// <![CDATA[

function initCursor() {

if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}



var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")

var r=1

var g=1

var b=1

var seq=1

var sparkles = 35;



var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();



function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}



function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

}



function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

}

else tiny[i].style.visibility="hidden";

}



document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}



function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}



window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

}



function createDiv(height, width) {

var div=document.createElement("div");

rainbow="#"+hex[r]+hex[g]+hex[b]

if (seq==6){

b--

if (b==0)

seq=1

}

if (seq==5){

r++

if (r==12)

seq=6

}

if (seq==4){

g--

if (g==0)

seq=5

}

if (seq==3){

b++

if (b==12)

seq=4

}

if (seq==2){

r--

if (r==0)

seq=3

}

if (seq==1){

g++

if (g==12)

seq=2

}

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px"; 

div.style.overflow="hidden";

div.style.zIndex="10";

div.style.backgroundColor=rainbow;

return (div);

}

window.onload=function()

{

initCursor()

initImage()

startTime()

}



function initImage() {

imageId = 'menu'

image = document.getElementById(imageId);

setOpacity(image, 0);

image.style.visibility = "visible";

fadeIn(imageId,0);

}

function fadeIn(objId,opacity) {

if (document.getElementById) {

obj = document.getElementById(objId);

if (opacity <= 100) {

setOpacity(obj, opacity);

opacity += 10;

window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);

}

}

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}



function changeNav(id) {

document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;

document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;

document.getElementById('rabbit').style.top="275px"

document.getElementById('penguin').style.top="532px"

}



function hidestatus(){

window.status=""

return true

}

// ]]>

</script>



<script type="text/javascript">

if (window.jstiming) window.jstiming.load.tick('headEnd');

</script>



<div class='navbar section' id='navbar'><div class='widget navbar' id='navbar1'><script type="text/javascript">

function setAttributeOnload(object, attribute, val) {

if(window.addEventListener) {

window.addEventListener("load",

function(){ object[attribute] = val; }, false);

} else {

window.attachEvent('onload', function(){ object[attribute] = val; });

}

}

function showRelatedContent(args) {

var el = document.getElementById('related-iframe');

if (el.parentNode.style.display != 'none') {

el.parentNode.style.display = 'none';

document.onclick = showRelatedContent.prevOnClick;

return;

}



var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);

if (match !== null) {

document.getElementById('related-loading').style.left = match[1] + 'px';

el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';

}

el.src = "http://www.blogger.com"

+ '/related-content.g?q='

+ window.location.href

+ '&id=' + "7792698363959436653";

el.parentNode.style.display = 'block';

showRelatedContent.prevOnClick = document.onclick;



// Hide related-content dropdown when clicking anywhere but on it.

document.onclick = function() {

var el = document.getElementById('related-iframe');

if (el.parentNode.style.display != 'none') {

el.parentNode.style.display = 'none';

}

document.onclick = showRelatedContent.prevOnClick;

};

}

</script></div></div>

完成了吗?

部落标题 ‖ 会移动的标题

会移动的标题这个帖子标题 .....

真的不知道要怎样解释这个效果嘛 ~

效果图 :

如果你看不懂上图是什么东东

你可以直接往上看的

当然不止有我用的效果 ~

还有很多其他不一样的效果

这个效果很简单 ~

大概几分钟就能完成了~

首先，现在这里去

然后跟着下图的步骤走 ~

如果看不清楚下图

单点就可以放大了

上面的步骤完成了后先按Preview查看效果是不是你想要的 ~

确定了后就按 OK,Generate Code!

然后把所显示的代码拷贝起来 ~

到信息中心 ( DashBoard )
然后点击设计( Design )
也就是如下图所显示的

点击了后就会到设计 (Design) 的页面元素(Page Elements)
然后请点击页面元素(Page Elements)
在页面元素那边开一个新的小工具
然后选择HTML/Java Script
如下图:

打开了后就把刚刚拷贝的代码贴下去

然后就大功告成啦

2012年7月14日星期六

转载素材 ‖ 精美简洁时钟

<embed src="http://www.blogclock.cn/swf/S10014498e66b1f-f.swf" Width="176px" Height="109px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src='http://www.blogclock.cn/swf/S1003266d1c29d8-1.swf' Width='199px' Height='100px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S10031403d775ae-6.swf' Width='120px' Height='100px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S10031906ec70bf-9.swf' Width='150px' Height='190px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S1003108143c507-c.swf' Width='200px' Height='200px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src='http://www.blogclock.cn/swf/S10030675aed2a2-2.swf' Width='184px' Height='85px' type='application/x-shockwave-flash' quality='high' wmode='transparent'></embed>

<embed src="http://www.blogclock.cn/swf/S10030279305e26-f.swf" Width="150px" Height="250px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100198538bf674-a.swf" Width="160px" Height="120px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S100037e48dcfbd-7.swf" Width="120px" Height="48px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

<embed src="http://www.blogclock.cn/swf/S1002145c8dacf4-4.swf" Width="250px" Height="300px" type="application/x-shockwave-flash" quality="high" wmode="transparent"></embed>

这些时钟要怎样用呢?
很简单 ~
先到信息中心 (Dashboard) 到设计( Design )

然后在从设计(Design)直接往下scroll （（这个小工具不用修改HTML哦 ~ 所以会方便很多 =P

打开一个新的小工具 ~

然后选择HTML/Java Script

就如下图所示 :

打开了HTML/Java Script后

把以上时钟下面的代码

贴在里面

就完成啦

文章标题 ‖ 彩虹效果

这个教程不止会让你的文章标题变色

而且连接也会变色哦

什么是文章标题变色

文章标题变色就是当你的鼠标靠近它时就会开始变色

效果图 :

你们也可以把滑鼠放在本部落格的文章标题上试试

这个教程既简单又漂亮

首先，先到信息中心 ( DashBoard )
然后点击设计( Design )
也就是如下图所显示的

点击了后就会到设计 (Design) 的页面元素(Page Elements)

然后请点击页面元素(Page Elements)旁的修改HTML (Edit HTML)

就如下图 :

红色框框是该注意的地方

然后请按Ctrl键 + F 键

按好了后

页面的右上角就会出现一个如下图所显示的框框

在里面打入</head>

找到了后

在</head>上放入一下代码

<script src='http://ggpi.googlecode.com/files/rainbow.js' type='text/javascript'/>

然后就完成啦

如果成功了请留言

失败或出现了问题也请留言

我都会一一回复

优化教程 ‖ Energy Saving Mode

Energy Saving Mode 就是你把你的部落格放着 ~

然后不去碰它 ~

过了一分钟后它就会出现像下面酱的东西 ~

这个就是Energy Saving Mode 啦 ~

首先，到信息中心 ( DashBoard )

然后点击设计( Design )
也就是如下图所显示的

点击了后就会到设计 (Design) 的页面元素(Page Elements)

然后请点击页面元素(Page Elements)

在页面元素那边开一个新的小工具

然后选择配置HTML/Java Script

如下图:

打开了后 ~

拷贝下面的代码~

然后贴在那边 ~

<script src='http://www.vincentcheung.ca/jsencryption/jsencryption.js' type='text/javascript'></script><script type="text/javascript">if (window.jstiming) window.jstiming.load.tick('headEnd');</script> <!-- save your energy --><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script><!-- save your energy end --><script type='text/javascript'></script><script type='text/javascript'>

然后就按下保存键

就完成啦 ~

是不是很简单呢?

音乐播放 ‖ 移动Youtube音乐播放器

首先，我们先来看什么事移动Youtube音乐播放器。

效果图 :

移动Youtube播放器就是我用红色框框框起来的那个 ~

你们应该也时常会在别人的部落格上看到吧 ?

这个教程很简单 ~

先到Youtube 找你一首你喜欢的歌 ~

找到了后请看网址的地方 :)

如果没有问题的话 ~

你得到的网址应该是

像酱的 ~

请拷贝

http://www.youtube.com/watch?v=1-A2zANHsGw&feature=g-music

我用黄色Highlight起来的

请注意千万别拷贝到粉红色的字

例如 :

红色框框是音乐代码 (也就是我们要的东西)

蓝色框框是网址的东西来的 (也就是我们不要的东西)

当然，每一首歌的代码都不一样> ~ <

所以你一定会拷贝到和我不一样的代码~

除非你的歌曲和我相同 /.\

请注意 ~

如果你的歌曲后面没有&feature=g-music

那没关系 ~

还是可以用的 ~

就是只要拷贝http://www.youtube.com/watch?v=

后面的那串代码就行了 ~

接着，到信息中心 ( DashBoard )

然后点击设计( Design )
也就是如下图所显示的

点击了后就会到设计 (Design) 的页面元素(Page Elements)

然后请点击页面元素(Page Elements)

在页面元素那边开一个新的小工具

然后选择配置HTML/Java Script

如下图:

打开了后 ~

拷贝下面的代码~

然后贴在那边 ~

<marquee direction="up" style="position: fixed;right: 2%; top: 0%;width:25px; height:600px;"><embed src="http://www.youtube.com/v/网址后面部分?fs=1&amp;hl=en_GB&amp;rel=0；&amp;autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="25" height="25"></embed></marquee>

注意 ~

红色字体请改成刚刚在拷贝的音乐代码 ~

青色highlight的是你音乐播放器移动的方向 ~

如果你现在不喜欢我刚刚给的 ~

可以自行改方向 ~

只要跟着下面顺着改就行了~

在右边向下移动 : down , right , 26 , 600

在左边向下移动 : down , left , 26 , 600 ( 也就是我刚刚给的 )

在上方向左移动 : left , left , 1000 , 25

在上方向右移动 : left , right , 1000 , 25

如果完成了就会像一下效果图一样 ~　

效果图:

红色框框是音乐代码 :)

好了后按下保存键

就大功告成啦

如果有问题。意见

请留言

我将会一一回复

订阅：评论 (Atom)

Jealous'❤

2012年7月23日星期一

小工具坊 ‖ 愿望清单 Wish List

2012年7月21日星期六

鼠标效果 ‖ 多色散落的星星

部落标题 ‖ 会移动的标题

2012年7月14日星期六

转载素材 ‖ 精美简洁时钟

文章标题 ‖ 彩虹效果

优化教程 ‖ Energy Saving Mode

音乐播放 ‖ 移动Youtube音乐播放器

Rainbow❤

Music❤

Tittle ❤

Energy❤

Dashboard❤