Cara Mudah Membuat Daftar Isi Berdasarkan Kategori di Blogger

Creatorkampung - Hello semuanya, kembali lagi dengan Admin Yogi Pada kesempatan ini Saya akan membahas mengenai Tips dan Trik Blogger Cara Membuat Sitemaps atau yang sering disebut Daftar Isi! Apakah Bisa? Iyaps Bisa banget.

Sitemaps atau Daftar Isi ini merupakan sebuah Peta Situs Blog sobat ataupun Daftar Kategori atau Postingan yang ada di situs Blog sobat.

Situs Creatorkampung juga menggunakan Sitemaps atau Daftar Isi yang seperti ini juga.

DEMO

Untuk Tata Cara membuat nya sangatlah Mudah, sobat cukup ikuti tutorial dibawah ini.

TATA CARA MEMBUAT NYA

1. Login ke Situs Blogger
2. Masuk ke Menu Halaman dan Buat Halaman Baru berikan judul Sitemaps atau Daftar Isi (Terserah Sobat)
3. Selanjutnya Copy dan Pastekan Kode dibawah ini dalam postingan mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<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;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{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 #ccc;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:#666 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:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'https://creatorkampung.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

Note: Ubah Alamat Situs Blog (https://creatorkampung.com/) dengan Alamat Situs Blog Sobat

4. Jika sudah, Klik Publikasikan dan lihat Hasilnya.

Seperti itulah Cara Mudah Membuat Sitemaps atau Daftar Isi di Situs Blogger Beradasarkan Kategori atau Label.

Kesimpulan: Bahwa Sitemaps atau Daftar Isi, ini merupakan bagian dari kerangka Situs Blog Sobat, Jadi sangat perlu untuk dipasang, Bahkan untuk mendaftarkan Situs Blog ke Google Search Console nanti dibutuhkan alamat Sitemaps atau Daftar Isi Situs Blog nya, Jadi tunggu apalagi pasang atuh.

Cukup Sekian, Dan semoga pada Postingan ini dapat memberikan informasi yang bermanfaat untuk kita semua.

Dan nantikan saja Postingan dari Admin Yogi selanjutnya Yahh.

Terimakasih,

Share this post