Cara Membuat Sitemap Flat Design Keren

Daftar Isi atau biasa yang disebut Sitemap adalah sebuah kumpulan artikel artikel yang telah dibuat oleh blog anda, hari ini saya akan berbagai Bagaimana Cara Membuat Sitemap Flat Design keren di Blog, Sitemap ini akan dipasang di Halaman Statis jadi pengunjung akan mudah mengaksesnya

Untuk Demo dari Sitemap yang akan saya bagi ini, bisa kalian lihat secara Live disini, tinggal klik Tombol Demo dibawah

DEMO

Sudah lihat ? Tertarik untuk memasangnya ke Blog kalian ? Silahkan lihat dibawah

Cara Membuat Halaman Kode Warna di Blog

1.Buka Blogger
2.Setelah itu buat Laman Baru dan ganti dari Compose ke HTML, seperti gambar dibawah

3.Setelah itu copy kode dibawah dan letakan disana

<div id="bp_toc">
</div>
<script src="https://837e4322157785ac6e2418ca18b2891def99d9f8.googledrive.com/host/0B__SLW9IKWpvUjB4YjRtXzZIUDQ/masdeeons-sitemap.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style>
/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:&#39;Open Sans&#39;;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:&#39;Open Sans&#39;;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>

4.Lalu langsung saja Save/Publikasikan

Silahkan kalian cek blog kalian masing masing.

Sebagai Info : Sitemap diatas diurutkan berdasarkan Tanggal Artikel, jadi akan menampilkan dari Postingan Terbaru hingga Terlama, jadi tidak sesuai label

Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.