クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> Archive Links in a Menu

Archive Links in a Menu

Posted at: 2005-08-03 4

前回アーカイブリンクに関する記事を書いたのでついでに…。)

Blogger 歴が1年、2年と長くなるにつれて、アーカイブリンクのリストもどんどん長くなっていきます。リストをもっとすっきり表示したい、というときに便利なのが選択型のアーカイブリンクです。
これは Blogger Help でも紹介されています。

これに Current Posts のリンクを加えたのが Li Zhao さんのものですが、どちらにしてもページの移動を JavaScript に頼っています。
そのため、JavaScript が無効になっている場合には、アーカイブページにたどり着くすべがなくなるとともに、用をなさないセレクトボックスがさみしく表示される、ということになります。

クリボウも JavaScript を使わない簡単なページ移動の方法は思いつかないのですが、せめて JavaScript が効かないときには、従来のアーカイブリンクを表示するようにしたいのです。

結局どうするかというと、テンプレート中、アーカイブリンクが書かれている部分(おそらく <ul class="archive-list">)を

<script type="text/javascript">
document.writeln("<select name='archivemenu' onchange='document.location.href=this.options[this.selectedIndex].value;'>");
document.writeln("<option value='" + location.href + "' selected>- Archives -</option>");
<BloggerArchives>
document.writeln("<option value='<$BlogArchiveURL$>'><$BlogArchiveName$></option>");
</BloggerArchives>
<ArchivePage>document.writeln("<option value='./'>Current Posts</option>");</ArchivePage>
document.writeln("</select>");
</script>
<noscript>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</noscript>
に書き換えます。今回も長くなってしまいましたが、コピー&ペーストして使って下さい。

ちなみにセレクトボックスの中で、前回記事のように、新しいものを上に、古いものを下に表示したい時には、同じところに

<script type="text/javascript">
var archives = new Array();
<BloggerArchives>
archives[archives.length] = new Array("<$BlogArchiveURL$>", "<$BlogArchiveName$>");
</BloggerArchives>
document.writeln("<select name='archivemenu' onchange='document.location.href=this.options[this.selectedIndex].value;'>");
document.writeln("<option value='" + location.href + "' selected>- Archives -</option>");
for (var i = archives.length - 1; i >= 0; i--) {
  document.writeln("<option value='" + archives[i][0] + "'>" + archives[i][1] + "</option>");
}
<ArchivePage>document.writeln("<option value='./'>Current Posts</option>");</ArchivePage>
document.writeln("</select>");
</script>
<noscript>
<BloggerArchives>
<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</noscript>
という、長い長いコードを書きます。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:4

  1. これも上手く行ったみたいです。
    重ね重ね有難うございます。
    http://blog01ochame0001.blogspot.com/

    ReplyDelete
  2. 僕の記事がお役に立てたようで嬉しいです。
    これからもよろしくお願いします。

    ReplyDelete
  3. まさにこういうことができないかな、と思っていたところです。大変助かりました。ありがとうございました。

    ReplyDelete
  4. はーい。どういたしましてです。

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.