from :: Asahikawa Hokkaido

passer-by198

primetime pencil

2010/07/12


Posted

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

2010.12.20 追記

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


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


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

この記事は…

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



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

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




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

早速いきましょう…

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

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

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

ハイライト表示されたら1列上に以下を記述…
  1. <div id='related_posts'/>
  2. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  3. <script src='//www.google.com/jsapi'></script>
  4. <script type='text/javascript'>
  5. window.brps_options = {
  6. &quot;title&quot;: &quot;<h2>タイトル</h2>&quot;,
  7. &quot;max_results&quot;: 表示記事数(半角数字)
  8. }
  9. </script>
  10. <script src='//brps.appspot.com/brps.js?key=********' type='text/javascript'/>
  11. </b:if>
タイトルと表示記事数を任意に変更します…

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

Blogger Related Posts Service  



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

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

一応…CSS 部分も書いておきます…
  1. /* Related Posts
  2. ------------------------------ */
  3. #related_posts h2 {
  4. background: url(タイトルのリストマーク画像URL) no-repeat;
  5. padding: 0 0 0 15px;
  6. color: #7777FF;
  7. font-size: 14px;
  8. font-weight: bold;
  9. font-style: italic;
  10. }
  11. #related_posts ul {
  12. margin: 3px 0 15px 0;
  13. padding: 3px 5px 3px 20px;
  14. border-top: 2px solid #555555;
  15. border-right: 2px solid #999999;
  16. border-bottom: 2px solid #999999;
  17. border-left: 2px solid #555555;
  18. }
  19. #related_posts ul li {
  20. list-style-image: url(記事のリストマーク画像URL);
  21. font-size: 11px;
  22. }
ご自身のテンプレートに合わせて色々と弄って下さいな…

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

key の入手方法です…

Blogger Related Posts Service  



…にアクセスして…







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

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

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

key が生成されます…


0 Comments :

「jQuery」と「jQuery UI」で HTML に彩りを添えよう…


「導入」「Button」「Accordion」「Tabs」「Effects/Slide」
「Progressbar」「Dialog」「Tooltip」「Menu」
「Extra」 / 公式「Widgets」以外の「jQuery UI」スクリプト
Blogger Template Customize Universal / INDEX

Blogger テンプレート・カスタマイズ / 全般を解説
高速化・最適化対策の結果と備忘録