Tutorial Membuat Daftar Isi (Sitemap) Blog

Tutorial Membuat Daftar Isi (Sitemap) pada Blog - Daftar isi blog adalah list (daftar) atau deretan tulisan, artikel, atau post dalam blog yang ditampilkan berdasarkan parameter tertentu. Daftar isi blog biasanya diletakkan pada sebuah laman atau halaman (page) blog. Daftar isi merupakan salah satu bagian penting dalam blog dimana merupakan fitur yang dianjurkan oleh google untuk dipasangkan pada tiap-tiap website termasuk blog.

Kelas Informatika - Tutorial Membuat Daftar Isi (Sitemap) pada Blog 2020

Setidaknya Kelas Informatika telah menghimpun sejumlah manfaat yang dapat diperoleh dari memasang daftar isi blog, baik jika dilihat dari sisi pengunjung maupun pemilik blog. Layaknya sebuah buku, manfaat daftar isi blog bagi pengunjung diantaranya :

Memberi kemudahan pengunjung dalam mengakses daftar konten yang terdapat dalam blog.
Lebih cepat dalam mencari tulisan, post, ataupun artikel yang dibutuhkan dalam sebuah blog.
Memudahkan pengunjung untuk menjelajahi blog.

Sedangkan manfaat dari membuat daftar isi bagi pemilik blog antara lain :

Merupakan bagian dari optimasi mesin pencari (search engine) sehingga tulisan akan lebih cepat terindex.
Setiap membuat tulisan, post, atau artikel baru, dapat secara otomatis masuk ke daftar isi.
Dapat meningkatkan kualitas SEO blog karena menyajikan kata kunci (keyword) yang benar dan sudah digunakan (provided correct keywords have been used).
Memudahkan bot crawl untuk menjelajahi semua artikel yang terdapat pada blog.
Membantu membuat link internal antar-postingan untuk menaikkan page rank tulisan, post, atau artikel.

Model Daftar Isi Blog

Kelas Informatika mengelompokkan daftar isi blog dapat menjadi 2 bagian, yakni berdasarkan parameter dan jenis tampilan. Berdasarkan parameternya, secara umum daftar isi blog dapat dibuat dengan mengacu pada kategori (label) post, atau bisa juga berdasarkan tanggal publikasi. Sedangkan jika dilihat dari model tampilannya, daftar isi blog dapat disajikan dalam bentuk list (daftar konten) atau model daftar isi seperti yang diterapkan oleh kang ismet. Tentunya masing-masing jenis tersebut memiliki kelebihan dan kekurangan tersendiri.

Terkait dengan kelengkapan fitur, beberapa pengguna blog telah banyak berinovasi dengan menambahkan fitur-fitur daftar isi blog yang dapat membuat nyaman pengunjung blog. Adapun fitur yang dimaksud, seperti disediakannya menu pilihan (opsi) untuk melihat-lihat artikel dari label yang diklik, sehingga pengunjung lebih mudah dan cepat dalam mencari artikel yang dibutuhkan. Ada juga yang menyediakan fitur scroll dalam menampilkan daftar isi atau sitemap pada blog. Para pengguna blog lain juga menyediakan fitur daftar isi blog yang otomatis dan responsive.

Memasang Daftar Isi Blog

Bagi anda yang ingin memasang daftar isi pada blog, Kelas Informatika akan memandu anda untuk membuat keinginan anda terpenuhi. Kelas Informatika telah mendokumentasikan ragam jenis daftar isi blog yang berbeda-beda. Jadi.. anda bisa memilih jenis daftar isi blog yang anda suka dan ingin diterapkan pada blog anda.

Model List (Daftar)

Model list (daftar) adalah jenis daftar isi blog yang akan menampilkan daftar tulisan, post, ataupun artikel dalam blog anda dalam bentuk daftar per baris. Kelebihan dari jenis daftar isi blog ini adalah lebih cepat dalam loading blog dan dapat tampil kedalam daftar isi secara otomatis apabila terdapat post atau tulisan yang baru anda buat. Sedangkan kekurangannya adalah dari segi tampilan yang kurang menarik.

