loading ...

Google AJAX Feed APIでRSSフィードをタブで表示

Aug 27 2008
Date:August 27, 2008 10:08 PM 今日は何の日?
Category:[Customize]
Tag:[ ]

今更ながらGoogle AJAX Feed APIを設置致しました。
色々と出来るみたいですが・・・それでさえサイドバーが長くなってしまっているのでタブ表示にしました。
これで他の私のブログの更新が見れるようになりました。
1.Google AJAX Feed APIからStart using the Google AJAX Feed APIから
 APIキーを取得。
 I have read and agree with the terms and conditions チェックを入れる。
 My web site URL 自分のサイトのURLを入力する。
 Generate API Key をクリック。
2.
Your key is:API Keyになります。
This key is good for all URLs in this directory:
先ほど入力した、各自のサイトのURLが表示されます。
Here is an example web page to get you started:
FEEDを表示するためのサンプルHTMLになります。
<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPI key"></script>
    <script language="Javascript" type="text/javascript">//<![CDATA[
      google.load("feeds", "1");
      function OnLoad() {
        var feedControl = new google.feeds.FeedControl();
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.addFeed("RSSフィードのURL", "タグのタイトル");
        feedControl.setNumEntries(5);
        feedControl.draw(
             document.getElementById("feedControl"),  {
             drawMode : google.feeds.FeedControl.DRAW_MODE_TABBED  });
      }
      google.setOnLoadCallback(OnLoad);
    //]]>
    </script>
ピンク字⇒取得したAPI key
ピンク字(5)⇒表示したいエントリー数
<div id="feedControl">loading...</div>
赤字の「feedControl」は上のサンプルHTMLと同じにしないと動きません。

Google検索を設置する

Jun 17 2008
Date:June 17, 2008 1:13 AM 今日は何の日?
Category:[Customize]
Tag:[ ]

設置したGoogleサイト検索のコードを参考にリンク、検索機能を追加
下記をサイドバー右に設置致しました。
Google フリー検索 (ベーシック版) : ウェブ検索 + サイト検索
●デザイン⇒テンプレート⇒テンプレートモジュール⇒サイドバー

<div class="searchstyle">
<form method="get" action="http://www.google.co.jp/search">
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/intl/ja/logos/Logo_25wht.gif"
width="75" height="32" alt="Google" title="Google"
/></a><br />
<input type="text" name="q" size="14"maxlength="255" value="" accesskey="a" tabindex="1"/><input type="hidden" name="ie" value="UTF-8"
/><input type="hidden" name="oe" value="UTF-8"/><input type="hidden" name="hl" value="ja"/>
<input type="submit" name="btnG" value="Search"
accesskey="b" tabindex="2" /><br /><input type="hidden" name="domains" value="musashi.s201.xrea.com"/><input type="radio" name="sitesearch" value=""accesskey="c" tabindex="3" />Web<br />
<input type="radio" name="sitesearch" value="musashi.s201.xrea.com"accesskey="d" tabindex="4" checked="checked"/>musashi.s201.xrea.com
</form>
</div>
 ピンク字は、サイト名を入れる。
 青字は、ブログの文字コードを挿入。当ブログは、UTF-8です。
 他の文字コードでブログを運用している場合は変更する。shift_jis・euc-jpです。
●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート(メイン)
/* Googleサイト検索 */
.searchstyle{
    padding: 2px;
    background-color: #ffffff;
    font-size: 10px;
    border: 1px dotted #999999;
}

メインページのページ分割

Jun 08 2008
Date:June 8, 2008 5:09 PM 今日は何の日?
Category:[Customize]
Tag:[ ]

小粋空間さまのyujiroさまにご指導頂きMTPaginate プラグインを使って
メインページのページ分割方法。
 参考:メインページのページ分割 for Movable Type 4
1.MT ExtensionsからMTPaginateをダウンロードする。
2.Movable Typeのインストール先のpluginsのあるディレクトリに丸ごとアップロード。
 plugins/MTPaginate/lib/MTPaginate.pm
 plugins/MTPaginate/MTPaginate.pl
