" 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 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.
0 comments:
Post a Comment