Menampilkan Recent Post Atau judul artikel dengan ajax feed Rss

" Mas saya tertarik dengan " berita online " ( recent post. red ) yang bisa berpindah-pindah gitu. gimana cara buatnya "

Demikianlah  pertanyaan saudara Anggoro, yang masuk melalui kotak komentar dan mas ini juga pernah tanya lewat shoutbox.

Jika anda bloem mengerti dengan maksud  ketertarikan mas yang bertanya itu silahkan klik saja di sini Demo.

Dan saudara akan melihat Recent Post dari judul artikel yang bergerak-gerak atau berpindah-pindah seperti memakai kode Marquee, Tapi ini lebih halus dan Ciamikkk tenan.

Untuk memasangnya ke dalam blog, kita harus mempunyai Google's Ajak Feed Api, yang bisa kita dapatkan  di group-nya google. untuk langkah-langkahnya bisa anda ikuti di bawah ini

Langkah Pertama : Daftar untuk memiliki API Key.

Buka code.google.com kemudian klik tulisan Sign up for an Api Key. ( jika ada pertanyaan untuk login, gunakan google akun milik kita )

Setelah itu terbuka jendela agreement . tandai ( cekbox ) -> kemudian masukan nama blog kita dan klik tombol Generate Api Key.

Langkah Kedua : Menyimpan kode Api Key.

Simpan di komputer kita kode Api Key. di bawah tulisan Your key is: atau untuk lengkapnya cari di kolom tulisan Here is an example web page to get you started:

Contoh na seperti  alamat Api Key yang saya miliki ini.

http://www.google.com/jsapi?key=ABQIAAAAlH2AVYF2BpHOrr
BUiKTxqhQOjbF87P1Hq2IQKvgir1U9QH77mBQf6a3JQmBlj24agls_bXW0mAUxyg

Langkah Ketiga : Memasukan Kode Css Dan JSON file.

Buka blog kita pada halaman Template pilih tab Edit Html kemudian di atas kode/ tag penutup. 

</head>

simpan kode  ini.

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

<script src='http://jaloee.googlepages.com/gfeedfetcher.js' type='text/javascript'/>
<script src='http://jaloee.googlepages.com/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>

Kemudian ganti tulisan ini :

http://www.google.com/jsapi?key=YOUR-API-KEY

dengan alamat dan kode API KEY yang kita miliki .

Setelah beres dengan pekerjaanya Klik tab Simpan Template 

Langkah Keempat : Menambah Elemen Html/JavaScript

buka tab Elemen Halaman kemudian dalam penambahan elemen pilih elemen Html /JavaScript.

setelah itu masukan kode ini.


<script type="text/javascript">
var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new")
cssfeed.addFeed("Judul", "http://www.namakamu.blogspot.com/rss.xml ") //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>

a. " Judul"

merupakan tulisan yang akan kelihatan di ujung tulisan ( ganti dengan nama kita atau nama blog misal : Nyahooo

b. http://www.namakamu.blogspot.com/rss.xml

merupakan alamat feed ,  ( ganti dengan alamat feed kita alamat feed komentar atau  bisa juga alamat feed media berita seperti Detik, Republika, Atau bisa juga alamat Feed blog ini - http://catalog-tutorial.blogspot.com/rss.xml . halah promosi.

c. "Date" :

menunjukan  tanggal  yang akan ditampilkan . (  jika kita  ingin menampilkan sunber beritanya tulis "Label". dan Jika kita ingin menampilkan sumber berita, tanggal berikut waktunya tulis saja "Label Datatime"

d. 10, "date" :

menunjukan jumlah Feed yang akan di tampilkan. dan pengurutanya berdasarkan waktu/tanggal.

Cari di sumber tutorial.

Untuk menambah variasi lain dari cara menampilan feed atau judul artikel di atas kita dapat mengaksesnya di www.dynamicdrive.com

Alamat Feed KIta.

Alamat Feed yang kita miliki ada banyak.

1. http://namakamu.blogspot.com/rss.xml
2. http://namakamu,blogspot.com/atom.xml
3. http://feeds.feedburner.com/namafeedmu
4. http://namakamu.blogspot.com/feeds/comments/default?alt=rss (feed untuk komentar).

Alamat feed media berita di tanah air.

1.http://feeds.feedburner.com/detikfoto
2.http://feeds.feedburner.com/tempophoto
3.http://feeds.feedburner.com/Detikcom
4.http://feeds.feedburner.com/Kompascom
5.http://feeds.feedburner.com/Detikinet
6.http://feeds.feedburner.com/Gempa/Besar
7.http://feeds.feedburner.com/Bencana

Atau googling saja, cari feed yang lainnya.

del.icio.us tags: Recent Post, Feed, Tutorial New Blogger

Technorati tags: Recent post, feed, Tutorial new Blogger

Page views this post: reader