Cara Membuat Sitemap Effect Accordian di Blogger

Cara Membuat Sitemap Effect Accordian di Blogger - Pada kesempatan kali ini admin akan membagikan seputar blogging, yaitu membuat sitemap pada blog. Sitemap harus ada pada setiap blog yang memilik banyak kategori atau label pada blognya.

Sitemap bisa diibaratkan dengan sebuah peta pada blog yang berguna untuk memberitahu arah kepada pengunjung, tapi dasarnya sitemap ini berfungsi sebagai memberitahukan mesin pencari seperti Google, Yahoo tentang lokasi atau url penting dalam website tersebut.

Sitemap sangat berpengaruh pada ranking atau faktor SEO dan merupakan salah satu alat bantu untuk para webmaster dengan pengenalan peta situs didalam website.

Cara Pemasangan Sitemap

1. Buka akun Blogger kalian.

2. Masuk ke Dasboard > Laman > Laman Baru.
3. Berikan judul Daftar Isi atau Sitemap

4. Ganti modus penulisan dari Compose menjadi HTML

5. Lalu masukkan kode HTML sitemap dibawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">

<style scoped="" type="text/css">

.table-of-content{background-color:#fafafa;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 0 1px #eee;}

.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fafafa;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #eee;transition:initial;}

.table-of-content .toc-header:hover{background-color:#fafafa;}

.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;}

.post-footer {display:none;!important;}

.comments {display:none;!important;}

</style><br />

<div class="table-of-content" id="table-of-content">

<span class="loading">Memuat konten...</span></div>

<script>

var toc_config = {

    url: 'https://xdcodefix.blogspot.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>

<script src="https://cdn.rawgit.com/anditochatul/daftar-isi/master/sitemapblog.js"></script>

</div>

Catatan :
Ganti url yang sudah saya block warna merah dengan url blog kalian

6. Save / Publish.

Sitemap diatas membutuhkan JQuery untuk menampilkan tampilan yang dimaksud, jika didalam template kalian sudah ada JQuery seperti langkah dibawah, silahkan abaikan langkah pemasangan JQuery.

Menambahkan JQuery Sitemap

1. Silahkan login ke Blogger

2. Setelah itu masuk Dasboard > Template > Edit HTML.

3. Tambahkan JQuery dibawah ini, tepat sebelum kode </head> atau </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

4. Simpan Perubahan.

Untuk demonya, kalian bisa cek halaman sitemap diblog ini, karena saya sendiri menggunakan sitemap yang keren ini.

Sekian dulu artikel dari Cara Membuat Sitemap Effect Accordian di Blogger, semoga bisa bermanfaat bagi kalian para blogger yang baru belajar blogging.
Terima Kasih