Cara membuat sitemap blog dengan tombol slide di blogger

Cara membuat sitemap blog dengan tombol slide atau Akrodion di blogger.

Sitemap dengan tombol slide Akordion adalah alat yang dapat membantu pembaca menelusuri seluruh isi web, dengan menyentuh tombol slide pembaca sudah dapat mencari berbagai macam artikel sesuai kebutuhan.sitemap dengan tombol slide akrodion ini memiliki fitur otomatis yang dapat menampilkan seluruh artikel dari sebuah web sesuai dengan nama label yang telah di tentukan.yang menarik dari sitemap ini adalah, jika tombol di sentuh akan menampilkan efek slide atau terbuka daftar artikel berdasarkan label,dengan anda menggunakan sitemap ini dapat membuat penampilan web lebih menarik atau terlihat profesional.

Jika ingin melihat tampilan dari sitemap dengan tombol slide akrodion ini, dapat anda sentuh "live preview" di bawah ini.

Live preview

Catatan:
Sitemap ini sering digunakan oleh web yang mempunyai banyak konten dan nama label artikel.menggunakan sitemap ini seluruh artikel akan di tata lebih ramping hingga tidak mengkonsumsi tempat yang berlebihan.

Apabila anda berminat mengunakannya, dapat di salin/copy script code sitemap Akordion di bawah ini.dan baca keterangan penerapan yang berada di bawah code script tersebut.

Script Code Sitemap Akordion

<div dir="ltr" style="text-align:left;" trbidi="on">di
<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>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'http://www.mcqslenasabu.cf',
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/MCQ-Design/blogger-kota-Kupang/master/Sitemap-Akrodion.js"></script>
</div>

• Cara penerapan sitemap seperti contoh di atas.
1. Copy code script di atas, lalu masuk ke situs blogger.com.
2. Dari dasbor blogger,sentuh laman kemudian sentuh laman baru.
3. Di dalam dasbor edit laman,sentuh mode HTML yang berada di pojok kiri atas area menulis.
4. Sentuh dan tahan pada area menulis, lalu tempelkan code script.
5. Lengkapi judul, kemudian sentuh pengaturan atau ikon roda gigi yang berada di samping kanan.
6. Dalam tab baru yang terbuka, sentuh jangan bolehkan komentar pembaca.dan sentuh gunakan enter untuk baris baru.
7. Jika semuanya sudah selesai dilengkapi, sentuh selesai kemudian publikasi.

• Cara menampilkan sitemap di homepage web blog.
1. Dari dasbor blogger.com,sentuh laman kemudian pilih fitur "lihat"yang berada dibawah judul laman.
2. Di dalam tab baru yang terbuka, copy alamat (url) yang berada pada mesin pencari browser google crome.
3. Selanjutnya kembali dari dasbor blogger.com.kemudian sentuh tata letak.
4. Didalam tab baru yang terbuka, sentuh tambahkan gadget.lalu cari atau menemukannya fitur laman dan sentuh pada ikon tambah yang berada di samping kanan fitur tersebut.
5. Sentuh atau menemukannya "tambahkan tautan eksternal".lengkapi judul laman kemudian sentuh dan tahan pada area alamat (url) lalu tempelkan.
6. Selanjutnya sentuh "simpan tautan"dan lanjutan dengan menyentuh tombol oranye "selesai" yang berada di dasar formulir tambahkan laman.setelah selesai di tahab ini berarti sitemap telah terpasang di web blog anda.

Untuk memastikan apakah sitemap terpasang dengan benar anda dapat melakukan pratinjau dari homepage web blog.

Catatan:
Jika semuanya sudah terpasang dengan benar maka akan muncul tampilan seperti contoh live preview di atas.

Semoga artikel ini bermanfaat bagi anda.