The weather forecast, calendar, clock, MSN, and QQ online status are displayed on the blog.

Take csdn as an example. Add the following content to the static news/declaration, as shown on this page.

<! -- The 035 of the clock clock_035.swf is the clock style. You can select it as needed. -->
<Embed src = http://www.butabon.com/Clock/clock_035.swf width = 150 Height = 150 wmode = transparent quality = high loop = true menu = false>

<! -- Blog calendar table start -->
<Script language = "JavaScript">
VaR diarydays = "<> <expiration> <2004-06-26> <2004-06-25> ";
</SCRIPT>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Style>
. Calendarbigborder {font-family: "Arial", "Helvetica", "Sans-serif", ""; text-Decoration: none; width: 170; Background-color: # ffffff; font-size: 9pt; Border: 1px dotted #999 ;}
. Calendartd {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; color: #000000; Background-color: # eeeeee; Height: 18px; width: 11%; text-align: center ;}
. Calendarminput {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; text-Decoration: none; Background-color: # ffffff; Height: 15px; Border: 1px solid #666666; width: 19px; color: # 0099ff ;}
. Calendaryinput {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; color: # 0099ff; text-Decoration: none; Background-color: # ffffff; Height: 15px; width: 34px; Border: 1px solid #666666 ;}
. Calendarmonthtitle {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; font-weight: normal; Height: 24px; text-align: center; color: #333333; text-Decoration: none; Background-color: # eeeeee; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: none; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999 ;}
. Calendarnow {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; font-weight: bold; color: #000000; Background-color: # c0c9d3; Height: 18px; text-align: center ;}
. Calendardaysat {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; color: #333333; text-Decoration: none; Background-color: # eeeeee; text-align: center; Height: 18px; width: 12% ;}
. Calendardaysun {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; color: #333333; text-Decoration: none; Background-color: # eeeeee; text-align: center; Height: 18px; width: 12% ;}
. Calendarlink {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; font-weight: normal; color: #333333; text-Decoration: none; Background-color: # e7e7f6; text-align: center; Height: 18px ;}
. Categorytxt {font-family: "Arial", "Helvetica", "Sans-serif", ""; font-size: 9pt; line-Height: 23px; color: #333333; text-Decoration: none ;}
. Categorytable {border-right-width: 1px; border-bottom-width: 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: none; border-right-color: #000000; border-bottom-color: #000000; border-top-width: 1px; border-top-style: solid; border-top-color: # 71b99c ;}
</Style>
<Script language = "JavaScript">
VaR months = new array ("1", "2", "3", "4", "5", "6", "7", "8 ", "9", "10", "11", "12 ");
VaR daysinmonth = new array (31, 28, 31, 30, 31, 30, 31, 31, 31, 31, 31 );
VaR days = new array ("day", "one", "two", "three", "four", "five", "Six ");
VaR classtemp;
VaR calendarhover = "calendarhover ";
VaR today = new gettoday ();
VaR year = today. Year;
VaR month = today. month;
VaR newcal;
// Get the number of days in a month
Function getdays (month, year)
{If (1 = month)
Return (0 = year % 4) & (0! = (Year % 100) | (0 = year % 400 )? 29: 28;
Else
Return daysinmonth [month];
}
// Obtain the information of the current day.
Function gettoday ()
{This. Now = new date ();
This. Year = this. Now. getfullyear ();
This. month = this. Now. getmonth ();
This. Day = this. Now. getdate ();
}

// Generate a calendar
Function calendar ()
{Newcal = new date (year, month, 1); // the first day of the current month
Today = new gettoday ();
VaR day =-1; // used to determine whether the calendar is the current day
VaR startday = newcal. getday (); // the start time of the current month.
VaR endday = getdays (newcal. getmonth (), newcal. getfullyear (); // End Time of the current month
VaR daily = 0; // used to generate a daily value in the calendar
If (today. Year = newcal. getfullyear () & (today. month = newcal. getmonth ()))
Day = today. Day;
VaR caltable = Document. All. caltable. tbodies. calendar; // obtain the set of calendar tables.
VaR intdaysinmonth = getdays (newcal. getmonth (), newcal. getfullyear (); // get the number of days in the current month
// Generate a calendar
For (VAR intweek = 0; intweek <caltable. Rows. length; intweek ++)
For (VAR intday = 0; intday <caltable. Rows [intweek]. cells. length; intday ++)
{
VaR cell = caltable. Rows [intweek]. cells [intday]; // obtain the cell sequence.
// Generate a string to determine whether logs exist on the current day
VaR Monte MP = (newcal. getmonth () + 1) <10? ("0" + (newcal. getmonth () + 1) :( newcal. getmonth () + 1 );
If (intday = startday) & (0 = daily) {daily = 1 ;}
VaR daytemp = daily <10? ("0" + daily) :( daily );
VaR d = "<" + newcal. getfullyear () + "-" + Monte MP + "-" + daytemp + "> ";
// Select a style
If (Day = daily)
Cell. classname = "calendarnow ";
Else if (diarydays. indexof (d )! =-1)
Cell. classname = "calendarlink ";
Else if (intday = 6)
Cell. classname = "calendardaysat ";
Else if (intday = 0)
Cell. classname = "calendardaysun ";
Else
Cell. classname = "calendartd ";
// Generate value
If (daily> 0) & (daily <= intdaysinmonth ))
{Cell. innertext = daily;
Daily ++;
}
Else
Cell. innertext = "";
}
Document. All. year. value = year;
Document. All. Month. value = month + 1;
}

Function submonth ()
{
If (month-1) <0)
{
Month = 11;
Year = year-1;
}
Else
{
Month = month-1;
}
Calendar ();
}
Function addmonth ()
{
If (month + 1)> 11)
{
Month = 0;
Year = year + 1;
}
Else
{
Month = month + 1;
}
Calendar ();
}
// Get the response event
Function getdiary ()
{
VaR MON = (newcal. getmonth () + 1) <10? ("0" + (newcal. getmonth () + 1) :( newcal. getmonth () + 1 );
VaR day = event. srcelement. innertext <10? ("0" + event. srcelement. innertext) :( event. srcelement. innertext );
VaR d = "<" + newcal. getfullyear () + "-" + MON + "-" + day + "> ";
If ("TD" = event. srcelement. tagname)
If ((""! = Event. srcelement. innertext) & (diarydays. indexof (d )! =-1 ))
{
Diary. Location = "/Foxmail/archive/" + newcal. getfullyear () + "/" + MON + "/" + day + ". aspx ";
Window. Location. href = diary. location;
}
}

Function setdate ()
{
If (document. All. Month. value <1 | document. All. Month. value> 12)
{
Alert ("the validity period of the month is between 1 and 12! ");
Return;
}
Year = math. Ceil (document. All. year. value );
Month = math. Ceil (document. All. Month. Value-1 );
Calendar ();
}
</SCRIPT>
<Table border = "0" cellpadding = "0" cellspacing = "1" class = "calendarbigborder" id = "caltable" width = "200">
<Thead>
<Tr align = "center" valign = "Middle">
<TD colspan = "7" class = "calendarmonthtitle">
<Input name = "year" type = "text" class = "calendaryinput" size = "3" maxlength = "4" onkeydown = "If (event. keycode = 13) {setdate ()} "onkeyup =" this. value = This. value. replace (/[^ 0-9]/g, '')" onpaste = "this. value = This. value. replace (/[^ 0-9]/g, '')"> year
<Input name = "month" type = "text" class = "calendarminput" size = "1" maxlength = "2" onkeydown = "If (event. keycode = 13) {setdate ()} "onkeyup =" this. value = This. value. replace (/[^ 0-9]/g, '')" onpaste = "this. value = This. value. replace (/[^ 0-9]/g, '')"> month [<a onclick = "addmonth ()" href = "javascript :; "> next month </a>] [<a onclick =" submonth () "href =" javascript:; "> last month </a>] </TD>
</Tr>
<Tr align = "center" valign = "Middle">
<Script language = "JavaScript">
Document. Write ("<TD class = calendardaysun id = diary>" + days [0] + "</TD> ");
For (VAR intloop = 1; intloop <days. Length-1;
Intloop ++)
Document. Write ("<TD class = calendartd id = diary>" + days [intloop] + "</TD> ");
Document. Write ("<TD class = calendardaysat id = diary>" + days [intloop] + "</TD> ");
</SCRIPT>
</Tr>
</Thead>
<Tbody border = 1 cellspacing = "0" cellpadding = "0" id = "calendar" align = center onclick = "getdiary ()" onmouseup = document. selection. empty () oncontextmenu = "Return false" onselectstart = "Return false" ondragstart = "Return false" onbeforecopy = "Return false" oncopy = document. selection. empty () onselect = document. selection. empty ()>
<Script language = "JavaScript">
For (VAR intweeks = 0; intweeks <6; intweeks ++ ){
Document. Write ("<tr style = 'cursor: hand'> ");
For (VAR intdays = 0; intdays <days. length; intdays ++)
Document. write ("<TD class = calendartd onmouseover = '{classtemp = This. classname; this. classname = calendarhover} 'onmouseout = 'this. classname = classtemp '> </TD> ");
Document. Write ("</tr> ");
}
</SCRIPT>
</Tbody>
</Table>
<Script language = "JavaScript">
Calendar ();
</SCRIPT>
<! -- End of blog calendar -->

<! -- Coding is involved in the weather forecast. % B1 % B1 % be % A9 is the city code, which can be checked by Baidu. For example, enter Beijing, the contents of % B1 % B1 % be % appear in the address bar -->
<Center> <IFRAME width = 157 Height = 240 frameborder = 0 scrolling = No src = 'HTTP: // appnews.qq.com/cgi-bin/news_qq_search? City = % B1 % B1 % be % A9 '> </iframe> </center>

<! -- Display the online status of MSN. Note: it is valid only when setting in MSN to allow everyone to view your status; otherwise, the MSN icon is always grayed out. -->
<A href = "http://snind.gotdns.com: 8080/message/MSN/Your MSN username">
Align = "absmiddle" border = "0" alt = "MSN online status indicator"
Onerror = "This. onerror = NULL; this. src = 'HTTP: // snind.gotdns.com: 8080/image/msnunknown.gif ';">

<! -- Display QQ online status -->
</A> <br> QQ: Your number