Cara Menambah Widget Sitemap Di Blog [Daftar Isi]

Sobat,habis BW ke BLog tetangga,saya mempunyai sebuah oleh-oleh yakni Post ini.yaps Setelah saya BW ke Blog Arlina Design,Pasti Sudah kenal.Blognya kan Rame banget.Di sana saya menemukan Cara menambah Sitemap,Kalau saya bilang sih Daftar Isi Blog.Kalau sobat seorang pemula kalau baca di Arlina pasti agak bingung sedikit :).Kalau begitu saya akan menjelaskan bagaimana cara memasangnya dengan gambar-gambar untuk memper mudah sobat untuk memahaminya.Ok ayo,,,,,!

1.Buat halaman pada laman/page dengan nama Laman sitemap.

 2.Copy dan paste Kode di bawah ini pada laman.

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>

Lihat Gambar Agar lebih jelas.

3.Publikasikan Laman tersebut.

4.Sekarang menuju edit HTML pada template,

5.Cari </style> pada edit HTML dan paste kode di bawah ini tepat pada atas </style> tadi.

/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}

6. Simpan.

Cukup mudah kan,ok cukup sekian dulu kita berjumpa pada tutorial lain.
Ini adalah hasi sitemap saya.Bisa Juga di lihat pada menu.

 Sumber script:http://arlinadesign.blogspot.com/2015/03/cara-menambahkan-widget-sitemap-di-blog.html