BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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.

Page views this post: reader

22 komentar:

Anonymous said...

Tulisan artikel di blog Anda bagus-bagus. Agar lebih bermanfaat lagi, Anda bisa lebih mempromosikan dan mempopulerkan artikel Anda di infoGue.com ke semua pembaca di seluruh Indonesia. Salam Blogger!
http://www.infogue.com/
http://www.infogue.com/software/menampilkan_recent_post_atau_judul_artikel_dengan_ajax_feed_rss/

Kristina Dian Safitry said...

aku jadi ikut ikutan penasaran deh,he..he..

W2n Project said...

Mantap!!!!!

Jaloee said...

mkasih semuanya :)

RONGGO TUNJUNG ANGGORO said...

mas jaloooe gi mana cara manampilkan kode skrip dan kode tersebut bukan merupakan teks dan tetap seperti asli nya klo di copy, binggung kan aku aja yang nanya binggung buat kalimatnya

Khoerul MW said...

Thank for the post
very usefull

Ihsan said...

Hurrah.. akhirnya berhasil juga nyoba tipsnya, Big Thanks suhu, feednya ane pasang gpp khan :), o.iya link balik mas :)

Andi Kurniawan said...

bagus banget

Anonymous said...

ternyata link sign upnya disini mas: http://code.google.com/apis/ajaxfeeds/key.html

tipsnya bagus banget! masih disini untuk belajar :)

Jaloee said...

@ Rumah Islami

makacih atas kunjuganya :)

Anonymous said...

tipsnya oke banget!

Unknown said...

Walopun sedikit bingung, tp bs jga mas

mahawira said...

kira-kira ngeberratin loading blog gak tuh?

Jaloee said...

@ mhawira : yaa rada beratlah

Unknown said...

saya dah coba dan hasilnya mantap!!!!
tapi ada pertanyaan ni mas, pa bisa kita letakkan 2 jenis feed yg berbeda pada 1 widget saja (misal: feed blog sendiri dan feed website OkeZone)? pasti bisa dunk.. situ kan master......hehehe
gimana caranya ya?

Unknown said...

comen lg, nanya lagi..
mas, recent nya terkadang muncul, terkadang enggak. apa sebabnya ya?

Unknown said...

oya, kelupaan.
widgetnya (kode nya) saya gabungkan dengan kode lain di bawah kotak pencarian google.

kpmmjogja.com said...

Artikel menarik!

riefjournal said...

Mantep Gan informasinya. udah bisa diterapkan di blog ane.trims.

suraduja said...

wah bagus, udah saya pasang di blog saya, saya follow ya blognya

Anie Imuetz said...

Yang aku heran kenapa bisa blog nya mas ini tanggal 20 Feb 2011 tetapi ko komentar yang dah ada tanggalnya 2010? ajarin dong mas....

Keretaminiku.Com said...

wahh..makasih info kang.. sangat bermanfaat

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial