Layaknya sebuah buku, blog juga harus memiliki daftar isi yang dapat memetakan isi blognya secara utuh, selain memetakan isi blog, daftar isi ini juga berfungsi untuk menambah kenyamanan pengunjung blog kita, karena sudah jelas isi dari blog itu apa saja, kemudian dari SEO daftar isi/sitemap ini berfungsi sebagai alat bantu mesin penacari dalam mengindex artikel kita.
Banyak sekali blog yang membahas tentang artikel sitemap ini, saya juga tidak tahu saya yang keberapa. hehe.. pada kesempatan kali ini saya akan membahas satu contoh sitemap yang bisa anda pakai pada blog anda, dan sitemap ini akan otomatis mendeteksi artikel baru pada blog anda alias otomatis. Sitemap ini bisa anda edit sendiri tampilannya dan warnanya nanti jika kalian ingin menggantinya, contoh tampilan sitemap ini sebagai berikut:
Cara menaruh sitemap pada blog
Sekarang, Bagaimana cara menambahkan sitemap pada blog yang kita kelola? silahkan anda login ke blogger anda, kemudian masuk ke menu Halaman dan silahkan buat Halaman Baru seperti gambar dibawah ini,
Selanjutnya silahkan anda masuk ke mode HTML dan masukkan kode dibawah ini pada halaman tersebut.
<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #991c37;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<br />
<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.infomatek.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #991c37;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<br />
<div id="toc">
<script src="https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js" type="text/javascript"></script>
<script src="https://www.infomatek.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Silahkan anda ubah warna backgroundnya dan warna tulisannya sesuai selera anda masing-masing seperti yang sudah saya lakukan dibawah ini.
Setelah itu silahkankan anda simpan halaman tersebut dan silahkan tambahkan menu baru pada blog anda khusus untuk menu sitemap ini.
Demikian artikel ini tentang cara menambah sitemap pada blog otomatis, semoga memberi manfaat dan selamat mencoba.
Tidak ada komentar