play-Google: Feed API - 7

2011年2月15日火曜日

Feed API - 7

■　CSSをカスタマイズします

■　サンプルです。

<html>
<head>
<title>
Feed API サンプル-7
</title>

■　サンプル-6のCSS部分を下のCSSに変えます。新しいCSSのオリジナルは
http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.cssで入手できます。　

■　アロー部分のイメージを残したいときには

"garrow.gif" 部分を　http://www.google.com/uds/solutions/dynamicfeed/garrow.gif へ、

”arrow_close.gif” 部分を http://www.google.com/uds/css/arrow_close.gif' へ変更します。

<style type="text/css">
.gfg-root {
  width : 70%;
  height : auto;
  position : relative;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  border: 1px dotted #9966ff;
}

.gfg-title {
  font-size: 14px;
  font-weight : bold;
  color : #663333;
  background-color: #ccff99;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-title a {
  color : #3366cc;
}

.gfg-subtitle {
  font-size: 12px;
  font-weight : bold;
  color : #3366cc;
  background-color: #ccff99;
  line-height : 1.4em;
  overflow : hidden;
  white-space : nowrap;
  margin-bottom : 5px;
}

.gfg-subtitle a {
  color : #663333;
}

.gfg-entry {
  background-color : white;
  width : 100%;
  height : 6.9em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 3px;
}

/* オーバーレイの正しい動作をするようにする */
.gfg-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : auto;
  height : 100%;
  padding-left : 20px;
  padding-right : 5px;
}

.gfg-list {
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-bottom : 5px;
}

.gfg-listentry {
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  padding-left : 15px;
  padding-right : 5px;
  margin-left : 5px;
  margin-right : 5px;
}

.gfg-listentry-odd {
  background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
  background-image : url('http://www.google.com/uds/solutions/dynamicfeed/garrow.gif');
  background-repeat: no-repeat;
  background-position : center left;
}

/*
* フィードコントロールのカスタマイズ
*/

.gfg-root .gfg-entry .gf-result .gf-title {
  font-size: 14px;
  line-height : 1.2em;
  overflow : hidden;
  white-space : nowrap;
  text-overflow : ellipsis;
  -o-text-overflow : ellipsis;
  margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
  height : 3.8em;
  color: #000000;
  margin-top : 3px;
}

/*
* 水平モードにする簡単な方法は、ガジェットにjsのオプションを適応させる
*/

.gfg-horizontal-container {
  position : relative;
}

.gfg-horizontal-root {
  height : 1.5em;
  _height : 100%;
  position : relative;
  white-space : nowrap;
  overflow : hidden;
  text-align : center;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  border: 1px solid #AAAAAA;
  padding : 5px;
  margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
  font-weight : bold;
  background-color: #FFFFFF;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
  float : left;
  padding-left : 10px;
  padding-right : 12px;
  border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
  color : #444444;
  text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
  width : auto;
  height : 1.5em;
  position : relative;
  overflow : hidden;
  text-align : left;
  margin-top : 0px;
  margin-left : 0px;
  padding-left : 10px;
}

/* オーバーレイの正しい動作をするようにする */
.gfg-horizontal-root .gfg-entry .gf-result {
  position : relative;
  background-color : white;
  width : 100%;
  height : 100%;
  line-height : 1.5em;
  overflow : hidden;
  white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
  display : none;
}

/*
* フィードコントロールのカスタマイズ
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
  display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
  color: #0000cc;
  margin-right : 3px;
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
  float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
  display : block;
  color: #AAAAAA;
}

.gfg-branding {
  white-space : nowrap;
  overflow : hidden;
  text-align : left;
  position : absolute;
  right : 0px;
  top : 0px;
  width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
  background-repeat : no-repeat;
  background-position : center;
  cursor : pointer;
  float : right;
  width : 17px;
  height : 20px;
}

.gfg-collapse-open {
  background-image : url('http://www.google.com/uds/css/arrow_close.gif');
}

.gfg-collapse-closed {
  background-image : url('http://www.google.com/uds/css/arrow_close.gif');
}

.gfg-collapse-href {
  float : left;
}

.clearFloat {
  clear : both;
}

</style>


<script src="http://www.google.com/jsapi/?key=notsupplied-wizard"
   type="text/javascript"></script>
  <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
   type="text/javascript"></script>

  <script type="text/javascript">
   function load() {
   var options = {
   numResults : 10, // 表示したい行数の指定(初期値は4)
   displayTime : 5000, // スクロール表示の時間設定（初期値は5000）
   fadeOutTime : 800, // フェードアウト時間(初期値は1000)
   scrollOnFadeOut : false, // スクロールフェイドアウトの設定(初期値はfalse)
   pauseOnHover : true, // マウスをポイントしたときに停止(初期値は false)
   linkTarget : google.feeds.LINK_TARGET_BLANK, //リンクのターゲット設定(初期値はSELF)
   horizontal : false, // horizontalモードを設定する(初期値はvertical)
   stacked : true, // stackedモードを設定する(初期値はvertical)
   title : 'タイトル' // フィードの（固定）タイトルの設定(初期値は回収したフィードのタイトル)
   }
   var feed = [
{title: 'インターネットラジオ', // 回収するフィードを増やす
  url: 'http://www.radio-oh.com/rdf/whatsnew.rdf'
},
{title: 'Jazz is..',
  url: 'http://www.radio-oh.com/rdf/jazzis.rdf'
}];
   new GFdynamicFeedControl(feed, "feedControl",options);

   }
   google.load("feeds", "1");
   google.setOnLoadCallback(load);
  </script>
</head>
<body>

  <div id="body">
   <div id="feedControl">Loading...</div>
  </div>

</body>
</html>