Tugas dan Catatan Sekolah: Cara Menampilkan semua Posting, bukan cuma sebanyak 150

Berikutnya adalah menampilkan semua Posting, bukan cuma sebanyak 150.

Ini adalah contoh hasilnya, dan dilanjutkan dengan memberikan code yang digunakan.

Kode yang diberikan digunakan untuk membuat sebuah widget (atau komponen) yang menampilkan daftar postingan (atau artikel) dari sebuah blog atau situs web. Widget ini akan menampilkan judul postingan, cuplikan isi, dan tautan menuju postingan tersebut.

Fungsi utama dari kode ini adalah untuk mengambil data postingan dari feed atau sumber RSS (melalui URL) dan menampilkannya dalam bentuk daftar pada halaman web. Fungsi gp() mengambil data feed dari sumber RSS, sedangkan fungsi dp() mengambil data feed dan mengekstrak informasi yang diperlukan untuk menampilkan daftar postingan.

Berikut contoh hasilnya:

Total Posts: 1444

Berikut adalah kode yang digunakan untuk menghasilkan tampilan seperti di atas.

Pertama, fungsi gp() membuat elemen <script> dan mengatur sumbernya menjadi URL feed RSS dengan parameter yang sesuai untuk mengambil data postingan. Kemudian, elemen <script> ini disisipkan ke dalam elemen <body> menggunakan metode appendChild(), sehingga data feed dapat diambil dan diproses oleh fungsi dp() ketika feed sudah diunduh.

Cara Menampilkan semua Posting, bukan cuma sebanyak 150

Sebagaimana contoh hasil tampilan semua posting di blog ini. Ditampilkan ada lebih dari seribu post. Sesuai banyaknya posting yang dipublikasikan. Tidak hanya sebanyak 150. Untuk memasang di blog anda, tinggal copy paste code yang di tampilkan di bawah ini. Semoga berguna.

Kode yang dipasang adalah sebagai berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109

<style>
.nu {
  background: #eff8fb;
  font-size: 115%;
  list-style-type: none;
  counter-reset: i;
  max-width: 660px;
  padding: 0;
  margin: 0 auto;
}

.nu a:hover {
  text-decoration: none;
}

.nu li p {
  padding: 6px 1.6em;
  margin: 0;
  text-indent: -1.14em;
}

.nu li:nth-child(odd) {
  background: #fffefd;
}

.nu li:nth-child(odd):hover,
.nu li:hover {
  background: #f4fff6;
}

.nu li div {
  margin: 0;
  line-height: 1em;
}

.nu li p:before {
  content: counter(i) ". ";
  counter-increment: i;
}
</style>

<script>
// inisialisasi variabel s dengan nilai 1
var s = 1;
// inisialisasi variabel m dengan nilai 150
var m = 150;
// inisialisasi array kosong p
var p = [];

// fungsi gp digunakan untuk memuat feed posts dari blog
function gp() {
    // membuat elemen script
    var sc = document.createElement('script');
    // menentukan sumber script dengan memuat feed posts dari blog
    sc.src = '/feeds/posts/summary?alt=json&callback=dp&start-index=' + s + '&max-results=' + m;
    // menambahkan elemen script ke dalam body HTML
    document.body.appendChild(sc);
}

// fungsi dp digunakan untuk menampilkan feed posts ke dalam HTML
function dp(root) {
    // mencari elemen dengan id 'sm4'
    var e = document.getElementById('sm4');
    // jika elemen tidak ditemukan, keluar dari fungsi
    if(!e) return;
    // kosongkan isi elemen 'sm4'
    e.innerHTML = '';
    // mengambil feed dari root
    var f = root.feed;
    // jika terdapat entry dalam feed
    if(f.entry.length > 0) {
        // lakukan iterasi untuk setiap entry dalam feed
        for(var i = 0; i < f.entry.length; i++) {
            // mengambil informasi entry seperti judul, summary, dan url
            var entry = f.entry[i];
            var title = entry.title.$t;
            var ss = entry.summary.$t;
            for(var j = 0; j < entry.link.length; j++) {
                if(entry.link[j].rel == "alternate") {
                    var url = entry.link[j].href;
                    if(url && url.length > 0 && title && title.length > 0) {
                        // tambahkan informasi entry ke dalam array p
                        p.push({'url': url, 'title': title, 'ss': ss});
                    }
                    break;
                }
            }
        }

        // jika masih terdapat entry yang belum ditampilkan
        if(f.entry.length >= m) {
            // perbaharui nilai variabel s dengan m
            s += m;
            // muat lagi feed posts dari blog
            gp();
        } else {
            // jika semua entry sudah ditampilkan, buat HTML untuk menampilkan feed posts
            var print = '';
            for(var x = 0; x < p.length; x++) {
                print += '<li><a href="' + p[x].url + '" title="' + p[x].ss + '..." target="_blank"><p>' + p[x].title + '</p></a></li>';
            }
            e.innerHTML = '<div class="title">Total Posts: ' + p.length + '</div><ol class="nu">' + print + '</ol>';
        }
    }
}

// jalankan fungsi gp untuk memuat feed posts pertama kali
gp();
</script>

Ketika fungsi dp() dijalankan, ia mengambil informasi dari feed dan menyimpannya dalam variabel p. Selama proses ini berlangsung, fungsi akan mengekstrak informasi penting seperti judul, tautan, dan cuplikan isi dari setiap postingan.

Setelah semua data feed diambil dan diolah, fungsi dp() akan menampilkan daftar postingan dengan membangun string HTML yang berisi daftar postingan yang akan ditampilkan pada halaman web. Kemudian, string ini dimasukkan ke dalam elemen <div> dan <ol> yang ditetapkan dengan kelas CSS title dan nu, masing-masing.

Ketika kode dijalankan, widget akan secara otomatis menampilkan daftar postingan dari feed RSS di halaman web yang terkait dengan kode tersebut. Widget ini dapat ditempatkan di mana saja pada halaman web, tergantung pada kebutuhan pengguna.

Berikut ini adalah penjelasan mengenai setiap baris kode di atas pada bagian CSS :

.nu: Selector untuk mengatur styling pada elemen dengan class nu.
background:#eff8fb;: Mengatur warna latar belakang dengan kode warna #eff8fb.
font-size:115%;: Mengatur ukuran font sebesar 115% dari ukuran font default.
list-style-type:none;: Menghilangkan tanda bullet dari list.
counter-reset:i;: Mengatur nilai awal counter dengan nama "i" menjadi 0.
max-width:660px;: Mengatur lebar maksimum elemen menjadi 660 piksel.
padding:0;: Menghilangkan padding dari elemen.
margin:0 auto;: Mengatur margin menjadi 0 pada sisi atas dan bawah, serta auto pada sisi kiri dan kanan.
.nu a:hover: Selector untuk mengatur styling pada elemen <a> yang sedang dalam keadaan hover dan berada di dalam elemen dengan class nu.
text-decoration:none: Menghilangkan underline dari teks pada elemen yang sedang dalam keadaan hover.
.nu li p: Selector untuk mengatur styling pada elemen <p> yang berada di dalam elemen <li> yang berada di dalam elemen dengan class nu.
padding:6px 1.6em;: Memberikan padding pada elemen sebesar 6 piksel pada sisi atas dan bawah, serta 1.6 kali em pada sisi kiri dan kanan.
margin:0;: Menghilangkan margin dari elemen.
text-indent:-1.14em;: Memberikan indentasi teks sebesar -1.14 kali em, sehingga teks pada elemen tersebut terlihat menjorok ke dalam.
.nu li:nth-child(odd): Selector untuk mengatur styling pada elemen <li> dengan urutan ganjil yang berada di dalam elemen dengan class nu.
background:#fffefd: Mengatur warna latar belakang dengan kode warna #fffefd.
.nu li:nth-child(odd):hover, .nu li:hover: Selector untuk mengatur styling pada elemen <li> yang sedang dalam keadaan hover atau berada di dalam elemen dengan urutan ganjil di dalam elemen dengan class nu.
background:#f4fff6: Mengatur warna latar belakang dengan kode warna #f4fff6.
.nu li div: Selector untuk mengatur styling pada elemen <div> yang berada di dalam elemen <li> yang berada di dalam elemen dengan class nu.
margin:0;: Menghilangkan margin dari elemen.
line-height:1em: Mengatur jarak antara baris teks sebesar 1 kali ukuran em.
.nu li p:before: Selector untuk mengatur styling pada pseudo-elemen ::before pada elemen <p> yang berada di dalam elemen <li> yang berada di dalam elemen dengan class nu.
content:counter(i) ". ";: Menampilkan counter dengan nama "i" diikuti dengan karakter titik dan spasi.
counter-increment:i: Menambahkan nilai counter dengan nama "i" sebesar 1 set

Tugas dan Catatan Sekolah

Cara Menampilkan semua Posting, bukan cuma sebanyak 150

Cara Menampilkan semua Posting, bukan cuma sebanyak 150

1 komentar:

Jaya Steel

Tugas dan Catatan Sekolah