過去の投稿記事 new!
・【画像】漫画でわかる外国人参政権
・東京電力のHPで停電状態が確認できたり(サービス再開!)
・戦国時代 ~ 江戸時代の徳川家康が熱かった
・vaio のバッテリは寿命が短いような気がする
・話題の Western Digital 製 WD20EARS を購入した
・C01LC をビックカメラで買ってきた
・2025年には空中都市が現実化?!
・【動画】わかりやすい「宇宙ひも理論」
・今世紀には「富士山噴火」「東海連動地震」「首都圏直下型地震」か?
・滅びた町、南浜町が Googleストリートビューで見れる

【 amazon 送料無料キャンペーン 】

バックリンクはご自由にどうぞ!     http://mfsocket.blogspot.com/feeds/posts/default?alt=rss リンク集 / ログイン

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

 
「投稿したブログ記事内に関連した記事を表示する」方法の紹介。
 
本機能は、以前から存在していたようで海外サイトで発見したものを試したの
ですが、エラーが出て表示不可能でした。
 
海外の wiki っぽい所でヘルプを漁ったら手順が更新されていた経緯があったので、
日本語版として紹介します。
 
 
さて本手順は以上に簡単です。導入ステップは2段階のみとなっています。
 
「ブログ記事に手動で関連記事を入れるのがめんどくさい…」という方は、
ぜひ導入してみましょう!
 
 
前準備をしよう!
 
まずは共通の画面として、以下まで移動します。
 
「ブロガーメニュー」→「デザイン」→「HTML の編集」
 
そして
 
「ウィジェットのテンプレートを展開」
 
にチェックを入れます。
これで準備が整ったので、HTML ソースコードを編集していきます。
 
 
 
A. スクリプトコードを貼り付けよう!
 
HTML編集ウィンドウをクリックした後、Ctrl+F キーを押し
検索ウィンドウを表示させます。
 
表示後、下記の行をコピー&ペーストして、検索をかけます。
 
</head
 
下記画像を参考にして下さい。
 blogger_cstm_relate00
 
見つかった1行前に、以下のコードをコピー&ペーストを行います。
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>
<script src='http://brps.appspot.com/gas.js'/>
 
貼り付けたら、プレビューでエラーの無いことを確認しましょう。
( この時点では反映されません。エラーが無いことを確認する段階です )
 
blogger_cstm_relate01
 
 
B. コメントの直前に「関連記事」を貼り付けよう!
 
下記の行をコピー&ペーストして、検索をかけます。
 
id='comments'
 
見つかった1行後に、以下のコードをコピー&ペーストを行います。
 
<div id='gas-results'/>
 
下記画像を参考にして下さい。
blogger_cstm_relate02
 
この後、プレビューを押してエラー報告がなければ「テンプレートを保存」で
完成です!
 
本手順通りに行った場合「記事の区切り線後、コメントの前」に表示されます。
 
blogger_cstm_relate03
 
ぜひご確認ください。なお本手順は「個別記事の表示」で表示させています
 
ブログのTOP ページは記事の一覧が出ますが、そこでは表示されません。
 
 
海外では「記事の区切り線前」に表示する手順が紹介されています。
こちらについては、次に紹介します。
 
 
 
C. 記事の最後に「関連記事」を貼り付けよう!
 
下記の行をコピー&ペーストして、検索をかけます。
 
clear for photos
 
B 手順と同様に見つかった1行後に、以下のコードをコピー&ペーストを
行います。
 
<div id='gas-results'/>
 
下記画像を参考にして下さい。
blogger_cstm_relate04
 
この後、プレビューを押してエラーがなければ「テンプレートを保存」で反映
 
なお本手順の B と C は「ここに入れなければならない」というのではありません。
好きな位置に挿入する事ができます。
 
「ここに入れたいのだけれど…」というご意見がありましたら、改めて紹介します。
 
 
最後に、本ウィジェットの「関連のブログ記事表示」はカスタマイズも可能
ですので、別記事で紹介予定です。
 
 
関連記事

0 コメント:

  • コメントには <b>, <strong>, <em>, <i>, <a> など一部の HTML タグを使用できます。