2011/04/27 Blogger 記事内に「関連のブログ記事」を挿入するには 2011年版

 

「投稿したブログ記事内に関連した記事を表示する」方法の紹介。

 

本機能は、以前から存在していたようで海外サイトで発見したものを試したの

ですが、エラーが出て表示不可能でした。

 

海外の wiki っぽい所でヘルプを漁ったら手順が更新されていた経緯があったので、

日本語版として紹介します。

 

http://code.google.com/p/brps/

 

さて本手順は以上に簡単です。導入ステップは２段階のみとなっています。

 

「ブログ記事に手動で関連記事を入れるのがめんどくさい…」という方は、

ぜひ導入してみましょう！

 

 

前準備をしよう！

 

まずは共通の画面として、以下まで移動します。

 

「ブロガーメニュー」→「デザイン」→「HTML の編集」

 

そして

 

「ウィジェットのテンプレートを展開」

 

にチェックを入れます。

これで準備が整ったので、HTML ソースコードを編集していきます。

 

 

 

A. スクリプトコードを貼り付けよう！

 

ＨＴＭＬ編集ウィンドウをクリックした後、Ctrl+F キーを押し

検索ウィンドウを表示させます。

 

表示後、下記の行をコピー＆ペーストして、検索をかけます。

 

</head

 

下記画像を参考にして下さい。

 

 

見つかった１行前に、以下のコードをコピー＆ペーストを行います。

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script src='http://brps.appspot.com/gas.js'/>

 

貼り付けたら、プレビューでエラーの無いことを確認しましょう。

( この時点では反映されません。エラーが無いことを確認する段階です )

 

 

 

B. コメントの直前に「関連記事」を貼り付けよう！

 

下記の行をコピー＆ペーストして、検索をかけます。

 

id='comments'

 

見つかった１行後に、以下のコードをコピー＆ペーストを行います。

 

<div id='gas-results'/>

 

下記画像を参考にして下さい。

 

この後、プレビューを押してエラー報告がなければ「テンプレートを保存」で

完成です！

 

本手順通りに行った場合「記事の区切り線後、コメントの前」に表示されます。

 

 

ぜひご確認ください。なお本手順は「個別記事の表示」で表示させています

 

ブログのTOP ページは記事の一覧が出ますが、そこでは表示されません。

 

 

海外では「記事の区切り線前」に表示する手順が紹介されています。

こちらについては、次に紹介します。

 

 

 

C. 記事の最後に「関連記事」を貼り付けよう！

 

下記の行をコピー＆ペーストして、検索をかけます。

 

clear for photos

 

B 手順と同様に見つかった１行後に、以下のコードをコピー＆ペーストを

行います。

 

<div id='gas-results'/>

 

下記画像を参考にして下さい。

 

この後、プレビューを押してエラーがなければ「テンプレートを保存」で反映！

 

なお本手順の B と C は「ここに入れなければならない」というのではありません。

好きな位置に挿入する事ができます。

 

「ここに入れたいのだけれど…」というご意見がありましたら、改めて紹介します。

 

 

最後に、本ウィジェットの「関連のブログ記事表示」はカスタマイズも可能

ですので、別記事で紹介予定です。

 

 

関連記事

・【フリーサービス】Blogger 最近投稿された記事をランダムで表示する