Cara Membuat Sitemap Dropdown Responsive Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Sitemap (Peta Situs) adalah daftar isi suatu Website atau Blog, kalau dalam buku disebut daftar isi yang memuat daftar artikel pada suatu buku dan begitu pula pada sebuah Website atau Blog. Ketika anda sekolah tentu anda membutuhkan buku pelajaran, pertama anda mencari judul buku tentang pelajaran apa dan setelah itu anda mencari suatu artikel yang anda inginkan dengan melihat daftar isi. Begitu pula dengan sebuah Website atau Blog denan kata lain buku online, maka sitemap sangatlah dibutuhkan bahkan wajib ada pada sebuah Website atau Blog. Sitemap sangat membantu para pengunjung dalam menjelajahi sebuah Website atau Blog, tanpa site map saya rasa anda sendiri mungkin kesal ketika mengunjungi sebuah Website atau Blog.
Sitemap yang akan saya bagikan ini sangatlah ringan dan akan diletakkan pada halaman statik, sitemap ini adalah bergaya dropdown supaya indah dan tidak berserakan sehingga terlihat profesional.

Berikut fitur sitemap yang indah ini⇩
➥Gaya dropdown yang sangat indah
➥Artikel terkumpul pada satu baris yang dipimpin oleh kategori atau label dan ketika kategori atau label anda klik maka akan langsung terbuka dropdown yang menampilkan barisan judul artikel yang mengikuti kategori atau label tersebut, tiap judul artikel mengandung link yang membawa langsung ke artikel secara penuh
➥Tiap artikel baru akan ditandai dengan tulisan "NEW" sehingga para pengunjung tahu yang mana artikel lama dan artikel yang baru
➥Dikemas dalam halaman statis
➥Responsive

Untuk menyatakan fitur tersebut alangkah baiknya jika anda melihat di hasil berikut⇩

Result

Jika anda menyukainya, mari ke tutorialnya⇨

Anda hanya perlu meletakkan JavaScript berikut kedalam halaman statik yang anda beri judul Sitemap⇩

<div dir="ltr" style="text-align: left;">
<script src="https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Peta-Laman-Blogger-Responsif-Oleh-Rahmat-Arif.js"></script><style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Open Sans,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:Open Sans;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:#006600}
.table-of-content .toc-header.active:before{border-color:#006600 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">Loading...</span></div>
<script>
var toc_config = {
    url: 'http://www.bloggerautodidact.com/',
    containerId: 'table-of-content',
    showNew: 5,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#006600;padding:1px 6px 2px 6px;line-height:normal;float:right;border-radius:3px;text-transform:uppercase;">new</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="https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Peta-Laman-Blogger-Responsif-Oleh-Rahmat-Arif.js"></script>
</div>

Catatan: Ganti tulisan yang berwarna biru yaitu "http://www.bloggerautodidact.com/" dengan URL Website atau Blog anda.

Alhamdulillaah, tutorial sudah siap.