Membuat daftar isi blog menarik

Cara membuat daftar isi blog agar pengunjung lebih mudah menjelajahi semua artikel yang ada di blog ,daftar isi biasa juga disebut sitemap tapi sitemap memiliki duartian ada sitemap untuk dibaca manusia dan ada sitemap untuk dibaca oleh mesin pencari, jika kita memasang di blog maka daftar isilah istilah yang tepat jika kita memasang di searc console baru itulah yang tepat dinamakan sitemaps yang disubmit dalam format xml,
Baiklah kita lanjutkan mengenai daftar isi yang saya maksud yaitu seperti daftar isi pada blog ini

Pertama kita kopi kode html yang ada di kotak dibawah ini kopi semua kemudian buka dasbor blog anda dan buat laman baru bernama daftar isi dan pastikan kode yang anda kopi dalam mode html jika ingin melihat preview nya silahkan pilih tab kompose ,jika sudah sesuai keinginan klik publish .

Ingat sebelum mempublish silahkan ganti moroyo.com dengan alamat blog anda semoga berhasil
Untuk melihat demonya bisa diklik laman ini http://moroyo.com/p/daftar-isi.html?m=1

<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>

<div id=”toc”>
<script src=”https://cdn.rawgit.com/penaindigo/Pena-Indigo-Code/a134f9de/sitemappenaindigo.js” type=”text/javascript”></script>
<script src=”https://www.moroyo.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc”>
</script></div>

Kode di atas bukan saya yang buat saya hanya mengikuti trik yang telah saya coba dan berhasil .semoga bermanfaat mohon kritik dan saran terimakasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *