Update RSS Feed with Google Blog Bar Style

Kemarin-kemarin postingannya kan mengenai javascript, sekarang bagaimana kita menggunakan salah satu fasilitas google yang menggunakan script ;)) Si bloglang anu ganteng kalem tea alias Beben Koben mau berbagi cara bagaimana membuat berita up to date ala Google AJAX APIs Blog. Salah satu contoh mungkin yang sudah familiar and diterapkan pada blog yaitu All About Blogger Blogspot :-" Untuk menggunakan fitur ini sobat sudah harus punya apa yg dinamakan dengan API KEY. Kalau yg mau instant sobat bisa look on News Bar Wizard ;)) Seperti itulah yg akan Beben bagi disini nanti sob, tapi harus punya API KEY yah, cara mendapatkan api-key bisa dibaca Google API Key.

Sekarang perhatikan dengan seksama struktur dari News Update Feeds Post berikut:

<script src='http://www.google.com/jsapi?key=YOUR-API-KEY-ADD-HERE'></script>

<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image = "indicator.gif";
google.load("feeds", "1");

function gfeedfetcher(c, a, b) {
  this.linktarget = b || "";
  this.feedlabels = [];
  this.feedurls = [];
  this.feeds = [];
  this.feedsfetched = 0;
  this.feedlimit = 5;
  this.showoptions = "";
  this.sortstring = "date";
  document.write('<div id="' + c + '" class="' + a + '"></div>');
  this.feedcontainer = document.getElementById(c);
  this.itemcontainer = "<li>"
}
gfeedfetcher.prototype.addFeed = function (b, a) {
  this.feedlabels[this.feedlabels.length] = b;
  this.feedurls[this.feedurls.length] = a
};
gfeedfetcher.prototype.filterfeed = function (b, a) {
  this.feedlimit = b;
  if (typeof a != "undefined") {
      this.sortstring = a
  }
};
gfeedfetcher.prototype.displayoptions = function (a) {
  this.showoptions = a
};
gfeedfetcher.prototype.setentrycontainer = function (a) {
  this.itemcontainer = "<" + a.toLowerCase() + ">"
};
gfeedfetcher.prototype.init = function () {
  this.feedsfetched = 0;
  this.feeds = [];
  this.feedcontainer.innerHTML = '<img src="' + gfeedfetcher_loading_image + '" /> Retrieving RSS feed(s)';
  var a = this;
  for (var b = 0; b < this.feedurls.length; b++) {
      var c = new google.feeds.Feed(this.feedurls[b]);
      var d = (this.feedlimit <= this.feedurls.length) ? 1 : Math.floor(this.feedlimit / this.feedurls.length);
      if (this.feedlimit % this.feedurls.length > 0 && this.feedlimit > this.feedurls.length && b == this.feedurls.length - 1) {
          d += (this.feedlimit % this.feedurls.length)
      }
      c.setNumEntries(d);
      c.load(function (e) {
          return function (f) {
              a._fetch_data_as_array(f, e)
          }
      }(this.feedlabels[b]))
  }
};
gfeedfetcher._formatdate = function (a, c) {
  var d = new Date(a);
  var b = (c.indexOf("datetime") != -1) ? d.toLocaleString() : (c.indexOf("date") != -1) ? d.toLocaleDateString() : (c.indexOf("time") != -1) ? d.toLocaleTimeString() : "";
  return "<span class='datefield'>" + b + "</span>"
};
gfeedfetcher._sortarray = function (a, b) {
  var b = (b == "label") ? "ddlabel" : b;
  if (b == "title" || b == "ddlabel") {
      a.sort(function (e, d) {
          var g = e[b].toLowerCase();
          var f = d[b].toLowerCase();
          return (g < f) ? -1 : (g > f) ? 1 : 0
      })
  } else {
      try {
          a.sort(function (e, d) {
              return new Date(d.publishedDate) - new Date(e.publishedDate)
          })
      } catch (c) {}
  }
};
gfeedfetcher.prototype._fetch_data_as_array = function (b, a) {
  var d = (!b.error) ? b.feed.entries : "";
  if (d == "") {
      alert("Google Feed API Error: " + b.error.message)
  }
  for (var c = 0; c < d.length; c++) {
      b.feed.entries[c].ddlabel = a
  }
  this.feeds = this.feeds.concat(d);
  this._signaldownloadcomplete()
};
gfeedfetcher.prototype._signaldownloadcomplete = function () {
  this.feedsfetched += 1;
  if (this.feedsfetched == this.feedurls.length) {
      this._displayresult(this.feeds)
  }
};
gfeedfetcher.prototype._displayresult = function (a) {
  var e = (this.itemcontainer == "<li>") ? "<ul>\n" : "";
  gfeedfetcher._sortarray(a, this.sortstring);
  for (var c = 0; c < a.length; c++) {
      var d = '<a href="' + a[c].link + '" target="' + this.linktarget + '" class="titlefield">' + a[c].title + "</a>";
      var b = /label/i.test(this.showoptions) ? '<span class="labelfield">[' + this.feeds[c].ddlabel + "]</span>" : " ";
      var g = gfeedfetcher._formatdate(a[c].publishedDate, this.showoptions);
      var f = /description/i.test(this.showoptions) ? "<br />" + a[c].content : /snippet/i.test(this.showoptions) ? "<br />" + a[c].contentSnippet : "";
      e += this.itemcontainer + d + " " + b + " " + g + "\n" + f + this.itemcontainer.replace("<", "</") + "\n\n"
  }
  e += (this.itemcontainer == "<li>") ? "</ul>" : "";
  this.feedcontainer.innerHTML = e
};
var gfeedfetcher_loading_image = "indicator.gif";

function gfeedrssticker(d, b, a, c) {
  this.tickerid = d;
  this.delay = parseInt(a);
  this.mouseoverBol = 0;
  this.itemsperpage = 1;
  this.messagepointer = 0;
  gfeedfetcher.call(this, d, b, c);
  this.itemcontainer = "<div>";
  this.tickerdiv = document.getElementById(d)
}
gfeedrssticker.prototype = new gfeedfetcher;
gfeedrssticker.prototype.constructor = gfeedrssticker;
gfeedrssticker.prototype._displayresult = null;
gfeedrssticker.prototype.entries_per_page = function (a) {
  this.itemsperpage = a
};
gfeedrssticker.prototype._signaldownloadcomplete = function () {
  this.feedsfetched += 1;
  if (this.feedsfetched == this.feedurls.length) {
      this._initscroller(this.feeds)
  }
};
gfeedrssticker.prototype._initscroller = function (a) {
  var c = this;
  gfeedfetcher._sortarray(a, this.sortstring);
  this.itemsperpage = (this.itemsperpage >= a.length) ? 1 : this.itemsperpage;
  var b = a.slice(this.messagepointer, this.itemsperpage);
  this.tickerdiv.innerHTML = formatrssmessage(b, this.showoptions, this.itemcontainer, this.linktarget);
  this.tickerdiv.onmouseover = function () {
      c.mouseoverBol = 1
  };
  this.tickerdiv.onmouseout = function () {
      c.mouseoverBol = 0
  };
  this.messagepointer = this.itemsperpage;
  if (window.attachEvent) {
      window.attachEvent("onunload", function () {
          c.tickerdiv.onmouseover = c.tickerdiv.onmouseout = null
      })
  }
  setTimeout(function () {
      c._rotatemessage()
  }, this.delay)
};

function formatrssmessage(d, b, f, g) {
  var c = (f == "<li>") ? "<ul>\n" : "";
  for (var e = 0; e < d.length; e++) {
      var h = '<a href="' + d[e].link + '" target="' + g + '" class="titlefield">' + d[e].title + "</a>";
      var j = /label/i.test(b) ? '<span class="labelfield">[' + d[e].ddlabel + "]</span>" : " ";
      var k = gfeedfetcher._formatdate(d[e].publishedDate, b);
      var a = /description/i.test(b) ? "<br />" + d[e].content : /snippet/i.test(b) ? "<br />" + d[e].contentSnippet : "";
      c += f + h + " " + j + " " + k + "\n" + a + f.replace("<", "</") + "\n\n"
  }
  c += (f == "<li>") ? "</ul>\n" : "";
  return c
}
gfeedrssticker.prototype._rotatemessage = function () {
  var b = this;
  if (this.mouseoverBol == 1) {
      setTimeout(function () {
          b._rotatemessage()
      }, 100)
  } else {
      var a = this.feeds.slice(this.messagepointer, this.messagepointer + this.itemsperpage);
      this.tickerdiv.innerHTML = formatrssmessage(a, this.showoptions, this.itemcontainer, this.linktarget);
      this.messagepointer = (this.messagepointer + this.itemsperpage > this.feeds.length - 1) ? 0 : this.messagepointer + this.itemsperpage;
      setTimeout(function () {
          b._rotatemessage()
      }, this.delay)
  }
};
//]]>
</script>

<div style='float:left;padding:5px;font:bold 15px Arial;color:#333;text-transform:none;'>
News Update :
</div>

<div style='float:left;width:900px;padding:3px 0;position:relative;overflow:hidden;'>

<script type='text/javascript'>
//<![CDATA[
var cssfeed=new gfeedrssticker("rssFeed", "RSSFeedClass", 3000, "_new")
cssfeed.addFeed("Prodigy of Head", "http://beben-koben.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(15, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
//]]>
</script>

</div>

Tuh kan, panjang bumbu²nya!!! Untuk lebih mudah dan memang minat mau dipakai trik tersebut, coba sobat sekarang buka Notepad. Kopi semua tuh bumbu, dengan menggantikan/mengisi YOUR-API-KEY-ADD-HERE sobat dan mengganti link blog http://beben-koben.blogspot.com Sudah!!! Langkah selanjutnya...

Ini bisa diganti dengan image loading indicator.gif. Pilih File ► Save As ► Save as type: Choose All Types (*.*) ► Isikan File Name dengan TesRss.html. Nama boleh apa saja yg penting ekstensionnya itu loh .HTML!!!
Seperti itulah news update gaya blog bar google bos :) Kalau mau edit² tinggal pake CSS karya sobat masing² ;) Be kreatif pokoknnya mah lah...Kalau mau lihat demo yg sudah terpasang pada blog buka...http://bloggerbiasa.blogspot.com/ lihat di bagian bawah header dengan tulisan:

News Update :

Jika mau alternatif lain, bisa satroni halaman berikut RSS driven jQuery dynamic news slider plugin. Keren dengan gaya slider menyamping kalau yang ini ;)

Happy pusing \m/