1、为你的Blog添加“天气预报”功能。
在“选项”->“配置”的“静态新闻/声明”中加入下面的语句就可以了:
<p><b>今日天气</b><br>
<center><iframewidth=157height=240frameborder=0scrolling=NOsrc='http://appnews.qq.com/cgi-bin/news_qq_search?city='></iframe></center>
2、
给blog增加flash精美时钟
时钟申请:http://www.butabon.com/
刻度时钟:
<EMBEDSRC=http://www.butabon.com/Clock/clock_038.swfWIDTH=150HEIGHT=150wmode=transparentquality=highloop=truemenu=false>
其中的http://www.butabon.com/Clock/clock_038.swf是时钟的flash地址,可以在IE中预览,其中的038可以替换成000-039之间或者051-059之间的任何一个数字(全看个人喜好,呵呵)
数字时钟:
第一种风格:
<EMBEDSRC=http://www.butabon.com/Clock/digiwide019.swfWIDTH=150HEIGHT=15wmode=transparentquality=highloop=truemenu=false>
其中的http://www.butabon.com/Clock/digiwide019.swf同样是时钟的flash地址,可以在IE中预览,其中的019可以替换成000-019之间之间的任何一个数字(同样全看个人喜好,呵呵)
第二种风格:
<EMBEDSRC=http://www.butabon.com/Clock/digital_019.swfWIDTH=150HEIGHT=90wmode=transparentquality=highloop=truemenu=false>
其中的http://www.butabon.com/Clock/digital_019.swf同样是时钟的flash地址,可以在IE中预览,其中的019可以替换成000-019之间之间的任何一个你可以在IE中可以成功预览的数字(请自己测试)。
3、给BLOG加一个控制菜单展开和收缩的按扭
在看文章的时候BLOG的菜单栏实在的太碍眼,我于是加了个按扭用来控制菜单的显示和隐藏。这可以用javascript来实现,但是CSDNBLOG是不允许在配置中直接加入javascript的,但是我们可以将javascript加入到一张图片onload事件里执行。看我的就是加到计数计的图片代码里了,效果看左上角。程序代码如下:
vardiv=document.createElement('span');
document.body.insertAdjacentElement('beforeEnd',div);
div.style.cssText='position:absolute;display:block;top:42;left:2;width:90;height:20;color:green;background:yellow;border:2outset;cursor:hand;';
div.innerText='<<收回菜单';
div.onclick=function()
{
varisHide=(rightmenu.style.display=='none');
rightmenu.style.display=isHide?'block':'none';
div.innerText=isHide?'<<收回菜单':'展开菜单>>';
}
4、对BLOG皮肤的具体修改
我所选择的皮肤模式是AnotherEon001。以下是具体的自定义的CSS:
.headermaintitle{font-family:隶书;font-size:1cm;color:#000000;align:center}
.BlogStats{color:black;}
p.datespan
{
background-color:#e7e7e7;
}
.post
{
border:1pxsolid#CCCCCC;
border-bottom-width:2px;
border-right-width:2px;
padding:4px;
margin-bottom:28px;
background-color:#dadada;
}
.posth2
{
font-size:14px;
margin:0px;
margin-bottom:4px;
font-family:楷体_gb2312;
}
.posta
{
color:#ff5500;
}
.post.postfoot
{
margin:0px;
margin-top:14px;
color:#aa6666;
border-top:1pxsolid#DDDDDD;
font-size:0.8em;
background-color:#c8c8c8;
}
#top
{
background-color:#ffffff;
height:75px;
vertical-align:middle;
background-image:url(http://blog.csdn.net/images/blog_csdn_net/peterdoo/18050/o_yu.jpg);
background-repeat:no-repeat;
filter:alpha(opacity=80);
}
#sub
{
text-align:right;
background-color:#BBd4D9;
color:#CCCCCC;
font-size:0.8em;
padding:4px;
}
#LeftCell
{
width:200px;
vertical-align:top;
background-color:#BBC3D9;
filter:alpha(opacity=100,finishopacity=0,style=1);
}
.MainCell
{
border-left:1pxsolid#DDDDDD;
border-bottom:1pxsolid#DDDDDD;
padding:10px;
background-color:#e7e7e7;
vertical-align:top;
}
背景图片是上传到相册中的图片。
对左边的菜单区没有使用背景图片,只是使用filter:alpha(opacity=100,finishopacity=0,style=1);产生了过渡效果的背景色。其实没什么技术含量!
5、BLOG中显示你的MSN和QQ的状态
将以下代码粘贴到BLOG管理配置中'静态新闻'文本框中就可以了,保存页面,重新看看你的首页
MSN状态:
<AHREF="http://snind.gotdns.com:8080/message/msn/MSN帐号(xxx@hotmail.com)>
<IMGSRC="http://snind.gotdns.com:8080/msn/MSN帐号(xxx@hotmail.com)"
align="absmiddle"border="0"ALT="MSNOnlineStatusIndicator"
onerror="this.onerror=null;this.src='http://snind.gotdns.com:8080/image/msnunknown.gif';"></A>
更多可去http://snind.gotdns.com:8080
QQ状态:
<imgsrc="http://icon.tencent.com/你的QQ帐号/l/612/">
更多可去http://qqol.3322.org/
6、为你的Blog打造个性日历控件
日历控件是dotnet自带的控件之一,功能强大,在很多项目开发中都有用到,对于blog系统来说更是必不可少。纵是好玉也仍需雕琢,为了使它更美观实用,我们还需要对它进行二次开发。
第一步是外观设置,这个根据你的需要,只需对它的相关属性做一些调整即可。下图是我调整后的界面,属性设置如下:<asp:calendarid="Calendar1"CellPadding="2"Width="160px"TitleStyle-BackColor="#000000"BorderColor="#aaaaaa"
DayHeaderStyle-BackColor="#5e715e"OtherMonthDayStyle-ForeColor="#cccccc"DayNameFormat="Full"
runat="server"TitleStyle-ForeColor="#ffffff"NextPrevStyle-ForeColor="#ffffff"CellSpacing="1"
WeekendDayStyle-BackColor="#eeeeee"DayHeaderStyle-ForeColor="#ffffff"SelectionMode="None"
TodayDayStyle-BorderColor="#5e715e"TodayDayStyle-BorderWidth="1"TodayDayStyle-Font-Bold="true"
TodayDayStyle-ForeColor="#5e715e">
第二步是对内部功能的调整,这个工作主要集中在以下两个事件的处理上。
PreRender:当服务器控件将要呈现给其包含的Page对象时发生。
DayRender:当为Calendar控件在控件层次结构中创建每一天时发生。
先定义三个整型变量和整型数组
privateint[]arrCurrentDays,arrPreDays,arrNextDays;//三个变量分别是当前月,前一月,和下一个月
privateintintCurrentMonth,intPreMonth,intNextMonth;//三个整型数组存放相对月份写有blog的日期
protectedSystem.Web.UI.WebControls.CalendarCalendar1;//这个就是我们的日历控件了
2.下面我将分别给出这两个事件的源码,并在下面解释它实现的功能,如果你看不明白,可以先看下面的说明
PreRender
privatevoidCalendar1_PreRender(objectsender,System.EventArgse)
{
ThreadthreadCurrent=Thread.CurrentThread;
CultureInfociNew=(CultureInfo)threadCurrent.CurrentCulture.Clone();
ciNew.DateTimeFormat.DayNames=newstring[]{"日","一","二","三","四","五","六"};
ciNew.DateTimeFormat.FirstDayOfWeek=DayOfWeek.Sunday;
threadCurrent.CurrentCulture=ciNew;
}
以上代码改变了星期名称的显示。你只需改变字符数组的值就能改名称显示。
DayRender
privatevoidCalendar1_DayRender(objectsender,System.Web.UI.WebControls.DayRenderEventArgse)
{
//该控件在创建每一天时发生。
CalendarDayd=((DayRenderEventArgs)e).Day;
TableCellc=((DayRenderEventArgs)e).Cell;
//初始化当前月有Blog的日期数组
if(intPreMonth==0)
{
intPreMonth=d.Date.Month;//注意:日历控件初始化时我们得到的第一个月并不是当前月,而是前一个月的月份
intCurrentMonth=intPreMonth+1;
if(intCurrentMonth>12)
intCurrentMonth=1;
intNextMonth=intCurrentMonth+1;
if(intNextMonth>12)
intNextMonth=1;
arrPreDays=getArrayDay(d.Date.Year,intPreMonth);//得到前一个月有blog的日期数组
arrCurrentDays=getArrayDay(d.Date.Year,intCurrentMonth);//得到当月有blog的日期数组
arrNextDays=getArrayDay(d.Date.Year,intNextMonth);//得到下个月有blog的日期数组
}
intj=0;
if(d.Date.Month.Equals(intPreMonth))
{
while(!arrPreDays[j].Equals(0))
{
if(d.Date.Day.Equals(arrPreDays[j]))
{
c.Controls.Clear();
c.Controls.Add(newLiteralControl("<ahref=day.aspx?year="+d.Date.Year+"&month="+
d.Date.Month+"&day="+d.Date.Day+">"+d.Date.Day+"</a>"));
}
j++;
}
}
elseif(d.Date.Month.Equals(intCurrentMonth))
{
while(!arrCurrentDays[j].Equals(0))
{
if(d.Date.Day.Equals(arrCurrentDays[j]))
{
c.Controls.Clear();
c.Controls.Add(newLiteralControl("<ahref=day.aspx?year="+d.Date.Year+"&month="+
d.Date.Month+"&day="+d.Date.Day+">"+d.Date.Day+"</a>"));
}
j++;
}
}
elseif(d.Date.Month.Equals(intNextMonth))
{
while(!arrNextDays[j].Equals(0))
{
if(d.Date.Day.Equals(arrNextDays[j]))
{
c.Controls.Clear();
c.Controls.Add(newLiteralControl("<ahref=day.aspx?year="+d.Date.Year+"&month="+
d.Date.Month+"&day="+d.Date.Day+">"+d.Date.Day+"</a>"));
}
j++;
}
}
}
日期控件一个页面能显示三个月份的日期,当前月是完整的,前一月和下一月有部分日期。DayRender事件会初始化具体日期的显示方式,在这里我们要对有blog内容的日期加上超级链接。于是我们需要在初始化时得到三个数组,数组里分别存放连续三个月的写有blog的日期。然后依次与当前日期比较,相同则加上链接。
在使用DayRender事件时,你一定不要忘了它是在每个日期初始化时执行一次,这就意味着初始化一次日历控件这个事件就要执行42次,所以要尽可能的简化操作,更不要不加判断的进行重复的数据库操作,我刚开始时没注意,在该事件里写了两个读库语句,结果严重影响性能。
下面这个方法是我用来获得日期数组的。
//得到该月有blog的日期数组
privateint[]getArrayDay(intintYear,intintMonth)
{
int[]intArray=newint[31];
//从数据库里选取符合要求的记录,将日期存入数组
stringstrSql="selectcontent_timefromcontentwhereyear(content_time)="+intYear+
"andmonth(content_time)="+intMonth;
dr=SqlHandle.GetDr(strSql);
while(dr.Read())
{
if(i==0)
{
intArray[i]=dr.GetDateTime(0).Day;
i++;
}
elseif(dr.GetDateTime(0).Day!=intArray[i-1])
{
intArray[i]=dr.GetDateTime(0).Day;
i++;
}
}
dr.Close();
returnintArray;
}
7、公告和计数器代码:
代码填写在静态新闻/声明中,目前代码如下:(其中<scriptlanguage=JavaScriptsrc="http://laoan.com/counters/count.php?kvw3000"></script>为在http://www.laoan.com/counters/申请的免费计数器,注意将下面的kvw3000改为你自己申请的帐号)
<IMGsrc="http://blog.csdn.net/images/blog_csdn_net/upwaker/17243/t_rsxt0022.jpg"width="150"height="150"></br>
个人简介</br>
网名:天山雪飞</br>
QQ:15878778</br>
<SMALL>MSN:<Ahref="mailto:wjt2000@etang.com">kvw3000@hotmail.com</A></SMALL></br></br>
来自:河南</br>
-------------------------------</br>
访问量:
<scriptlanguage=JavaScriptsrc="http://laoan.com/counters/count.php?kvw3000"></script></br>
-------------------------------
8、.跟随鼠标的萤火虫
以下是代码,无须修改
<scriptlanguage="JavaScript">
if(!document.layers&&!document.all)
event="test"
functionshowtip2(current,e,text){
if(document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee>'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"}
elseif(document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"}}
functionhidetip2(){
if(document.all)
document.all.tooltip2.style.visibility="hidden"
elseif(document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"}}
functionscrolltip(){
if(document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150}
</script>
<scriptlanguage="JavaScript">
functionYY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep){//v1.2
if((document.layers)||(document.all)){
with(Math){yynextx=eval(yyfnx)}
with(Math){yynexty=eval(yyfny)}
yycnt=(yyloop&&yycnt>=yystep*yybilder)?0:yycnt+yystep;
if(document.layers){
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft))}
if(document.all){
eval("yydiv=yydiv.replace(/.layers/gi,'.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));}
argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
if(yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}}}
functionYY_Mousetrace(evnt){
if(yyns4)
{if(evnt.pageX){yy_ml=evnt.pageX;yy_mt=evnt.pageY;}}
else{
yy_ml=(event.clientX+document.body.scrollLeft);
yy_mt=(event.clientY+document.body.scrollTop);}
if(yy_tracescript)eval(yy_tracescript)}
</script>
<scriptlanguage="JavaScript">
functionPopWin()
{
varPopWin=window.open("new.htm","PopWin","toolbar=no,directries=no,scrollBars=yes,height=350,width=400");
}
</script>
<body>
<divid="tooltip2">
<layername="nstip"width="1000px"bgColor="lightyellow">
</layer>
</div>
<divid="yyd0"
></div><div
id="yyd1"
></div><div
id="yyd2"
></div><div
id="yyd3"
></div><div
id="yyd4"
></div><div
id="yyd5"
></div><script>
varyyns4=window.Event?true:false;varyy_mt=0;varyy_ml=0;
document.onmousemove=YY_Mousetrace;
yy_tracescript='';
if(yyns4){document.captureEvents(Event.mousemove);
YY_Mousetrace('',',document.YY_Mousetrace1')}
YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/39.83007847812662))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/34.224861639800686))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers['yyd0']',2000,true,80,0,1);
YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/27.66510707209673))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/9.240632767417667))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers['yyd1']',2000,true,80,0,1);
YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/16.45318944579641))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/16.0564452288292))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers['yyd2']',2000,true,80,0,1);
YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/6.95348954836835))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/44.13697049887155))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers['yyd3']',2000,true,80,0,1);
YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/33.90077294583733))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/2.2378828869411587))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers['yyd4']',2000,true,80,0,1);
YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/37.858312521039835))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/18.083839795990098))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers['yyd5']',2000,true,80,0,1);
</script>
</body>
9.为Blog添加“状态栏文本”功能
<scriptlanguage=JavaScript>
varMESSAGE="欢迎您亲自光临回家念经的小站"
varPOSITION=100
varDELAY=10
varscroll=newstatusMessageObject()
functionstatusMessageObject(p,d)
{
this.msg=MESSAGE
this.out=""
this.pos=POSITION
this.delay=DELAY
this.i=0
this.reset=clearMessage
}
functionclearMessage()
{
this.pos=POSITION
}
functionscroller()
{
for(scroll.i=0;scroll.i<scroll.pos;scroll.i++){
scroll.out+=""}
if(scroll.pos>=0)
scroll.out+=scroll.msg
elsescroll.out=scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status=scroll.out
scroll.out=""
scroll.pos--
if(scroll.pos<-(scroll.msg.length)){
scroll.reset()}
setTimeout('scroller()',scroll.delay)
}
functionsnapIn(jumpSpaces,position)
{
varmsg=scroll.msg
varout=""
for(vari=0;i<position;i++)
{
out+=msg.charAt(i)
}
for(i=1;i<jumpSpaces;i++)
{
out+=""
}
out+=msg.charAt(position)
window.status=out
if(jumpSpaces<=1)
{
position++
if(msg.charAt(position)=='')
{
position++
}
jumpSpaces=100-position
}
elseif(jumpSpaces>3)
{
jumpSpaces*=.75
}
else
{
jumpSpaces--
}
if(position!=msg.length)
{
varcmd="snapIn("+jumpSpaces+","+position+")";
scrollID=window.setTimeout(cmd,scroll.delay);
}
else
{
window.status=""
jumpSpaces=0
position=0
cmd="snapIn("+jumpSpaces+","+position+")";
scrollID=window.setTimeout(cmd,scroll.delay);
returnfalse
}
returntrue
}
snapIn(100,0);
</script>
10.为Blog添加“跟随鼠标的文字”功能
<styletype="text/css">
.spanstyle
{
position:absolute;
visibility:visible;
top:-500px;
font-size:10pt;
color:#0000ff;
font-weight:bold;
}
</style>
<script>
varx,y
varstep=15
varflag=0
varmessage="程序不过是梦"
message=message.split("")
varxpos=newArray()
for(i=0;i<=message.length;i++)
{
xpos[i]=-500
}
varypos=newArray()
for(i=0;i<=message.length;i++)
{
ypos[i]=-500
}
functionhandlerMM(e)
{
x=(document.layers)?e.pageX:document.body.scrollLeft+event.clientX-5
y=(document.layers)?e.pageY:document.body.scrollTop+event.clientY-75
flag=1
}
functionmakesnake()
{
if(flag==1&&document.all)
{
for(i=message.length;i>=1;i--)
{
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for(i=0;i<message.length;i++)
{
varthisspan=eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
elseif(flag==1&&document.layers)
{
for(i=message.length;i>=1;i--)
{
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
for(i=0;i<message.length;i++)
{
varthisspan=eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
vartimer=setTimeout("makesnake()",30)
}
</script>
<bodyonLoad="makesnake()">
<script>
for(i=0;i<=message.length;i++)
{
document.write("<spanid='span"+i+"'class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if(document.layers)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=handlerMM;
</script>
11.给blog增加一个功能,每次打开的时候自动在顶部副标题位置显示一条格言(这个我没使用)
<scriptlanguage="javascript">
varword=newArray();
word[0]="当你感到悲哀痛苦时,最好是去学些什么东西。学习会使你永远立于不败之地。"
word[1]="每一个成功者都有一个开始。勇于开始,才能找到成功的路。"
word[2]="与其临渊羡鱼,不如退而结网。"
word[3]="若不给自己设限,则人生中就没有限制你发挥的藩篱。"
word[4]="绊脚石乃是进身之阶。"
word[5]="即使爬到最高的山上,一次也只能脚踏实地地迈一步。"
word[6]="积极思考造成积极人生,消极思考造成消极人生。"
word[7]="人之所以有一张嘴,而有两只耳朵,原因是听的要比说的多一倍。"
word[8]="别想一下造出大海,必须先由小河川开始。"
word[9]="即使是不成熟的尝试,也胜于胎死腹中的策略。"
word[10]="积极的人在每一次忧患中都看到一个机会,而消极的人则在每个机会都看到某种忧患。"
word[11]="如果我们想要更多的玫瑰花,就必须种植更多的玫瑰树。"
word[11]="世上没有绝望的处境,只有对处境绝望的人。"
word[12]="当你感到悲哀痛苦时,最好是去学些什么东西。学习会使你永远立于不败之地。"
word[13]="世界上那些最容易的事情中,拖延时间最不费力。"
word[14]="没有口水与汗水,就没有成功的泪水。"
word[15]="如果你希望成功,以恒心为良友,以经验为参谋,以小心为兄弟,以希望为哨兵。"
word[16]="大多数人想要改造这个世界,但却罕有人想改造自己。"
word[17]="未曾失败的人恐怕也未曾成功过。"
word[18]="人生伟业的建立,不在能知,乃在能行。"
word[19]="挫折其实就是迈向成功所应缴的学费。"
word[20]="任何的限制,都是从自己的内心开始的。"
word[21]="忘掉失败,不过要牢记失败中的教训。"
word[22]="不是境况造就人,而是人造就境况。"
document.all("header").innerHTML="<ahref='http://babypai.vicp.net'><imgsrc='http://babypai.vicp.net/linklogo.gif'border=0alt='ジβаЪy派主页'align=right/></a><span>"+document.all("Header1_HeaderTitle").outerHTML+"<br/>"+word[parseInt(Math.random()*22)]+"</span>"
</script>