Wednesday, February 23, 2011

Membuat Random Post di Blogspot

Ini tutorial lanjutan dari bagaimana memahami feed di blogspot.

Berikut ini hasil akses dari halaman web:
http://kholimi-id.blogspot.com/feeds/posts/summary?max-results=0

<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?>
<feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' xmlns:thr='http://purl.org/syndication/thread/1.0'>
<id>tag:blogger.com,1999:blog-5818822840330720016

<updated>2011-02-16T21:08:12.251+07:00</updated>

<title type='text'>ali sofyan kholimi at id</title>

<subtitle type='html'>Computer Science, Humanity and Religion Contemplation</subtitle>

<link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://kholimi-id.blogspot.com/feeds/posts/summary'/>
<link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/5818822840330720016/posts/summary?alt=atom&max-results=0'/>
<link rel='alternate' type='text/html' href='http://kholimi-id.blogspot.com/'/>
<link rel='hub' href='http://pubsubhubbub.appspot.com/'/>

<author>
 <name>kholimi</name>
 <email>noreply@blogger.com</email>
</author>

<generator version='7.00' uri='http://www.blogger.com'>Blogger</generator>

<openSearch:totalResults>157</openSearch:totalResults>
<openSearch:startIndex>1</openSearch:startIndex>
<openSearch:itemsPerPage>0</openSearch:itemsPerPage>

</feed>

Dari hasil feed yang ditampakkan di atas, ada beberapa informasi penting yang diberikan. Mulai dari judul blog, kapan blog terakhir di-update, pemilik blog, hingga jumlah posting pada blog tersebut.

Informasi yang biasa saya gunakan adalah informasi jumlah posting yang diberikan melalui tag openSearch:totalResults yang pada hasil di atas menunjukkan sejumlah 157 posting. Informasi ini nantinya saya gunakan untuk menampilkan daftar posting secara acak dengan cara mengacak nilai antara 1 hingga jumlah posting.

Sebelumnya, coba dulu program sederhana ini yang menampilkan bilangan acak antara 1 sampai dengan jumlah posting anda. Simpan saja dengan namafile.html. Jangan lupa, kalau mencoba harus tersambung dengan internet agar bisa mengakses blog anda di Blogspot.

<html>
<head> </head>

<body>

<div id="myLuckyPost"></div>
<script type="text/javascript">
function feelingLucky(root){
 var feed = root.feed;
 var total = parseInt(feed.openSearch$totalResults.$t,10);
 var luckyNumber = Math.floor(Math.random()*total);

 document.getElementById('myLuckyPost').innerHTML = luckyNumber;
}
</script>
<script src="http://kholimi-id.blogspot.com/feeds/posts/summary?max-results=1&alt=json-in-script&callback=feelingLucky"></script>

</body>
</html>

Program di atas berjalan dengan menjalankan fungsi feelingLucky yang dipanggil melalui callback. Fungsi feelingLucky ini mendapat input feed bertipe JSON. Di sini digunakan JSON karena secara pemrograman, JSON lebih mudah daripada Atom maupun RSS.

Kemudian program di atas mengambil data jumlah posting pada feed.openSearch$totalResults.$t. Kok ada variabel t di sini ya? Pada tipe feed Atom di atas, memang variabel ini tidak muncul, tapi pada feed JSON akan muncul.

Update:
Source code lengkap Random Post di Blogspot. 

4 comments:

  1. Salam, Mas Kholimi, saya bingung cara masangnya, terus kode random yang di atas itu dipasang dimana? terima kasih

    ReplyDelete
  2. Maaf, artikel ini memang bagian pertama dari tiga artikel yang akan saya tulis.

    Jika anda mencari code yang langsung bisa dipakai di blogspot, maka tutorial ini bukan tutorial yang tepat.

    ReplyDelete
  3. Mas Khilimi, pengen nyoba masang nih. bisa ditunjukin ga step-by-stepnya?

    ReplyDelete