Cara Membuat Sitemap Otomatis dan Responsive Pada Blog



cara membuat sitemap otomatis - Sitemap ? apa yang dimaksud sitemap ? Kelihatannya bahasanya keren ya, kalo diterjemahkan ke bahasa kita Indonesia, artinya peta situs atau kumpulan dari artikel yang telah kita terbitkan.

sitemap merupakan salah satu menu blog yang wajib dibuat agar banyak artikel yang telah di publish bisa terkumpul sesuai kategori dan tentunya bisa mempermudah pengguna mencari artikel berdasarkan kebutuhan.

Bukan hanya sekedar pelengkap di dalam blog agar terlihat keren dan manis, tapi sitemap merupakan salah saru syarat untuk mendaftar google adsense atau menjdai publisher google.

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

Pengertian Dan Penjelasan Tentang Sitemap 

Pengertian 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… 
keren yaa bahasanya..

 tapi santai gan, yang saya tulis 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, juga 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
Dengan adanya peta situs di blog kita maka google akan lebih mudah juga mengindex setiap artikel yang kita secara otomatis, namun sitemap yang saya maksud ini beda dengan sitemap yang kita submit di webmaster tool.

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

Namun pertanyaanya adalah, apa iya setiap kita menerbitkan artikel baru kita harus menuliskan secara manual judul artikel pada blog di halaman sitemap sesuai kategori ?? seperti membuat sitemap dengan html, jelas sangat merepotkan.

hhmmmmm kayaknya konyol sie kalau terus-terusan seperti itu, tapi bagi sobat yang mampu melakukannya ya silahkan saja, tapi admin tidak merekomendasikan yaa..

Kalo begitu saya akan jelaskan tata cara membuat sitemap otomatis yang responsive dan tentunya sitemap SEO dan baik untuk blog.

Cara Mudah Membuat Sitemap Responsive di Blog

Jika ingin tau tampilan hasil sitemap yang akan kita buat yaa seperti tampilan sitemap di blog ijo gading yang pastinya sangat keren.
Baca: Mempecepat index google ke artikel baru
lihat gambar dibawah ini. oiyaa tutorial ini saya jelaskan menggunakan platform blogspot, jika sobat menggunakan wordpress bisa mencobanya.


Jika sobat semua tertarik ingin memasangnya di blog sobat, silahkan ikuti tutorial dibawah ini.
1. Seperti biasa, sobat login dulu ke blog masing-masing..
2. Pilih menu laman di blog sobat 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 sobat 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 sobat.

membuat sitemap ini juga termasuk salah satu syarat kelengkapan blog untuk mendaftar ke google adsense dan jika ingin menjadi publisher google maka harus mempunyai sitemap didalam blog..

sampai disni itu dulu ya tutorial saya tentang cara membuat sitemap di blog atau mungkin sobat ingin membuat recent post di bawah postingan yang langsung bisa mengikuti tutorialnya di membuat recent post blog

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

tetap tabah dan happy blogging

Reaksi:
Share this with short URL:

Artikel Terkait Lainnya:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser