Cara Membuat Sitemap Keren dan SEO Responsive di Blogger

Sitemap atau daftar isi blog sangatlah penting, hal ini dikarenakan sitemap dapat memudahkan para pengunjung melihat isi seluruh artikel yang ada di blog kita. Selain itu sitemap adalah salah satu syarat untuk mendaftarkan blog kita ke Google Adsense.

Fungsi sitemap sendiri adalah mengelompokkan per label artikel kamu sehingga google dapat merayapi blog kamu. Nah pada kali ini admin akan membagikan sitemap keren dan seo responsive, yuk cekidot.

Baca juga: Cara Membuat Efek Teks Stabilo di Blogger

Cara Membuat Sitemap Keren dan SEO Responsive di Blogger

1. Pertama sobat login ke akun blogger sobat lalu klik Halaman > Buat Halaman Baru dan isikan bagian judul dengan nama Sitemap lalu penulisan kodenya pilih HTML bukan Compose.
2. Kedua copy dan pastekan kode di bawah ini.



<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: 'https://goenaloka.com/',
    containerId: 'table-of-content',
    showNew: 2,
    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>



3. Note: Silahkan ubah tulisan yang berwarna Merah dengan url blog sobat, setelah itu klik Simpan Laman.
4. Selesai.

Demikian artikel tentang Cara Membuat Sitemap Keren dan SEO Responsive di Blogger. jika berkenan jangan lupa klik tombol share, dan semoga postingan ini bermanfaat.

Sumber Code: Arlinadzgn.com

Share this post