Cara Membuat Widget Sitemap/Daftar Isi Berdasarkan Labels di Blog

Kali ini admin akan membagikan bagaimana Cara Membuat Sitemap Berdasarkan Labels. Sebelumnya admin juga sudah membagikan Bagaimana Cara Membuat Widget Sitemap Di Blog. Agak sedikit berbeda memang memang dengan tutorial sebelumnya, Kalau yang ini menyusun sitemap sesuai dengan labels yang ada diblog kalian.

Dan di sitemap ini juga tampilannya sangat simple dan juga responsive.

So bagaimana cara membuatnya? Check this out.

Cara Membuat Widget:

• Login ke laman Blogger.com

• Lalu klik Laman>Buat Laman Baru

• Klik tab HTML. Lalu masukan code dibawah ini *Beri nama "Sitemap"

<div class='jontor'>
  <script src="https://rawgit.com/mastamvan/backup/master/sitemap.js"></script>
  <script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=mas_tamvan_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .mas_tamvan_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor 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;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol 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);}
.jontor 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;}
.mas_tamvan_Postname li:nth-of-type(odd){background:#f1f3f3;}
.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>

• Kemudian simpan laman, dan lihat hasilnya.
  

Pada bagian max-results=5000 kalian bisa rubah jika post kalian sudah melebihi 5000 post.

Sekian post ini semoga dapat membantu sobat sekalian.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: