Cara membuat Daftar Post / Pages dengan Selang Seling Warna Semua Posting tanpa Thumbnail

Program ini bekerja dengan cara mengambil data dari feed RSS dan menampilkannya dalam bentuk daftar. Setiap halaman diwakili oleh sebuah li, yang berisi sebuah link ke halaman itu sendiri. Ketika pengguna mengarahkan kursor ke link tersebut, maka akan muncul judul dan deskripsi halaman tersebut. Deskripsi ini diambil dari feed RSS, kemudian diubah menjadi teks biasa dengan cara menghapus semua tag HTML menggunakan regular expression.

Intinya, program ini digunakan untuk menampilkan daftar halaman dalam bentuk daftar yang rapi dan menarik. Program ini bekerja secara otomatis, sehingga pengguna tidak perlu melakukan apa-apa selain menambahkan kode tersebut ke halaman web mereka.

Pertama, ada bagian style. Di sini ada kumpulan instruksi untuk mengatur tampilan halaman web. Misalnya, mengatur ukuran font, warna latar belakang, jarak antar elemen, dan lain sebagainya. Instruksi-instruksi ini digunakan untuk mengatur tampilan halaman web agar terlihat lebih rapi dan menarik.

Selanjutnya, ada bagian script. Di situ ada program yang ditulis dalam bahasa pemrograman JavaScript. Fungsinya adalah untuk menampilkan daftar halaman di sebuah ul dengan class "nu". Daftar ini diambil dari feed RSS yang disediakan oleh halaman web tersebut. Dalam kasus ini, feed RSS berisi maksimal 88 halaman, karena variabel n diatur ke nilai 88.

Semoga penjelasan ini bermanfaat ya. Berikut ini adalah contoh hasilnya.

HALAMAN :

Dan berikut ini adalah code yang digunakan untuk membuat tampilan tersebut. Untuk memudahkan, semua kode, baik style dan script-nya ditampilkan menjadi satu ya.


Kode yang dipasang adalah sebagai berikut:

1

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

/* Ketika link di dalam .nu dihover, maka text decoration-nya dihapus */
.nu a:hover {
    text-decoration: none;
}

/* Properti untuk <p> tag di dalam .nu li */
.nu li p {
    padding: 6px 1.6em;
    margin: 0;
    text-indent: -1.14em;
}

/* Properti untuk .nu li yang berada pada indeks ganjil */
.nu li:nth-child(odd) {
    background: #fffefd;
}

/* Properti untuk .nu li yang berada pada indeks ganjil ketika dihover, 
   dan ketika .nu li mana pun dihover */
.nu li:nth-child(odd):hover, 
.nu li:hover {
    background: #f4fff6;
}

/* Properti untuk <div> tag di dalam .nu li */
.nu li div {
    margin: 0;
    line-height: 1em;
}

/* Menambahkan nomor urut ke setiap <p> tag yang berada di dalam .nu li */
.nu li p:before {
    content: counter(i) ". ";
    counter-increment: i;
}
</style>

<script>
var n = 88;
function bb(j) {
    // Membuat loop untuk menampilkan konten
    for (var i = 0; i < n; i++) {
        // Mendapatkan entry dan judul konten
        var entry = j.feed.entry[i];
        var tt = entry.title.$t;
        var ss, u;

        // Mengecek apakah sudah mencapai akhir konten
        if (i == j.feed.entry.length) break;

        // Mencari link untuk konten
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                u = entry.link[k].href;
                // Mendapatkan cuplikan konten
                ss = entry.content.$t.replace(/<[^>]*>/g,"").substring(0,230);
            }
        }
        // Menampilkan konten dalam bentuk list
        document.write('<li><a href="'+u+'" title="'+ss+'..." target="_blank"><p>'+tt+'</p></a></li>');
    }
}
</script>

<ul class="nu">
    <script src="/feeds/pages/default?max-results=88&amp;alt=json-in-script&amp;callback=bb"></script>
</ul>

 Penjelasan:

1. Mengatur style untuk elemen HTML dengan kelas "nu" dengan properti-properti seperti background, font-size, list-style-type, counter-reset, max-width, padding, dan margin.
2. Mengatur style untuk link yang sedang di-hover dengan menghilangkan dekorasi underline.
3. Mengatur style untuk paragraf di dalam setiap elemen daftar (li) dengan properti-padding, margin, dan text-indent.
4. Mengatur style untuk setiap elemen daftar (li) dengan background berbeda untuk setiap elemen ganjil.
5. Mengatur style untuk setiap elemen daftar (li) yang sedang di-hover dengan background berbeda untuk elemen ganjil.
6. Mengatur style untuk div di dalam setiap elemen daftar (li) dengan properti margin dan line-height.
7. Mengatur nomor untuk setiap elemen daftar (li) dengan menggunakan CSS counter.
8. Mendefinisikan variabel n dengan nilai 88.
9. Membuat fungsi bb dengan parameter j.
10. Melakukan loop untuk setiap elemen di dalam feed dengan mengakses properti title dan link dari setiap elemen.
11. Menghilangkan tag HTML pada konten setiap elemen dengan menggunakan regular expression.
12. Menambahkan setiap elemen daftar ke dalam dokumen dengan menampilkan judul dan link.
13. Memuat data dari JSON feed menggunakan URL yang ditentukan dan memanggil fungsi bb untuk mengolah datanya.
14. Membuat daftar HTML dengan kelas "nu".