Membuat feed news keren

Ehemm sebenarnya ini aku pengen posting dah lama cuman baru ada yang request jadi baru aku tulis tapi yang pengen aku tulis agak beda juga sih cuman intinya sama bedanya hanyalah pada tampilan aja. maksud membuat feed news ini adalah kita dapat mengambil RSS feed dari berbagai Web biar gak ketinggalan berita, jadi setiap ada artikel baru anda akan langsung melihatnya pada kotak Rss Feed ini. kotak Rss feed ini aku cuman modif sedikit kontainernya pake css3 dengan desain simpel, ini Screenshotnya.



DEMO

Modelnya kayak begitu slide - slide gitu linknya.

1. Simpan kode css di bawah ini di atas kode ]]></b:skin>

.titlefield {
    text-decoration: none;
    color: #09F
    }
.titlefield:hover {
    text-decoration: underline
    }
.labelfield {
    color: brown;
    font-size: 90%
    }

.datefield {
    color: #333;
    font-size: 90%
    }

#data {
    width: 450px;
    height: 17px;
    border: 3px solid black;
    padding: 5px 5px;
    background-color: #CED0D1;
    margin: 5px auto;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    position: relative;
    overflow: hidden;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
    }

#data img {
    display: block;
    margin: 0 auto;
    text-align: center
    }

2. Simpan script di bawah ini di atas kdoe </head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js"></script>
<script type="text/javascript" src="http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js"></script>

3. Masukan kode Script di bawah ini ddalam Gadget HTML/Javascript

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("System", "http://zhinto.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Nah simpan deh tuh dan selesai untuk tampilannya atur sendiri jika kurang pas. ets jangan lupa ganti URL nya sama URL anda ya dan jika anda ingin mendapatkan Postingan Update dari blog lain anda Tinggal tambah kode yang seperti ini.

cssfeed.addFeed("System", "http://www.zhinto.blogspot.com/feeds/posts/default")

Jadi seperti ini nanti kodenya.

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("System", "http://zhinto.blogspot.com/feeds/posts/default")
cssfeed.addFeed("Blogazine", "http://blogazine7.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Begitu seterusnya jika anda ingin tambahkan web lainnya lagi, nah perhatikan kode 10 itu adalah jumlah tampilan judul postingnya anda bisa tentukan mau menampilkan berapa banyak judul postingan anda, semoga bermanfaat oh iya JS nya itu gak berat kok biar banyak begitu.