2016年1月17日日曜日

Blogger appspot のバナーを作って見ました

Kuribo さまの運営なさっている Japanese Bloggers Inf に登録しています。
別 Blog で 写真 の公開をしているのですが、 この度、 ブログ村 にも登録する事にしました。
ランキングに参加する予定はないのですが、 ブログパーツ を貼れ とのご指示ですので、
序でに、 Japanese Bloggers Inf へのリンクバナーも作って見ました。
他の方でも ご利用可能 です。 *1.


何と言っても、最初に、お世話になった Japanese Bloggers Inf ですから、
やはり、リンクバナーのトップはこれにしたい!
でも、バナーがない!
ならば、作っちゃえ! です。


作ったバナーは 一般公開ファイル扱い しましたので、
Japanese Bloggers Inf に登録してらっしゃる方は 何方でも ご利用出来る様にしました。  後述。 *1.


間に合わせで作ったので、雑ですが ... 。
こんな感じの 画像 です。  サイズ w:81 H:33



貼り付ける HTML コードがこちら。  画像 URL 変更 *3.

<a href="http://japanese-bloggers.appspot.com" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoA1nVUWZ-3vkTyp2OudylA9lvFxvBmcA847PjYdvSodqE9hXb0pM0jFJ8V_xmZbzbvvlT5pmz8LFKJXJp9TQHcmOcaylJ82s5G7skazvm8-DtrnUGOiZh86hSVohS6pVXX7t_P1ZvSaQ/s1600/JapaneseBloggersInf.gif" width="88" height="31" border="0" alt="Japanese Bloggers Info へ" /></a><br />
<a href="http://japanese-bloggers.appspot.com/category/arts/photography" target="_blank">カテゴリ:アート/写真</a><br />
<br />

画像は Japanese Bloggers Inf トップに、 文字は 登録カテゴリ へのリンクとしています。
リンクをクリックすれば、 別ページで、該当 URL を開きます。.

赤い字の部分を 各々の 登録カテゴリに 合わせて編集すれば、 そのままお使い戴けます。
画像も含めて このまま どうぞ。

設定するには、 Dashboard > レイアウト > ガジェットを追加 > HTML/JavaScript  と辿って下さい。



尚、HTML 最後の  <br /> は 続く 別の バナーとの識別の為に入れた改行(空行挿入)ですから、不要なら、削除して下さい。
言い換えれば、 各団体のバナーの HTML 文を <br /> を挿みながら 連結して、 ひとつの項目として纏めます。
もし、各団体の HTML 文が </a> で終わっている場合に、 続けて、別の団体を表示する には、
更に、もうひとつ、<br /> を挿入し、 区切る必要があります。  上の例の様に <br /> が2個以上必要。.
その団体が最後に表示されるものなら、 <br /> は不要です。
序でに、続く 次のガジェット との距離を調整する為に、HTML文の最後に <br /> を必要数追加する方法もありますね。
その辺りは、各自の Blog レイアウトで異なりますので、調整して見て下さい。. *2.

また、どんな具合に表示されるのか、確認したい方は、 

  1項目のみ  本 Blog 、
  2項目以上  別 Blog  みつけた_とらえた_ときめいた: (上のコードの例) へ どうぞ。

右欄の下方、参加団体 と言う名称の項目が  今回設定したもの です。
上記のコードの要領で、次のガジェットとの距離を調整しています。  最後にも 1行の空白行あり。 *2.




画像の外部からの参照に関して

 参考:

   Google Drive に置いた画像ファイルを外部から参照する

     一般公開でファイルを登録
     リンクを取得  https://drive.google.com/file/d/0B2GanJNrLNVxaUNRYkNrTm9IQVk/view?usp=sharing
     この赤い字と https://www.googledrive.com/host/ を連結して、 URL の文字列を作成
     https://www.googledrive.com/host/0B2GanJNrLNVxaUNRYkNrTm9IQVk
     これが、外部から参照する時の URL になります。 *3.


 参考 #2:

   自分専用なら、 Picasa / Google Photo に置いたファイルから
   http://2.bp.blogspot.com/ ... /s1600/JapaneseBloggersInf.gif  (普通の画像参照方法)
   でも構わないと思います。
   今回は、他の方も利用可能な様に、 Google Drive 上に置いたものを参照しています。. *3.



[2016/01/19] Japanese Bloggers Inf 登録者用の投稿である旨を記載  *1.
[2016/01/19] 他のガジェットとの兼ね合いを追記 *2.
[2016/08/18] 2016/8/31 googledrive.com/host/ サポート中止を受け URL を変更 *3.

0 件のコメント:

コメントを投稿