Posting Baru di Omasae.com

Untuk hasil yang di atas, berikut adalah kode yang digunakan:

HTML :


<ul id="rPO"></ul>

Anda bisa menambahkan css berikut ini untuk mengatur tampilannya. Untuk yang dishare di sini, ditambahkan keterangan yang menunjukkan fungsinya, agar bisa digunakan sebagai pelajaran, bagi yang membutuhkan.

<style>

ul#rPO { list-style: none; margin: 0; padding: 0; } li.rPO { display: block; clear: both; overflow: hidden; list-style: none; border-bottom: 1px solid #e3e3e3; word-break: break-word; padding: 10px 0; margin: 0; } li.rPO:last-child { border-bottom: 0; } li.rPO a { color: #444; } li.rPO a:hover { color: #44a; }

</style>

Keterangan:
Baris 1-11: Mendefinisikan style untuk elemen ul#rPO dan li.rPO. list-style: none digunakan untuk menghilangkan tampilan default daftar, margin: 0 dan padding: 0 digunakan untuk menghilangkan margin dan padding default, display: block digunakan untuk membuat elemen li menjadi block-level, clear: both digunakan untuk menghindari floating pada elemen sebelumnya, overflow: hidden digunakan untuk menghindari overflow pada elemen, border-bottom: 1px solid #e3e3e3 digunakan untuk menambahkan border bawah pada setiap elemen li, word-break: break-word digunakan untuk memisahkan kata yang panjang sehingga tidak keluar dari kotak elemen, padding: 10px 0 digunakan untuk memberikan padding atas dan bawah pada elemen, margin: 0 digunakan untuk mengatur margin menjadi 0.
Baris 12-13: Menambahkan style pada elemen terakhir pada daftar untuk menghilangkan border bawah.
Baris 14-16: Mendefinisikan style untuk elemen a yang berada dalam elemen li.rPO. color: #444 digunakan untuk memberikan warna pada teks, color: #44a digunakan untuk memberikan warna pada teks ketika cursor berada di atas link.

Dan inilah javascript yang diterapkan untuk menjalankan program ini.

Javascript :

  
<script>
var nPo = 8;
// Variabel untuk menyimpan jumlah postingan yang akan ditampilkan.

function rP(a){
// Fungsi untuk menampilkan postingan.
if(document.getElementById("rPO")){
// Jika element dengan id "rPO" ditemukan pada halaman, maka:
var e=a.feed.entry,title,link,content="",ct=document.getElementById("rPO");
// Variabel e digunakan untuk menyimpan isi dari feed postingan, sedangkan variabel title, link, dan content akan digunakan nanti.
// Variabel ct digunakan untuk menyimpan element dengan id "rPO".
for(var i=0;i<nPo;i++){
  // Looping untuk menampilkan postingan sebanyak nilai yang disimpan pada variabel nPo.
  
  for(var j=0;j<nPo;j++){
    // Looping untuk mengecek tautan alternatif dari postingan.
    
    if(e[i].link[j].rel=="alternate"){
      // Jika tautan alternatif ditemukan, maka:
      link=e[i].link[j].href;
      break;
    }
  }
  
  var title=e[i].title.$t;
  // Mengambil judul postingan dan menyimpannya pada variabel title.
  
  content+='<li class="rPO"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'
  // Membuat tampilan postingan dalam bentuk daftar.
}

ct.innerHTML=content
// Mengganti isi dari element dengan id "rPO" dengan daftar postingan yang sudah dibuat sebelumnya.
}
}

var rcp=document.createElement('script');
rcp.src='https://www.omasae.com/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+nPo+'&callback=rP';
document.getElementsByTagName('head')[0].appendChild(rcp);
// Membuat element script dan menambahkannya pada head dokumen HTML.
// Script ini berfungsi untuk memuat data feed postingan dan memanggil fungsi rP untuk menampilkan data tersebut.
</script>