2010.12.20 追記
現在はガジェットで表示させるように…仕様が変更になっています…
記事にはしませんので…
Blogger Related Posts Service
…を参照して下さい…
当サイトでは…
記事フッターに関連記事を自動生成させるスクリプト…jQuery編
の方法で表示しています…
この記事は…
Bloggerで記事フッターのラベルを表示させない記述
…も、合わせてお読みになる事をお奨めします…
2つの記事通りにカスタマイズすると…
記事フッターはこんな感じになります…
早速いきましょう…
「デザイン」「HTMLの編集」
「ウィジェットのテンプレートを展開」から…
「Ctrl + F」で <div class='post-footer'> を検索…
ハイライト表示されたら1列上に以下を記述…
タイトルと表示記事数を任意に変更します…
- <div id='related_posts'/>
- <b:if cond='data:blog.pageType == "item"'>
- <script src='//www.google.com/jsapi'></script>
- <script type='text/javascript'>
- window.brps_options = {
- "title": "<h2>タイトル</h2>",
- "max_results": 表示記事数(半角数字)
- }
- </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 が生成されます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