Cara Membuat Halaman Sitemap / Daftar Isi Otomatis di Blog - Stemap atau bisa kita sebut daftar isi ini merupakan salah satu hal penting yang perlu kita msukkan di halman website / blog kita karena halaman ini mencakup keseluruhan postingan yang ada pada website kita . namun banyak yang malah membuat halaman daftar isi dengan menggunakan cara memanggil setiap dan mengedit setiap link pada saat membuat postingan baru di blog . saya rasa itu kurang efektif.
Maka dari itu pada kesempatan kali ini kita akan bahas bagaimana membuatnya dengan otomatis .langsung kita masuk ke tutorialnya ya.
Cara Membuat Sitemap / Daftar Isi Otomatis Pada Blog
1. Silahkan Kalian Login Terlebih dahulu ke blog.
2. Kemudian Masuk Ke Menu Pages / Halaman . Dan Buat New Page / Halaman Baru .
3. Pilih Salah Satu Kode Script Sitemap Dibawah Ini Untuk Kalian Copy.
Script 1
<script src="https://cdn.rawgit.com/mowdot/mysitemap/master/sitemapku.js"></script>
<script src="https://www.bosarik.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Script 2<script src="https://www.bosarik.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<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.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/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: #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.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Tampilan Script 1
Tampilan Script 2
4. Selanjutnya Paste Script Sitemap Ke Halaman baru tadi . Bagian Atas Ganti Compose ke HTML.
5. Selesai Tinggal Publish.
Nb : Jika Kalian Menggunakan Scrip Yang Pertama ( Pastikan Nama Website Yang Saya tandai merah ganti ke url website kalian . ok. Jika Menggunakan Script Ke 2 Abaikan Saja .
Kesimpulan
Sitemap merupakan daftar dari seluruh website kita , Membuat halaman ini agar para pembaca bisa melihat keseluruhan topik yang ada pada website kalian dengan mudah tampa mencari satu-satu dengan menu navigasi di home page . semoga artikel ini bermanfaat . selamat mencoba..
Comments
Post a Comment