Cara Membuat Sitemap/Daftar Isi Berdasarkan Label Secara Otomatis

Tutorial blog kali ini adalah cara membuat sitemap atau daftar ini di blog berdasarkan label atau kategori yang ada pada blog secara otomat...

Tutorial blog kali ini adalah cara membuat sitemap atau daftar ini di blog berdasarkan label atau kategori yang ada pada blog secara otomatis. Widget ini sangat perlu dan bisa dikatakan wajib terpasang pada blog karena akan membantu pengunjung untuk menjelajahi peta situs atau postingan-postingan lain di blog anda.

Terkait: Membuat Daftar Isi Terbaru Tampil Sesuai Tanggal dan Bulan Terbit

Beberapa versi dan modifikasi sitemap yang bisa anda temukan di pencarian Google, mungkin saja sitemap berdasarkan kategori/label ini akan cocok dengan blog anda. Widget ini telah dimodifikasi sedemikian rupa sehingga terlihat lebih elegan dan responsive. Widget sitemap versi ini akan memberitahukan artikel terbaru pada masing-masing label yang ditandai dengan tombol ‘new’.

Tertarik untuk menerapkan widget ini di blog anda? Atau ingin mengganti jenis sitemap yang lama dengan daftar ini yang dibagikan ini? Ikuti langkah berikut.

Cara Pasang Daftar Isi Berdasarkan Kategori/Label di Blog

Widget sitemap ini biasanya dipasang pada laman statis. Untuk hasil terbaik agar terlihat lebih rapi, pasang widget ini pada halaman statis tersebut dengan main post 100%, dan cara pemasangannya sebagai berikut.

1. Login ke blogger, masuk ke dasbor blog.
2. Buat laman baru dengan mengklik menu Laman > Laman baru. Atau jika anda hanya ingin sekedar mengganti sitemap yang lama klik Edit.
3. Jangan lupa beri judul laman dengan nama “Daftar Isi” atau “Sitemap”, kemudian klik HTML.
4. Hapus seluruh kode dalam dalam laman tersebut, lalu ganti dengan kode di bawah ini.

<div dir="ltr" style="text-align: left;">
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;box-shadow:0 0 0 1px #eee;}
.table-of-content .toc-header{position:relative;color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}
.table-of-content .toc-header:hover{background-color:#fdfdfd;}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#fc4f3f transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}

.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#fcfcfc!important;transition:initial;border-bottom:1px solid #e9e9e9;border-top:1px solid #fff;}
.table-of-content li:first-child(border-top:0}
.table-of-content li:last-child(border-bottom:0}
.post ol li a,.post ol li a:link{color:#444!important;text-decoration:none;font-size:86%;transition:initial}
.post ol li a:visited{color:#999;transition:initial}
.post ol li a:link:hover,.post ol li a:visited:hover{color:#fc4f3f;text-decoration:underline;transition:initial}
.post ol li:before{display:none}
ol {text-shadow:initial;}
.post a:link {color:#444!important;}
</style>
<div class="table-of-content" id="table-of-content"><span class="loading">Memuat konten...</span></div><script>
var toc_config = {
    url: 'http://www.bungfrangki.com/',
    containerId: 'table-of-content',
    showNew: 5,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#fc7569;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 0,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script><br />
<script src="//googledrive.com/host/0B8a75E285BMHV3VMNHlrRTF3YzA"></script>
</div>

Perhatikan kode di atas:

• Kode dengan tulisan tebal adalah jQuery library, jika kode ini (kode sejenis dengan versi lain) sudah ada di template blog anda, maka tidak perlu lagi menambahkan kode tersebut.
• Ganti www.bungfrangki.com dan sesuaikan dengan domain atau alamat blog anda.

5. Langkah terakhir ialah klik tombol Publishkan atau Perbarui. Jangan lupa untuk melihat hasilnya dengan membuka laman tersebut.

Demikian tips tentan cara membuat sitemap berdasarkan kategori atau label secara otomatis di blog. Semoga membantu dan selamat mencoba.