Cara Mudah Membuat Sitemap/Daftar Isi Responsive, Keren dan Menarik Pada Blog

Hallo sobat tutorial, jumpa lagi di blog saya yang sederhana ini. Pada artikel kali ini saya akan membagikan tutorial cara membuat sitemap keren pada blog sobat. Sebagian sobat tutorial mungkin masih ada yang belum tahu apa itu sitemap, khususnya bagi blogger yang baru belajar ngeblog dan belajar tentang SEO, Ok apa itu sitemap?

Sitemap atau Daftar Isi merupakan salah satu halaman blog yang wajib ada pada sebuah blog. Sitemap merupakan salah satu cara sederhana bagi para blogger untuk menginformasikan kepada search engine (Google) tentang isi halaman yang ada pada situs kita yang bisa di crawl.Pasalnya, dengan adanya halaman Sitemap atau Daftar Isi tentu akan memudahkan pengunjung untuk melihat dan mencari isi semua artikel yang ada di blog kita.

Ada banyak sekali model sitemap dalam dunia website, tetapi di sini saya mempunyai sebuah sitemap yang menurut saya cukup keren dan menarik, contoh nya kurang lebih seperti yang sedang saya gunakan pada blog saya ini, untuk demonya silahkan lihat DISINI

Baiklah, sekarang mari kita langsung ke tutorial membuat sitemap yang benar dan pastinya dengan tampilan yang keren dan menarik.

Cara Mudah Membuat Sitemap/Daftar Isi yang Keren dan Menarik Pada Blog

1. Buka Dashbord dari blog sobat, Lalu, pilih Laman > Laman Baru

2. Setelah itu, Beri Judul pada Laman tersebut Misalnya : Sitemap, Daftar Isi atau lainnya

3. Lalu, ubah ke Mode HTML jangan Mode Compose ya

4. Copy dan pastekan kode dibawah ini ke Laman Daftar Isi yang telah kita buat tadi. Ingat naruhnya di HTML ya.

<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: #3498DB;
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><br />
<script src="https://sobatmamang.blogspot.co.id//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

5. Jangan lupa ganti https://sobatmamang.blogspot.co.id dengan URL blog sobat masing-masing
6. Tinggal Save dan Publikasikan, Selesai...

Note :

Sebelum menggunakan sitemap yang perlu sobat ingat pastikan terlebih dahulu membuat content artikel yaitu dengan memberi label pada setiap artikel yang sobat buat. karena jika belum membuat label pada artikel maka pembuatan sitemap ini tidak akan berhasil, di karenakan sitemap ini terkandung dari label pada setiap artikel.

Demikian Cara Mudah Membuat Sitemap/Daftar Isi yang Keren dan Menarik Blogger. Semoga tutorial kali ini bermanfaat dan dapat menambah wawasan sobat. Selamat mencoba!