Cara Membuat Sitemap Mode Show Klik Perlabel Blog

Cara Pasang Sitemap di Blog - Sitemap atau daftar isi yang dipasang di blog sangat banyak macamnya mulai yang bersipat otomatis, manual bikinan sendiri, responsive, tampilan scrolling, drop down atau yang seperti yang Anda pakai itu seperti apa? Membuat sitemap biasanya dipilih yang unik, keren dan enak dilihat, tapi yang penting membantu navigasi sebagai peta situs untuk pengunjung juga web master.

Sitemap/petasitus blog Animasi Show Click Perlabel

Nah kali ini saya menulis bagaimana cara dalam membuat sitemap pada blog lebih beda dengan tampilan show klik perkategori animasi label keren, responsive mudah dipahami bagi pemula, untuk kode dalam membuat sitemap ini saya dapat dari blognya ARLINADESIGN, situs yang membahas desain dan merancang bermacam template blog.

Contoh: Sitemap nya

Kelebihan Kode untuk membuat sitemap ini yang saya rasakan diantaranya:

• Tampilan Show Klik animatic perlabel/kategori (Elegant, mudah tampil alias responsive mesti sinyal lemah, mudah dimengerti bagi pengunjung awam)
• Tidak menanamkan link ke sitemap pembuat kode seperti kebanyakan.
• Menurut info mudah dipasang di blog apasaja blogger, word press dan flatform lainya.

Berikut ini kode dan cara membuat sitemap blog dengan tampilan Show klik Perlabel...

Cara Membuat Sitemap Keren Mode Show Klik Perlabel di Blog

Seperti biasa membuat sitemap otomatis ini Kita pasang di Halaman statis berikut cara dan kodenya:

1. Login ke akun blog Anda lalu buka blog yang akan dipasang sitemap.

2. Silahkan pilih Laman di blog anda, selanjutnya buat Laman baru Klik Buat Halaman.

3. Setelah terbuka, beri saja judul terlebih dahulu pada kolom titel contoh: Sitemap atau Daftar isi, lalu kopi kode di bawah ini dan pastekan kode script berikut pada mode HTML Laman anda:

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;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,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.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{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff 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:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;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://urlblog_anda.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;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/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

Perhatikan!
1. Setelah dipaste ganti alamat blog  http://urlblog_anda.com  dengan Link atau URL blog anda itu.
2. Jika sudah coba klik Pratinjau jika tampilannya oke langsung Publikasikan saja.

Untuk kode diatas tampilan datftar isi dengan warna gelap seperti yang saya pakai, adapun pilihan lain tampilan warna sitemap yang lebih terang bisa saja tak perlu merubah kode warnanya, berikut kode sitemap tampilan putih yang bisa di pilih!

Paste kode berikut untuk tampilah agak terang:

<div dir="ltr" style="text-align:left;" trbidi="on">
<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://urlblog_anda.com/',
    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/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

• Pasang saja seperti cara diatas.

• Jangan lupa ganti kode pemanggil  http://urlblog_anda.com  dengan Link/URL Anda masing-masing.

• Jika selesai Publikasikan.

Kode script diambil dari: https://www.arlinadzgn.com/2015/04/menerapkan-daftar-isi-menurut-label.html?m=1

Selanjutnya pemasangan agar Sitemap tampil di blogspot

Setelah Halaman daftar isi di Publikasikan itu belum cukup busa dilihat pengunjung Anda harus memasangnya di blog.

Cara 1:
Masuk ke menu Tata Letak di blogspot, ---> lalu pilih Tambahkan Gadget buat pada Tataletak Heading saja, ---> kemudian di Dasar-dasar pilih menu Halaman, ---> tinggal pilih tuh Sitemap yang tadi dibuat tanda centang saja, ---> tinggal klik Simpan lalu akan muncul di blog anda, Selesai.

Cara 2:
Dipasang pada menu blog Anda melalui edit HTML, nah untuk cara ini silahkan anda sendiri yang seting dimana harus dipasang contoh seperti menu blog ini saya simpan paling atas, bisa Anda cek.

Melihat peta situs blog yang enak dilihat serta mudah dipahami ini semoga pengunjung tertarik dengan Artikel-artikel Anda, memakai sitemap versi ini, mungkin anda juga suka silahkan dicoba.