Cara Membuat Sitemap Otomatis dan Responsive Pada Blog

cara membuat sitemap otomatis dan responsive di blog

cara membuat sitemap otomatis dan responsive pada blog: Sitemap..? apaan tuh sitemap?? Keliatannya bahasanya keren yaa…

kalo diterjemahkan ke bahasa kita Indonesia, artinya peta situs atau denah dari kumpulan artikel yang telah kita terbitkan. 

penting ga sih membuat sitemap di blog atau apa kegunaanya.

jangan-jangan nanti malah bikin blog berat lagi atau merusak tampilannya.

aah syudahlah guys, mungkin saya khilaf nih kebanyaan bertanya kepada diri sendiri.


Pengertian Sitemap

Kalo dijelaskan apa itu sitemap di blog ?? 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 sesui 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 meng’index setiap artikel yang kita buat 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 ?? sperti membua 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 melahirkan sitemap otomatis yang responsive dan tentunya sitemap SEO dan baik untuk blog

Cara Membuat Sitemap di Blog

Jika ingin tau tampilan hasil sitemap yang akan kita buat yaa sepeti tampilan sitemap di blog ijo gading yang pastinya sangat keren.

liat gambar dibawah ini. oiyaa tutorial ini saya jelaskan menggunakan platform blogspot, jika sobat menggunakan wordpress bisa mencobanya.

sitemap otomatis dan responsive

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 yang berwarna merah 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 di 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

Share this

Subscribe to receive free email updates:

0 Response to "Cara Membuat Sitemap Otomatis dan Responsive Pada Blog"

Posting Komentar