Kelas Informatika - Daftar Isi Blog Model List

Untuk membuat daftar isi model list, anda dapat mengikuti tutorial dibawah ini :

Login ke dalam akun blogger anda
Pada menu dashboard (sebelah kiri daftar post), pilih laman

Pada menu laman, buatlah laman baru dengan cara menekan tombol laman baru (sebelah atas daftar laman, paling kiri)

Kemudian gantilah mode compose ke mode html dan jangan lupa untuk memberi judul laman

Kelas Informatika - Membuat Laman Baru Blogger

Selanjutnya copy dan paste source berikut di laman baru yang sedang dibuat

<script src="https://cdn.rawgit.com/Bangtax/bangtax/master/sitemapnew.js"></script>
<script src="https://www.kelasinfor.net/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Kelas Informatika - Source Code Daftar Isi Model List

Tak perlu khawatir apabila muncul notifikasi kesalahan (tulisan berwarna merah disebelah atas), klik tutup pada sebelah kanan notifikasi.
Terakhir jangan lupa untuk menyimpan, selanjutnya klik Publikasikan
Sekarang anda telah memiliki daftar isi blog (model list) yang menampilkan daftar post berdasarkan label atau kategori.

Mungkin sebagian dari anda menemui kendala dalam membuat daftar isi blog dengan model list, seperti tidak munculnya daftar post atau tulisan pada halaman daftar isi yang telah dibuat. Kendala tersebut muncul karena kode-kode html tidak dapat membaca secara langsung laman yang baru anda buat. Solusinya adalah dengan mengedit salah satu artikel, kemudian klik label pada menu setelan entri (sebelah kanan lembar post).

Kelas Informatika - Edit Label Post Blogger

Selanjutnya berilah nama label sesuai dengan tulisan atau post yang sedang anda edit. Jika semua langkah telah dilakukan, klik update. Terrakhir cek kembali daftar isi yang telah anda buat. Kini daftar tulisan atau post telah berhasil ditampilkan. Penyebab masalah ini terkadang juga karena lupa belum mengganti dan menyesuaikan url pada source code.

Model Kang Ismet

Model kang ismet merupakan bentuk lain dari tampilan daftar isi pada blog. Model daftar isi satu ini banyak digemari para blogger karena tampilannya yang bagus. Hanya saja daftar isi ala kang ismet memiliki kekurangan dalam loading atau kecepatan akses, perlu dimaklumi karena memiliki tampilan grafis yang lebih bagus jika dibandingkan dengan model list (daftar). Kekurangan lain dari model daftar isi blog kang ismet adalah ketika ada label atau kategori baru, maka anda harus menambahkan atau mengupdate beberapa baris kode agar dapat ditampilkan. Dengan kata lain model daftar isi ala kang ismet belum bekerja secara otomatis.

Kelas Informatika - Daftar Isi Blog Ala Kang Ismet

Dikutip dari Arlina Design, daftar isi ala kang ismet dapat anda buat dengan mengikuti langkah-langkah berikut :

Sebagai langkah awal, anda dapat mengikuti langkah-langkah yang telah di jelaskan sebelumnya (membuat daftar isi blog model list), pada poin 1, 2, 3 dan 4.
Dengan asumsi telah menyelesaikan keempat langkah tersebut, berarti sekarang sudah sampai pada model html pembuatan laman baru. Selanjutnya copy paste source code berikut.

<style scoped="scoped" type="text/css">
/* Multi Feed Loader /www.arlinadzgn.com */
.list-entries{background:white;border:1px solid #d8d8d8}
.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}
.list-entries li{padding:1em;border-bottom:1px solid #ddd}
.list-entries .main-title{padding:0}
.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0!important}
.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}
.list-entries .title a:hover{text-decoration:underline;color:#5886a7}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}
.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}
.list-entries .more-link a:hover{background-color:#71a555}
.list-entries{margin:7px;width:251px;float:left;font-size:11px}
</style>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Bangunan Program",
            url: "https://www.kelasinfor.net/",
            tag: "Bangunan Program"
        },
        {
            name: "Borland Delphi",
            url: "https://www.kelasinfor.net/",
            tag: "Borland Delphi"
        },
        {
            name: "Interaksi Manusia dan Komputer",
            url: "https://www.kelasinfor.net/",
            tag: "IMK"
        },
        {
            name: "Java",
            url: "https://www.kelasinfor.net/",
            tag: "Java"
        },
        {
            name: "Konsep Keilmuan",
            url: "https://www.kelasinfor.net/",
            tag: "Konsep Keilmuan"
        },
        {
            name: "Ragam Ulasan",
            url: "https://www.kelasinfor.net/",
            tag: "Ragam Ulasan"
        },
        {
            name: "Sistem Informasi",
            url: "https://www.kelasinfor.net/",
            tag: "Sistem Informasi"
        },
        {
            name: "Pemrograman",
            url: "https://www.kelasinfor.net/",
            tag: "Pemrograman"
        }
    ],
    numPost: 1,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=8"
    }
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/nubie/master/multifeedblog.js" type="text/javascript"></script>
<br />
<div id="feed-list-container">
</div>
<div style="clear: both;">
</div>

Selanjutnya sesuaikan beberapa bagian kode tersebut dengan melihat keterangan tabel dibawah ini :

Variabel	Keterangan
name	Nama kategori atau label yang ingin ditampilkan
url	Alamat website atau blog anda
tag	Nama kategori atau label yang digunakan untuk mengelompokkan tulisan (post)

Selanjutnya jangan lupa simpan dan publikasikan laman. Sekarang anda telah memiliki daftar isi ala kang ismet yang keren.

Kelas Informatika telah mengindikasi sejumlah kendala yang dapat memunculkan error ketika membuat daftar isi blog ala kang ismet, diantaranya :

Notifikasi error

HTML Anda tidak bisa diterima: Tag penutup tidak memiliki tag pembuka pasangannya: DIV

Jika menemui kendala ini beberapa solusi yang dapat digunakan antara lain :

Mengganti source code <div style="clear: both;"></div></div> dengan <div id="feed-list-container"></div> <div style="clear: both;"></div>
Tambahkan source code <div class="container"> di paling atas dan <div id="feed-list-container"></div><div style="clear: both;"></div> setelah style penutup CSS

Kesalahan lain

Kesalahan lain yang menyebabkan tidak dapat tampilnya daftar isi blog ala kang ismet dapat anda selesaikan dengan mencoba beberapa solusi berikut :

Memastikan bahwa template blog anda sudah terpasang jquery library
Lupa atau salah dalam mengubah dan menyesuaikan variabel name, tag dan url
Bagi sebagian error kadang dapat teratasi dengan cara meng-klik tutup pada sebelah kanan notifikasi (tulisan berwarna merah)

Penutup

Pada kesimpulannya, daftar isi merupakan salah satu hal penting yang perlu dipasangkan pada blog untuk memanjakan pengunjung dan meningkatkan kualitas SEO (Search Engine Optimization). Beberapa model daftar isi seperti model list atau daftar isi ala kang ismet memiliki kelebihan dan kekurangan masing-masing, sehingga anda dapat menerapkan salah satu dari model daftar isi tersebut dengan menyesuaikan terhadap selera masing-masing pengelola blog.

Demikian tulisan mengenai Tutorial Membuat Daftar Isi (Sitemap) pada Blog, semoga bermanfaat. Ikuti Fanspage Kelas Informatika disini, agar tetap update informasi seputar teknologi informasi dan multimedia. Kritik, saran maupun pertanyaan dapat disampaikan dengan meninggalkan komentar. Salam 😊