You can insert the "Boating in Canada News" feed (Javascript code) and the style (CSS code) into your own web page - it will appear just like the list in our news page with the title "Boating in Canada News" added. People who do not have Javascript turned "on" in their Web browser will only see a text message with a link to the news blog.
Copy all the code in the box below, and paste into your Web page where you want the news list to be displayed. [How-to]
This optional CSS (style) code may be added to the "<HEAD>" section to make the news items look like ours.
<STYLE type="text/css" media=screen><!--
/* CSS STYLES FOR "BOATING IN CANADA NEWS" FEED: */
/* rss_box - entire feed content */
/* rss_title - feed title */
/* rss_items - list (UL) for all items */
/* rss_item - item title, description, list (LI) */
/* rss_item a: variant for item title and links */
/* rss_date - item posting dates */
.rss_box {
max-width:480px;
padding: 4px 8px;
color: #000;
background-color: #EEE;
border: 2px dashed #999;
margin: 10px 4% 0 0;}
.rss_box IMG {border:3px outset #999; margin:5px;}
.rss_title, .rss_title a {
font-family:"American Typewriter",Trebuchet,Lucida,sans-serif;
font-size: 24px; font-weight:bold;
padding: 0;
letter-spacing: 2px;}
.rss_items {list-style-image:url(blog/diamond.gif);}
.rss_item {
font-family: Verdana, Arial, sans-serif;
font-size: 13px; font-weight: bold;
margin: 8px 0;
clear:left;}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {
text-decoration: none;
border-bottom: 1px dotted #369;
color: #369;}
.rss_item a:hover {
text-decoration: none;
color: #036;
border-bottom: 1px dotted #E82;}
.rss_date {
font-size: 11px;
font-weight: normal;
color: #600;}
--><STYLE>
The two text boxes above contain the code you need to insert into your web page. Either click inside the box, select and copy all the text using the Edit menu, or right-click and use the context menu (details below), or copy with a keyboard command. Use a plain text editor like Notepad to paste the code into your web page so the code is copied without modification. Add the Javascript code (in the first box) into your web page where you want the news feed to appear. Add the CSS code into the top HEAD section right before the closing tag </head>. Save your file and exit Notepad. Open this file in your Web browser. You should see the news items appear - magic!
Copy using a Mouse: Click inside the box and right click. Select "Select All", then right-click again and select "Copy". Open your Web page in Notepad and locate the closing tag for the previous item (e.g. </p> </div>) and before the opening tag for the next item on the page (e.g. <p> <h3>). Right-click and select "Paste" to insert the Javascript code into the page.
Copy using a Keyboard: You may also use keyboard commands rather than the mouse menu: click inside the box and select all text (type CTRL+A), copy selection (CTRL+C). Open your web page file (xx.html or xx.htm) in Notepad. Type CTRL+V to paste the first Javascript code into your web page where you want the news feed to appear.
