iklan header

Cara membuat Sitemap SEO dan Responsive di Blogger

Kamu tau Sitemap? Apa tuh? - Sitemap adalah Daftar Isi, Sitemap sangat penting untuk memberi para pembaca informasi agar mengetahui seluruh isi artikel dari blog tersebut. Selain itu, Sitemap juga berfungsi untuk memudahkan para pengunjung dalam mencari artikel yang ada di blog kamu, karena Sitemap ini mengelompokkan per label. Dengan adanya sitemap, blogmu juga bisa di approve untuk Google Adsense loh ! Silahkan cek Cara Daftar Google Adsense Agar Cepat di Terima

Cara-membuat-Sitemap-SEO-dan-Responsive-di-Blogger


Dalam intinya, Sitemap adalah peta dari sebuah blog, dengan adanya Sitemap di blog mu memudahkan google untuk merayapi/meng-'crawl' blogmu, dimana agar google bisa mengindex dan menjadikan blogmu berada di page one Google. Cara membuat sitemap yang saya gunakan, kodenya berasal dari blog arlinadzgn.com


Baca juga : SEO Untuk Para Pemula


Berikut cara membuat Sitemap SEO dan Responsive di Blogger

Pertama, buka blogger kamu > Lalu kamu pilih 'Laman' atau 'Halaman' setelah itu klik tombol Laman/Halaman Baru.

Kedua, kamu isikan judul dengan 'Sitemap' atau 'Daftar Isi', lalu untuk penulisan kodenya menggunakan mode HTML.

Lalu, pasang kode sitemapnya, lalu klik publikasi

<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://alvinkannabi.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>

Untuk versi Dark/Hitam, kamu bisa gunakan kode ini


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

Yang terakhir, klik simpan laman. Tidak susah kan? Ini hasil sitemap yang kamu buat.

* Pesan : Ganti url url: 'https://alvinkannabi.com/' dengan url blogmu, agar isi Sitemap berisi artikel dari blogmu.

Sekarang, kamu sudah memiliki sitemap di blog, jangan lupa untuk mengindexnya, agar blogmu di kenal oleh google, kalau belum tau cara mengindex kamu bisa baca ke Cara Mengindex Blog ke Google.

Demikian cara membuat Sitemap SEO dan Responsive di Blogger. Jangan lupa untuk share, dibawah ini ada tombol share, tolong ya ! Semoga bermanfaat juga untuk kita semua, saya pamit. Sampai jumpa !



- Alvin; 2019

0 Response to "Cara membuat Sitemap SEO dan Responsive di Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel