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.
- Google Web Elements.
- Dynamic Feed Control.
- Google AJAX Feed API Reference.
- Demo: http://www.google.com/uds/solutions/dynamicfeed/iframe.html
- The Dynamic Feed Control.
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> 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> 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/
Editor Blog
Klik kanan pada mouse di image cewek itu! Fokus pada opsi 
Lakukan perintah seperti sebelumnya (klik kanan pd img) ;)) Apakah yg terjadi sekarang? Perintah View Image berubah menjadi perintah 
Kode /s1600/ bisa kita mainkan dari s1 - s1600, yg berarti nilai nominal tersebut menandakan resolusi gambar yg terlihat.
Sobat melihat ada tulisan keren pada gambar itu? Yeah that's right, itu kreasi bidang yg Koben buat di photoshop :"> Like it
/*!
* jquery.jCouch. The jQuery Couch plugin
*
* Copyright (c) 2012 Arvind Bhardwaj
* http://webspeaks.in
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* Version : 0.1
*
* all CSS sizing (width,height) is done in pixels (px)
*/
(function(a){var b="";a.fn.jCouch=function(c){function f(){b.each(function(){a(this).show()});a("#couchBg").hide()}function g(b){if(typeof b!="undefined"&&a.trim(b)!=""){return true}return false}function h(a){return!isNaN(parseFloat(a))&&isFinite(a)}var d={target:"",amplify:0};var e=a.extend(d,c);a(this).click(function(){b=a(this);b.each(function(){a(this).hide()});if(a.trim(e.target)==""){return false}targets=e.target.split(",");var c='<div id="couchBg">';c+='<div id="couchToolbar"><a href="#" id="couchToolbar_Close" title="Switch to the original layout">[esc]</a></div>';c+='<div id="couchData"></div>';c+="</div>";a("body").append(c);a("#couchBg").show();if(g(e.bgColor)){a("#couchBg").css("background-color",e.bgColor)}if(g(e.width)){a("#couchData").css("width",e.width)}var d="";for(x in targets){var f=a(a(targets[x])).clone().wrap("<p>").parent().html();d+=f}a("#couchData").html(d);if(h(e.amplify)&&e.amplify>0){for(x in targets){var i=a("#couchData > "+targets[x]);var j=parseFloat(i.css("font-size"));var k=parseFloat(j)+parseFloat(j*e.amplify);i.css({"font-size":k+"px"})}}var l=parseFloat(a("body").height())+100;a("#couchBg").css("height",l+"px");a("html, body").animate({scrollTop:0},"slow")});a("#couchToolbar_Close").live("click",f);a(document).keyup(function(a){if(a.keyCode==27){f()}})}})(jQuery)