Cara Menambahkan Widget Sitmap di Blog

Cara menambahkan widget sitemap di Blog – adapun keuntungan menambahkan widget sitemap ini adalah agar blog tampil lebih profisional dari sebelumnya. Selain itu pengunjung juga bias melihat dan mencari semua artikel blog kita dengan mudah. Tentunya itu akan menambah nilai plus untuk blog jika pengunjung membuka artikel tertentu pada widget sitemap ini.

Ok langsung saja cara penerapannya pun sangat mudah. Silahkan ikuti beberapa langkah dibawah ini :

Pertama, buka Blogger > Laman > Buat Laman Baru > Terapkan kode ini pada tap HTML

HTML

<div id="bp_toc">
</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>

Kemudian publikasikan laman.

Selanjutnya klik Template > Buka Edit Template > Terapkan kode dibawah ini tepat sebelum </style>

CSS

/* 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;}

Tentukan penggunaan font dan warna sesuai blog sobat

Terakhir simpan template.

Jika diblog sobat sudah terdapat ratusan artikel, ada baiknya membatasi tinggi halaman dengan menambahkan style pada kode pertama. Missal seperti ini :

HTML

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

Silahkan tentukan nilai max-height di atas sesuai keinginan

Demikian mengenai Cara Menambahkan Widget Sitmap di Blog. semoga bermanfaat.