It's All About Google AJAX Dynamic Feed

Lucu juga maen ke web² yang notabene sudah memiliki nama di belantika dunia site. Komentar basa-basi (junk comments) tidak di approve, kasih komentar berupa kode² jg tidak di app? Apa saya datang dengan membawa subdomain??? Sehingga pertimbangan ini-itunya tidak pantas menampilkan komentar dari sub-domain 8-X We are blogger is powerful >:) Halah malah curcol :))
Seperti biasa tidak ada bahan untuk memosting, kali ini Koben akan mengangkat kembali postingan lawas Animation of the Headlines! Lebih dititikberatkan cara memasukan AJAX Dynamic Feed Control tanpa key api ke dalam blog.
Aplikasi menggunakan Google AJAX Feed API (Dynamic Feed Control) merupakan salah satu layanan paman google guna menampilkan headlines post dari link feed sebuah blog/web.

Pada blog ini contoh terpampang di halaman homepage. Koben ambil beberapa feed web, jadi bisa lihat update web tersebut ;))Berikut resource link buat belajar membikin dynamic feed google AJAX.

1. Google Web Elements.
2. Dynamic Feed Control.
3. Google AJAX Feed API Reference.
4. Demo: http://www.google.com/uds/solutions/dynamicfeed/iframe.html
5. The Dynamic Feed Control.

Lebih baik memang memakai API Key, agar full stylish gitoH. Tetapi tanpa itupun kita bisa membuatnya ;) Let's get do it...

Default Style

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

#feedControl {
margin-top : 10px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 12px;
color: #9CADD0;
}
</style>

<script type="text/javascript">
function load() {
var feed ="http://beben-koben.blogspot.com/feeds/posts/default";
new GFdynamicFeedControl(feed, "feedControl");

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

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

Bila mau melihat demo instannya, sikat kode ramuan, pastekan dalam Notepad, Save As Type blah-bleh-bloh.html
var feed isikan dengan feed tujuan. Special for blogger Look Feed Atom RSS (Autodiscovery)

Simple Customize Style

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<style>
#beben-koben {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #eee;
height:55px !important;
margin:0;
padding:5px 0 10px 10px;
color:#333;
background:rgba(93,155,223,.5);
overflow:hidden !important;
}
.gfg-title {
display:none
}
.gf-title a {
text-decoration:none
}
</style>    

<script type="text/javascript">
        var loadBlog = function() {

        var feeds = [
        {title: 'Tutorial blogger for stylish blogger',
         url: 'http://beben-koben.blogspot.com/feeds/posts/default'}
        ];

        var options = {
        stacked : false,
        horizontal : true,
        title : '',
        numResults : 15,
        displayTime : 5000,
        fadeOutTime: 500
        };

        new GFdynamicFeedControl(feeds, 'beben-koben', options);
        };

        google.load('feeds', '1');
        google.setOnLoadCallback(loadBlog);
</script>

<div id="beben-koben"></div>

numResults : 15 jumlah post yg tampil.
Kalau sudah bisa, lumayan kita bisa membuat beginian From Google for Blogers :-bd

Live Demo

BONUS:
http://www.javascriptkit.com/dhtmltutors/googleajaxfeed2.shtml
http://www.dynamicdrive.com/dynamicindex18/gajaxrssdisplayer.htm
http://www.dynamicdrive.com/dynamicindex2/sagscroller.htm
http://www.dynamicdrive.com/dynamicindex18/gajaxrssticker.htm
http://www.dynamicdrive.com/dynamicindex18/gajaxpausescroller.htm
http://www.dynamicdrive.com/dynamicindex17/ajaxsidepanel.htm
http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml
http://www.javascriptkit.com/dhtmltutors/googleajaxfeed.shtml
Happy feed google \m/