Cara Membuat Widget Sitemap/Daftar Isi Di Blog

Kali ini admin akan membuat tutor Cara Membuat Widget Sitemap di Blog.

Kenapa kita harus membuat sitemap diblog? Karena dengan sitemap, dapat memudahkan visitor untuk mencari apa yang mereka inginkan dan juga untuk memudahkan pengindexan google.

Sebelumnya apa itu sitemap: Sitemap adalah sebuah daftar isi dari artikel-artikel yang kita buat. Dari segi desaign banyak yang berbeda-beda, jadi tinggal kita sesuaikan dengan apa yang kita mau dan cocok untuk kita.

Dan selain itu banyak keuntungan yang kita dapatkan dengan membuat sitemap, selain memudahkan visitor mencari apa yang mereka inginkan dan pengindexan google, sitemap juga membuat blog kita terlihat lebih professional dengan adanya sitemap tersebut. Mari kita terapkan pada blog kita.

Cara Membuat Sitemap:

• Login ke laman blogger.com.

• Lalu klik Laman>Buat laman baru.
  
  
  
• Klik tab HTML, lalu masukan code dibawah ini *beri nama sitemap

<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 Tema> Edit HTML.

• Lalu terapkan code ini tepat sebelum code </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;}

• Klik simpan template dan lihat hasilnya.

Jika blog kalian sudah terdapat ratusan artikel ada baiknya menambahkan code dibawah ini agar terlihat lebih rapi.

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

* Sesuaikan max-height sesuai keingingan kalian.

Sekian Cara Membuat Widget Sitemap di Blog ini, semoga membantu kalian.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: