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>
Posting Komentar