Making a noscript option for templates with archive links in the main page
If you like using the templates that use JavaScript to include the archive links in the main page, but you want to provide a noscript option for people using browsers that don't support JavaScript, or who have JavaScript turned off, here's how:
First, in your main template, include a <noscript> tag after the archive script tag, something like:
<script type="text/javascript" src="<$BlogArchiveFileName$>"></script>
<noscript><a href="<$BlogArchiveFileName$>">previously...</a></noscript>
Save your changes, then go back and copy the main template, and paste it in below your current archive template code. Find the <Blogger> to </Blogger> section in the template you just pasted in, and delete it. Cut the original archive template section, and paste it in where the <Blogger> to </Blogger> section was. Now, to add the comment codes that will hide the html when it is being used as JavaScript, and hide the JavaScript when it is being used as html:
<!--
/*
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><$BlogTitle$></title>
<style type="text/css">
<!--
a:hover {
text-decoration: none
}
-->
</style>
</head>
<body bgcolor="#9C5E8A" text="#202020" link="#6C2A4B" vlink="#6C2A4B" alink="#6C2A4B">
<center>
<table border=0 cellpadding=20 cellspacing=0>
<tr>
<td align=right colspan=2 bgcolor="#F4EFF7" height=70>
<span class=title><b><$BlogTitle$></b></span>
</td>
</tr>
<tr>
<td valign=top width=300 bgcolor="#FFFFFF">
<!-- Here is where the posts go.
Please refer to the documentation on the Blogger template editing page for
information on what tags are available here and how they work -->
<!--
*/
// -->
<Blogger>
<!--
document.write("<a href='<$BlogArchiveLink$>'><$BlogArchiveName$></a><br>")
// --> <a href='<$BlogArchiveLink$>'><$BlogArchiveName$></a><br>
</Blogger>
<!--
if (location.href.indexOf("archive") != -1) {
document.write("<a href=\"./\">current</a>")
}
// --> <a href='./'>current</a>
<!--
/*
// -->
<!-- End Posts -->
</td>
<td valign=top width=200 bgcolor="#FFFFFF">
<table border=0 cellpadding=1 cellspacing=0 width="100%">
<tr>
<td bgcolor="#808080">
<table border=0 cellpadding=5 cellspacing=0 width="100%">
<tr>
<!-- Yadda, yadda, you get the point... -->
</body>
</html>
<!--
*/
// -->
First, in your main template, include a <noscript> tag after the archive script tag, something like:
<script type="text/javascript" src="<$BlogArchiveFileName$>"></script>
<noscript><a href="<$BlogArchiveFileName$>">previously...</a></noscript>
Save your changes, then go back and copy the main template, and paste it in below your current archive template code. Find the <Blogger> to </Blogger> section in the template you just pasted in, and delete it. Cut the original archive template section, and paste it in where the <Blogger> to </Blogger> section was. Now, to add the comment codes that will hide the html when it is being used as JavaScript, and hide the JavaScript when it is being used as html:
<!--
/*
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><$BlogTitle$></title>
<style type="text/css">
<!--
a:hover {
text-decoration: none
}
-->
</style>
</head>
<body bgcolor="#9C5E8A" text="#202020" link="#6C2A4B" vlink="#6C2A4B" alink="#6C2A4B">
<center>
<table border=0 cellpadding=20 cellspacing=0>
<tr>
<td align=right colspan=2 bgcolor="#F4EFF7" height=70>
<span class=title><b><$BlogTitle$></b></span>
</td>
</tr>
<tr>
<td valign=top width=300 bgcolor="#FFFFFF">
<!-- Here is where the posts go.
Please refer to the documentation on the Blogger template editing page for
information on what tags are available here and how they work -->
<!--
*/
// -->
<Blogger>
<!--
document.write("<a href='<$BlogArchiveLink$>'><$BlogArchiveName$></a><br>")
// --> <a href='<$BlogArchiveLink$>'><$BlogArchiveName$></a><br>
</Blogger>
<!--
if (location.href.indexOf("archive") != -1) {
document.write("<a href=\"./\">current</a>")
}
// --> <a href='./'>current</a>
<!--
/*
// -->
<!-- End Posts -->
</td>
<td valign=top width=200 bgcolor="#FFFFFF">
<table border=0 cellpadding=1 cellspacing=0 width="100%">
<tr>
<td bgcolor="#808080">
<table border=0 cellpadding=5 cellspacing=0 width="100%">
<tr>
<!-- Yadda, yadda, you get the point... -->
</body>
</html>
<!--
*/
// -->
posted by Phil Ringnalda at
11/07/2001 10:55:00 PM
