Membuat Sitemap Ganteng Sesuai Label di Blog

Sitemap disebut juga peta situs yang dapat diartikan sebagai daftar isi. Daftar isi adalah lembar halaman yang biasanya terletak pada halaman pertama menjadi petunjuk pokok isi buku beserta nomor halaman. Bedanya dengan di blog daftar isi tidak terletak pada halaman pertama melainkan terdapat pada menu navigasi.

Di sini saya akan sampaikan cara membuat sitemap atau daftar isi blog yang sesuai dengan kategori blog. Kenapa harus ada sitemap pada setiap blog, karena sitemap atau daftar isi akan mempermudah pengunjung dalam mencari artikel pada blog anda yang sudah memiliki pulusan, ratusan, bahkan ribuan artikel.

Sebelumnya saya pernah juga share tentang pembuatan sitemap pada blog di farhanweb. Akan tetapi yang saya share dulu tidak terpisah dari suatu judul label dengan yang lainnya.  Membuat Sitemap Tabel Flat di Blogger

Berikut Cara Membuat Sitemap atau Daftar isi Ganteng Sesuai Label di Blog

1. Login Blog

2. Laman - Buat Laman Baru

3. Copy kode di bawah ini kemudian simpan pada mode HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="f-web">
<script src="https://rawgit.com/farhanweb/farhanweb-javascript/master/sitemap-fast.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=farhan_web_Load"></script>
</div>
<style type="text/css">.f-web{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.f-web a{color:black;}
.f-web p .farhan_web_Label{background:#ED7FFD;display:block;padding:12px;}
.f-web ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.f-web ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#7F1AA5;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.f-web ol li:hover:after{left:-.5em;border-left-color:#7F1AA5;}
.f-webol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.f-web ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.farhan_web_Postname li:nth-of-type(odd){background:#43F28F;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>
</div>

4. Publis. Lihat hasilnya

Demikian tutorial Membuat Sitemap Ganteng Sesuai Label di Blog. Jika bermanfaat silahkan boleh dishare artikel ini. Terimakasih..