Tuesday, November 9, 2010

How to use Blogskins

Somebody like to use blogskins.
And now i will explain how to use on your blog.


This is the website :Click here


Step 1:
In the website and choose the skins that you like =)
After choose find the word BLOGGER MAIN  on the page !
Example :














After that you will get the Html Code.


Step 2:
Go your blog dashboard > Design > Edit Html 
After that click Revert to Classic Template
And Then delete all the code and paste the code you get it just now.
Then click Save Template.
And preview.
See whether the blogskins match or not.
Because some blogskins's design not very nice
So will look not match with our blog.
If match, Then you go back to edit Html and start edit.
Change The things you need to change.
This i Cannot teach.
Because all blogskin got own code.
But, if any problem with your code.
You can find me and ask.
I will try to solve the problem for you ! ^^
After edit click save template then it's done !


If you found that the blogskins are weird if use on your blog.
Then you've to change another =)


That's all for using website's blogskin ^^

How to use Dewplayer

刚研究了一个音乐播放器


这个会比较好用

不会很lag.

如果想要用,跟着以下步骤吧~

会有点复杂~

=)


*插个步骤 (给没有 fileden account 的人)


先去做个 Fileden 户口,会比较容易跟着我的步骤


先到 :按这里


进去了后,按 Register


如图:













然后按第一个的 sign up.


如图:


















然后填你的表格


填完后按 Register.


过后,到你的hotmail 


看看fileden的网站是否有发给你一封activate信


如果在inbox找不到,就到junk看看


然后按activate的link就好了


activate 过后,Log in


就好了。


现在开始dewplayer的步骤了


这个是它的网站:Click here
这个是它的制作网站:Click here(点击后就可以开始制作了)





这是不同款式的播放器
你可以选择你要的~



这个是编辑器:
 背景颜色你可以到这里找你喜欢的颜色代码
URL of the MP3 file : 你可以到FILEDEN上传你要的歌然后从那里拿到MP3的Url.


如何在fileden拿到歌的url?


首先到fileden, 按upload


如图:









然后按 continue to file uploader

如图:







按了过后

按 browse file, 然后找你要的歌.

找到了后,按open.

然后按 start upload.

上传完毕,到file找你刚才upload的歌

找到后 right click 然后按 properties

然后按 URL

如图:




然后就可以拿到歌的url了!

继续。。。。。。。。



Auto Start-自动播放
Loop-循环播放
Time Display-时间显示
No Cursor-没有光标(无法调歌曲进度)
Random Play-随机播放

点击ok过后会拿到类似以下的code
<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=http://www.fileden.com/files/2009/12/10/2682923/11%20Nickelback%20-%20Gotta%20Be%20Somebody.mp3&autostart=1&autoreplay=1&showtime=1&randomplay=1" />
</object>


步骤二:
上面code中的dewplayer.swf要换成你要的款式播放器的Url.
要拿到播放器的Url.
先下载这个
下载完毕 Extract那个文件


如何extract那个文件?


如图:
























按红色框框里的那个字就好了


extract好了,打开文件你会看到类似以下图中的东东




















以上红色格子里的就是播放器的款式
选你们要的然后上传到Fileden


如何上传到fileden?


首先到fileden


然后按 upload.


如图:










按了过后


按 continue to file uploader


如图:


















按了过后


按 browse file, 然后到你刚才extract 的file选你要的style.


选了个过后,按open.


然后按 start upload.


如图:
























上传完毕,到 file 找你们所上传的东西


如图:
















找到了然后right click


按 properties, 然后按 URL


如图:
















































copy 那个 url 


然后回到你刚才那到的code



<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="wmode" value="transparent" />
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=http://www.fileden.com/files/2009/12/10/2682923/11%20Nickelback%20-%20Gotta%20Be%20Somebody.mp3&autostart=1&autoreplay=1&showtime=1&randomplay=1" />
</object>

然后把你拿到的 url paste 在红色字那里


确保已经把红色字删除了


paste 好了后,把code放到你的部落格


就完成了!^^

*注意

  • 上传你的歌前,必须确保你的歌名没有华语字
  • 歌的Format必须是MP3.不接受其他的格式

Sunday, November 7, 2010

* My word ^^

I will write a post is teach how to use website's blogskin.

This is for my cousin wendy dexler.

And Hope it will help them and others who wan to use website's blogskin =)

But i will post it out after my exam.

So sorry for late.

=)


Saturday, November 6, 2010

在部落格添加Cbox

步骤一:
到这个网站:按这里!


步骤二:
注册帐号


如图:
















步骤三:
注册完了
到你的email检查cbox是否有发一封Verify Message到你的信箱
verify之后就登入


步骤四:
可以去换你要的颜色和字体
然后copy那个code


如图:


















步骤五:
到你的部落格
Design > Add a Gadget (你要摆放的位子) > Html/Java Script
然后把刚才copy的code paste进格子里就好了!


完成!

Calender

能够显示你曾写过的文章的Calender


步骤一:
Design > Add a gadget (你要摆放的位子) > Html/Java script


步骤二:
copy以下的code然后paste进格子里就好了!




<p><div id="blogCalendar"></div><script src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js" type="text/javascript"></script><br /> <script type="text/javascript"> Calendar.base="fanshuclass.blogspot.com"; Calendar.timeZone="+08:00"; Calendar.drawTable(); </script><br /> <style> #blogCalendar {text-align:center;border:0px;background: no-repeat ;margin:0px;font-family:Tempus Sans ITC;height:200px;line-height:14px;} #CalendarCaption a{color:purple;text-decoration:none;margin:auto;font-size:80%;} #CalendarCaption{width:80%;margin:auto;} #CalendarTable{height:123px;margin-top:2x;} #CalendarTable a{font-weight:bold;color: pink;} #CalendarTable table {width:auto;margin:auto;border: 0px;text-align:center;font-size:80%;padding-top:5px;} #CalendarTable table th{font-size:85%;} #CalendarTable table td{border:0px;} #CalendarTable a:link, #Calendar a:visited, #Calendar a:active{font-weight:bold;Text-decoration:underline;} #CalendarTable a:hover {text-decoration:none;} #CalendarMonth{font-size:90%;} .Today{text-decoration:none;color: red;} .Today a:visited, .Today a:link, .Today a:active, .Today a:hover {text-decoration:none;color: yellow;} #CalendarFooter{color:pink;font-size:80%;padding-top:18px;} #monthTable{background:pink;} .yearInput{background:yellow;} </style></p>

红色字须改为你部落格的连接(Link)




完成!

记录上次访客登陆的时间及日期

这个可以记录访客上一次登录你部落格的日期与时间


步骤一:
Design > Add a Gadget (你要摆放的位子) > Html/Java Script


步骤二:
copy以下的code放入格子里就好了





    <script type="text/javascript">

    var lastvisit=new Object()
    lastvisit.firstvisitmsg="这是你第一次光临本站" //Change first visit message here
    lastvisit.subsequentvisitmsg="欢迎回来,你上一次到来是在 <b>[displaydate]</b>" //Change subsequent visit message here

    lastvisit.getCookie=function(Name){ //get cookie value
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
    return document.cookie.match(re)[0].split("=")[1] //return its value
    return ""
    }

    lastvisit.setCookie=function(name, value, days){ //set cookei value
    var expireDate = new Date()
    //set "expstring" to either future or past date, to set or delete cookie, respectively
    var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
    document.cookie = name+"="+value+" expires="+expireDate.toGMTString()+" path=/"
    }

    lastvisit.showmessage=function(){
    if (lastvisit.getCookie("visitcounter")==""){ //if first visit
    lastvisit.setCookie("visitcounter", 2, 730) //set "visitcounter" to 2 and for 730 days (2 years)
    document.write(lastvisit.firstvisitmsg)
    }
    else
    document.write(lastvisit.subsequentvisitmsg.replace("\[displaydate\]", new Date().toLocaleString()))
    }

    lastvisit.showmessage()

    </script>


完成!^^

在线人数

这个小挂件可以让你知道有几个人在你部落格逛!


步骤一:
到这个网站:按这里!


然后跟着图片指示















步骤二:
到你的部落格
Design > Add a Gadget (选最下方的) > Html/Java Script
把刚才copy的code paste进格子里,按save就好了!


^^
隐藏nav bar.

如图~




步骤一:
Design > Edit Html > 用Ctrl+F 找以下的code]]></b:skin>

步骤二:
]]></b:skin>前添加以下的code

#navbar-iframe {
height:5px;
}

/* IE7, IE8, IE6 */
#navbar-iframe { height/*\**/: 30px\9; }


#navbar-iframe:hover {
height:40px; !important;
}


完成!

能移动的标题

步骤一:
到这个网站 >按这里!


步骤二:
进入网站后,跟着以下图片的指示















步骤三:
Design > Add gadget (选最下方的) >Html/Java Script
把刚才copy的code paste在格子里就好了


容易吧? ^^

字跟着鼠标飘来飘去

步骤一:
Design > Add Gadget (选最下方的)>Html/Java Script

然后把以下的code paste进格子里


例子:
<script language="javascript">


var text='Fanshu Luv hong';

var delay=40;
var Xoff=0;
var Yoff=-30;
var txtw=14;
var beghtml='<font color="#8E35EF"><b>';
var endhtml='</b></font>';

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer name="txt'+i+'" top="-100" left="0" width="'+txtw+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>



红色字可改成你要的字
温馨提示:
用部落格所准备的 Design Template
不能有这样的效果哦! ^^

完成!

美美的鼠标

步骤一:
Design > Edit Html 
用Ctrl+F 找以下的code


<head>


找到后,
把以下的code放入<head>之后
记得用<style>和</style>包围整个code



<style>body{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/strtail.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/strtail.gif"), auto;}</style>

红色部分为可更换的cursor。
蓝色部分为cursor出现的地方。 



美美鼠标网站 :按这里!


选好了鼠标,会看到这一页





copy第三个框里的code
然后paste在步骤二
例如:


A:hover{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/strtail.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/strtail.gif"), auto;}
Hover 的意思就是鼠标在那里出现
如果要鼠标在每一个地方出现就把Hover改成Body
例如:

例子:body{cursor: url("http://downloads.totallyfreecursors.com/cursor_files/strtail.ani"), url("http://downloads.totallyfreecursors.com/thumbnails/strtail.gif"), auto;}



完成!