ブログ管理画面の「システム」→「プラグイン」で MTPaginate が表示されれば
プラグインのインストールは完了。
3.ページ分割の設定
 ●デザイン⇒テンプレート⇒メインページ
 テンプレート編集画面のテキストエリアに、リストのように青色部分を追加。
 <MTEntries> の直前と </MTEntries> の前後に加える。
    :
<MTPaginate>
<MTPaginateContent max_sections="5">
<MTEntries>
    <$MTEntryTrackbackData$>
    <$MTInclude module="ブログ記事の概要"$>
<$MTPaginateSectionBreak$>
</MTEntries>
</MTPaginateContent>
<MTPaginateIfMultiplePages>
<div class="paginate">
<MTPaginateIfPreviousPage_>
<a href="<$MTPaginatePreviousPageLink$>"><</a>
</MTPaginateIfPreviousPage_>
<$MTPaginateNavigator style="links" format_all="All pages" place_all="after" separator=" | ">
<MTPaginateIfNextPage_>
<a href="<$MTPaginateNextPageLink$>">></a>
</MTPaginateIfNextPage_>
</div>
</MTPaginateIfMultiplePages>
</MTPaginate>
    :
4.スタイルの設定
 ●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート(メイン)
.paginate {
    text-align: center;
    font-size: 9px;
}

関連する記事一覧を表示する

Jun 05 2008
Date:June 5, 2008 8:45 PM 今日は何の日?
Category:[Customize]
Tag:[ ]

WingMemoさまにご指導頂き関連する記事一覧を表示する事が出来ました。
参考:エントリーアーカイブに関連する記事一覧を表示する
●デザイン⇒テンプレート⇒テンプレートモジュール⇒モジュールテンプレートを作成する。
 下記コードをコピー & ペーストしてテンプレートモジュールを作成する。
 テンプレート名称:関連記事

<h3 class="related-header">Related Entries</h3>
<div class="related-entries">

<MTEntryIfTagged>
<MTSetVarBlock name="etag"><MTEntryTags glue=" OR "><$MTTagName$></MTEntryTags></MTSetVarBlock>
<ul>
<MTEntries lastn="10" tags="$etag">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTElse>
<MTSetVarBlock name="ecat"><MTEntryCategories glue=" OR "><$MTCategoryLabel$></MTEntryCategories></MTSetVarBlock>
<ul>
<MTEntries lastn="10" category="$ecat">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</MTElse>
</MTEntryIfTagged>

</div>

●デザイン⇒テンプレート⇒インデックステンプレート⇒スタイルシート(メイン)
/* 関連するエントリー */
.related-entries {
  margin-top: 3px;
}
.related-entries li {
    padding-left: 14px;
    background: url('画像URL') no-repeat 0px 0.3em;
    list-style: none;
}

Copyrightの西暦表記を自動で行う

May 29 2008
Date:May 29, 2008 5:01 PM 今日は何の日?
Category:[Customize]
Tag:[ ]

WingMemoさまにご指導頂きエントリのフッター部分のCopyrightを 自動化する事が出来ました。
参考:COPYRIGHTの西暦表記を自動で行う(MT4~)
●デザイン⇒テンプレート⇒テンプレートモジュール⇒フッター
<MTSetVarBlock name="year"><MTArchiveList archive_type="Yearly"><MTArchiveListHeader><$MTArchiveDate 
format="%Y" language="en"$></MTArchiveListHeader></MTArchiveList></MTSetVarBlock>
<MTSetVarBlock name="year2"><MTArchiveList archive_type="Yearly"><MTArchiveListFooter><$MTArchiveDate format="%Y" language="en"$></MTArchiveListFooter></MTArchiveList></MTSetVarBlock>
Copyright &copy ;<MTGetVar name="year2"><MTUnless name="year2" eq="year">-<MTGetVar name="year"></MTUnless> <$MTBlogName encode_html="1"$> All Rights Reserved.

 1  |  2  | All pages

Powered by Movable Type 4.1
This weblog is licensed under a Creative Commons License.
Last Updated: December 1, 2008 3:22 PM