Cara Membuat Sitemap Otomatis dan Responsive Di Blog

Cara Memasang Sitemap Di Blog - terdapat ratusan websie/blog yang sudah membahas bagaimana membuat menu sitemap di dalam blog..

tampilannya pun sudah dikreasikan oleh beberapa blogger agar bisa menyesuaikan template yang digunakan dan terlihat lebih keren

namun dalam artikel ini saya akan menjelaskan cara membuat sitemap blog yang mungkin tampilannya beda dengan yang pernah sudah di bahas..

sitemap termasuk menu navigasi yang wajib ada di setiap website yang berfungsi untuk lebih memudahkan pengguna mencari semua artikel yang sudah pernah di tulis berdasarkan kategori yang disediakan..

Bukan hanya sekedar pelengkap di dalam blog agar terlihat keren dan manis, tapi sitemap, kontak, privasi policy dan disclaimer merupakan salah satu syarat untuk mendaftar google adsense atau menjadi publisher google.

dalam artikel ini jika Anda tertarik menjadi salah satu publisher iklan dari google, maka dibawah ini Anda akan di ajarkan cara membuat sitemap di blog secara responsive dan tentunya ringan dari sisi penggunaan script.

Pengertian Apa Itu Sitemap Di Blog

Sitemap adalah sebuah halaman yang menampilkan semua artikel kita berdasarkan kategori masing-masing secara otomatis dan tentunya saya bikin responsive.

Untuk pengetian lain…

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan sitemap atau peta situs pada blog. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya… 

itu adalah penjelasan menurut Wikipedia..

Namun susai dengan penjelasannya, setiap blog memang wajib memiliki sebuah halaman sitemap/peta situs/denah artikel..

Selain berguna untuk SEO, sitemap juga berfungsi untuk memudahkan si pengguna mencari artikel sesuai dengan kategori yang diinginkan..

Dan pastinya di harapkan halaman sitemap tersebut responsive menyesuaikan ukuran layar pada smartphone.

Baca: Membuat catatan kaki keren di blog

Perlu di pahami sitemap yang saya bahas disini berbeda dengan sitemap yang ada pada webmaster tools..

perbedaan tersebut berada pada fungsinya...

sitemap yang kita bahas sekarang merupakan sebuah halaman yang berfungsi sebagai menu navigasi pengunjung..

sedangkan sitemap yang ada di webmaster tools berfungsi untuk mempermudah artikel di index oleh mesin pencarian google supaya apa yang kita tulis lebih mudah ditemukan pembaca di hasil pencarian..

Untuk cara membuat sitemap di webmaster tool pun mungkin saya akan bahas di lain hari.

mungkin langsung saja saya jelaskan yaa..

karena tujuan utama anda membaca artikel ini adalah untuk belajar membuat sitemap di blog..

Cara Membuat Halaman Sitemap di Blog 

Sayangnya contoh sitemap yang sudah jadi sudah saya copot dari blog ijo gading karena ingin menggunakan model yang lain..

lihat gambar dibawah ini.

oiyaa tutorial ini saya jelaskan menggunakan platform blogspot, jika Anda menggunakan wordpress mungkin bisa mencobanya.

Jika Anda tertarik ingin membuat sitemap tersebut di blog Anda, silahkan ikuti tutorial dibawah ini.

1. Seperti biasa, Anda login dulu ke blog masing-masing..
2. Pilih menu laman di blog Anda dan buat halaman baru.
3. Silahkan pilih mode html dan copy script 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>

<br />
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://ijo-gading.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://rawgit.com/ardycool/sitemapku/master/sitemap.js"></script>
</div>

Sekedar catatan saja, untuk script  url: 'http://ijo-gading.com/' bisa agan ganti dengan url pada blog Anda masing-masing yaa

4. Jangan lupa berikan judul dan simpan.

Lalu coba lihat hasilnya.

Okee jika berhasil, bisa agan sesuaikan link dari halaman sitemap tersebut dan taruh di tab sitemap pada blog

Baca: Cara membuat artikel terkait di bawah artikel

sampai disini itu dulu ya tutorial saya tentang cara membuat sitemap di blog yang semoga bisa berhasil di terapkan di blog masing masing..

Mungkin itu saja cara cara yang bisa saya share dan semoga tutorialnya berhasil dan bermamfaat bagi Anda pembaca blog ijo gading

tetap tabah dan happy blogging