Cara Menambahkan Widget Sitemap Di Blog

Sebetulnya tutorial cara menambahkan widget sitemap atau daftar isi postingan blog yang akan bismillah gratis™ bagikan ini sudah pernah bismillah gratis™ buat. Namun mungkin blog tersebut jarang dikunjungi jadi akan bismillah gratis™ bagikan kembali disini.

Adapun laba menambahkan widget sitemap ini yaitu semoga blog tampil lebih profesional dari sebelumnya. Selain itu, pengunjung juga sanggup melihat dan mencari semua artikel blog kita dengan mudah. Tentunya itu akan menambah nilai plus untuk blog bila pengunjung membuka artikel tertentu pada widget sitemap ini.

Ok pribadi saja, cara penerapannya pun sangat mudah. Silakan ikuti beberapa langkah di bawah ini :

1. Buka Blogger > Laman > Buat Laman gres > Terapkan isyarat di bawah ini pada tab 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>

2. Kemudian publikasikan laman.
3. Selanjutnya, klik Template > Buka Edit Template > Terapkan isyarat di bawah ini sempurna sebelum </style>

/* 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.

4. Terakhir, simpan template.

Contohnya ibarat Gambar Dibawah ini.

Jika di blog sobat bismillah gratis™ sudah terdapat ratusan artikel, ada baiknya membatasi tinggi halaman dengan menambahkan style pada isyarat pertama. Misal ibarat ini :

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

Silakan tentukan nilai max-height di atas sesuai keinginan.

Demikianlah Mengenai Cara Menambahkan Widget Sitemap di Blog Semoga Bermanfaat.

Share this post