Bloggerの記事フッターに関連記事を自動生成させるスクリプト

2010.12.20 追記

現在はガジェットで表示させるように…
仕様が変更になっています…
記事にはしませんので…
Blogger Related Posts Service  

…を参照して下さい…
当サイトでは…
 Bloggerの記事フッターに関連記事を自動生成させるスクリプト…jQuery編

の方法で表示しています…

この記事は…

 Bloggerで記事フッターのラベルを表示させない記述


…も、合わせてお読みになる事をお奨めします…

２つの記事通りにカスタマイズすると…

記事フッターはこんな感じになります…

早速いきましょう…

「デザイン」「HTMLの編集」

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

「Ctrl + F」で <div class='post-footer'> を検索…

ハイライト表示されたら１列上に以下を記述…

<div id='related_posts'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='//www.google.com/jsapi'></script>
<script type='text/javascript'>
window.brps_options = {
&quot;title&quot;: &quot;<h2>タイトル</h2>&quot;,
&quot;max_results&quot;: 表示記事数（半角数字）
}
</script>
<script src='//brps.appspot.com/brps.js?key=********' type='text/javascript'/>
</b:if>

タイトルと表示記事数を任意に変更します…

********の部分は…

Blogger Related Posts Service  


…から…key を入手して入れ替えます…(key 入手方法は下記)

デフォルトのスタイルでいい場合は必要ありませんが…

一応…CSS 部分も書いておきます…

/* Related Posts
------------------------------ */
#related_posts h2 {
background: url(タイトルのリストマーク画像URL) no-repeat;
padding: 0 0 0 15px;
color: #7777FF;
font-size: 14px;
font-weight: bold;
font-style: italic;
}
#related_posts ul {
margin: 3px 0 15px 0;
padding: 3px 5px 3px 20px;
border-top: 2px solid #555555;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 2px solid #555555;
}
#related_posts ul li {
list-style-image: url(記事のリストマーク画像URL);
font-size: 11px;
}

ご自身のテンプレートに合わせて色々と弄って下さいな…

「テンプレートを保存」して完了です…

key の入手方法です…

Blogger Related Posts Service  


…にアクセスして…

「Get Key and Install」をクリック…

ご自身の Blogger の URL を入力して…

「Get Key and Installation Steps」をクリック…

key が生成されます…

Tips Universal Header Sidebar Footer Current-Label : Main