Smooth Scrolling RSS Feed with Ajax

Anda lihat menu Free Download di sidebar kanan blog ini ? itu adalah RSS Feed dari blog Berbagi File Gratis. Bagaimana menampilkan RSS Feed dengan cara scrolling seperti itu ? Dengan marquee ? Bukan, tapi dengan Ajax Feed RSS.

Jika anda tertarik untuk membuat menu serupa (khusus untuk blogspot), yang harus anda persiapkan adalah :

1. Buat Api Key

Caranya : buka code.google.com dan cari Signup for an API Key (login dengan account google kita).



Beri tanda centang pada I have read and.... dan masukkan nama blog kita di tempat yang telah tersedia. Klik tombol Generate Api Key.



Akan muncul Google Api Key untuk Blog yang kita daftarkan. Catat dan simpan baik-baik Key tersebut (kopi paste ke Notepad).



2. file gfeedfetcher.js, Download dan upload di hosting anda sendiri. sebenarnya anda bisa juga menggunakan file punya saya, namun kerugiannya, jika file tersebut tidak bisa diakses maka RSS Feed yang anda buat tidak berfungsi.

3. file gajaxscroller.js, download dan upload di hosting anda sendiri. cara download: klik kanan link nama file dan save link as...

Sekarang kita siap untuk membuat Menu Ajax Feed RSS.

1. Masuk ke Dashboard blogger, Layout dan klik tab Edit HTML pada blog kita. Masukkan kode berikut SEBELUM </head>

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>

<script src='http://mirabewe.890m.com/wp-content/upload/gfeedfetcher.js' type='text/javascript'/>
<script src='http://mirabewe.890m.com/wp-content/upload/gajaxscroller.js' type='text/javascript'>

/***********************************************
* gAjax RSS Feeds Displayer- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type='text/css'>

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1{ /*Demo 1 main container*/
width: 90%;
height: 30px;
border: 1px solid black;
padding: 4px;
background-color: lightyellow;
}

#example2{ /*Demo 2 main container*/
width: 600px;
height: 180px;
border: 1px dashed black;
padding: 4px;
background-color: #EEEEEE;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}

#example3{ /*Demo 3 main container*/
width: 250px;
height: 280px;
border: 1px solid navy;
padding: 4px;
}

#example3 div p{ /*Demo 3 P element that separates each entry*/
margin-top: 0;
margin-bottom: 7px;
}

code{ /*CSS for insructions*/
color: red;
}

</style>

Ganti YOUR-API-KEY dengan API Key yang tadi kita buat.

Jika anda menyimpan file gfeedfetcher.js dan gajaxscroller.js di hosting sendiri, ganti http://mirabewe.890m.com/wp-content/upload/ dengan alamat dimana anda menyimpan file tersebut, jika tidak, abaikan saja.

Simpan hasil kerja kita.

Langkah terakhir adalah menambahkan elemen html/javascript pada blog dimana kita ingin tulisan scrolling dengan AJAX feed rss ini muncul.

Masukkan kode berikut dalam elemen HTML/Javascript :

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
cssfeed.addFeed("Judul", "http://filegratis2u.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(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Ganti http://filegratis2u.blogspot.com/feeds/posts/default dengan alamat RSS blog yang ingin ditambahkan, misalnya blog kita yang lain atau bisa juga alamat RSS situs berita seperti Detik, Antara, dan lain-lain.