gAjax RSS Pausing Scroller

Judul aneh diatas saya temukan di situs www.dynamicdrive.com, yang maksudnya untuk menampilkan cssfeed dari beberapa media yang online. Di situs ini anda akan disuguhi tiga demo sekaligus, yang mana masing-masing demo berisikan rssfeed dari Yahoo News, BBC dan MSNBC. Sedangkan untuk di Indonesia mungkin anda bisa mendapatkan di Republika Online ( info ini saya dapat setelah ngintip kode sumber halaman dari blognya kang Jalooe.... untuk kang Jalooe, sorry ya.... semua saya lakukan demi komunitas Blogger ).

Namun sebelum kita memasang gAjax RSS Pausing Scroller (hosted) ini, kita harus mempunyai "Google AJAX Feed API key", mengingat kode ini harus terpasang nantinya dibagian head. Disini saya akan menjelaskan sesuai pengalaman yang sudah saya lakukan.

Silahkan anda Sign Up untuk mendapatkan "Google AJAX Feed API Key".
Perhatikan gambar dibawah ini, dan kerjakan sesuai gambar :


Setelah menekan "Generate API Key", kita akan dihadapkan pada halaman yang mencatumkan kode "Google AJAX Feed API key" dari URL blog yang kita daftarkan, berikut dengan contoh pemasangan kode tersebut. Coba perhatikan gambar dibawah ini :


Silahkan Copy paste kode yang saya kotak merah pada notepad.

Dalam situs www.dynamicdrive.com kita diminta untuk mendowload "gajaxscroller.js" dan "gfeedfetcher.js" kemudian silahkan upload di situs dimana kita menyimpan file secara online.
Namun bila anda malas mengerjakannya, disini sudah saya siapkan url dari kedua file JS tersebut.

Setelah kita masuk Blogger, backup dulu template anda dan jangan mencentang "Expand Template Widget"

Masukkan kode berikut di atas kode </head>( Disini ada tiga pilihan demo,Pilih salah satu sesuai selera. Sengaja saya cantumkan semua agar bisa dipilih ) :

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gfeedfetcher.js"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* 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: 450px; 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>


Selanjutnya tinggal menempatkan kode HTML dalam bagian body, berdasarkan pengalaman saya memilih demo3 yang saya letakkan di sidebar melalui tambah elemen "HTML/Javacript"

Ini adalah kode Example/ demo - 1 :

<script type="text/javascript"> var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new") cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //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>


Example 2:

<script type="text/javascript"> var socialfeed=new gfeedpausescroller("example2", "example2class", 3000, "") socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed socialfeed.displayoptions("label datetime") //show the specified additional fields socialfeed.setentrycontainer("li") //Display each entry as a DIV socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label socialfeed.entries_per_page(5) socialfeed.init() //Always call this last </script>


Example 3:

<script type="text/javascript"> var newsfeed=new gfeedpausescroller("example3", "example3class", 2500, "_new") newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed newsfeed.displayoptions("datetime snippet") //show the specified additional fields newsfeed.setentrycontainer("p") //Display each entry as a paragraph newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date newsfeed.entries_per_page(2) newsfeed.init() //Always call this last </script>

Perhatikan dari masing-masing kode HTML yang tercetak tebal adalah letak penempatan dari Feed yang kita pasang.

Dan dibawah ini adalah contoh pemasangan feed untuk Republika On line, yang ditempatkan langsung pada saat Edit HTML pada bagian <body> .

<p><script type='text/javascript'>

var cssfeed=new gfeedrssticker("example10", "example10class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://feedproxy.google.com/republika") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("") //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></p>

Silahkan and bereksperimen dengan masing-masing demo, dan atur ukuran width dan heightnya disesuaikan kondisi ruang body template anda. Ingat !!! salah satu demo yang dipasang pada template kita.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

teks berwarna merah diatas adalah tempat kode "Google AJAX Feed API key", ganti kodenya dengan milik anda.

Untuk melihat demonya, kunjungi situs di atas atau anda dapat melihat hasilnya di situs Kang Jaloe untuk demo 1 dan disini pada sidebar untuk demo 3.

Semoga bermanfaat