How To Create Sitemap Dropdown Responsive On Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Sitemap is a list of the contents of a website or blog, if the book is called the table of contents that lists the articles in a book and so are on a Website or Blog. When your school of course you need a textbook, you will first look for the title of a book about what lessons and after that you are looking for an article you want to view the table of contents. So it is with a website or blog online book denan other words, the sitemap is needed is mandatory even on a Website or Blog. Sitemap greatly assist visitors in navigating a website or blog, without a site map I think that you yourself may be annoyed when visiting a website or blog.

Sitemap I want to share this very light and will be placed on static pages, this is a stylish dropdown sitemap so beautiful and not scattered so it looks professional.

The following features of this beautiful sitemap⇩
➥Style dropdown very beautiful
➥Articles collected in one line led by categories or labels, and when you click on a category or label it will immediately open the dropdown which displays rows that follow the article title or category labels, each title of the article contains a link that lead directly to the article in full
➥Each new article will be marked with the words "NEW" so that visitors know which old articles and new articles
➥Packaged in a static page
➥Responsive

To express these features would be nice if you see the following results⇩

Result
Click To View

If you like it, let into the tutorial⇨

You just need to put the following JavaScript into the page that you give the title static 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.bloggerdiscreet.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>

Note: Replace the words in blue is "http://www.bloggerdiscreet.com/" with the URL of your Website or Blog.

Alhamdulillaah, tutorial is ready.