Beranda / Tutorial Blogger

Cara Membuat Sitemap di Blog

Ditulis oleh Zulfan
Halaman Sitemap adalah sebuah halaman yang terdapat deretan artikel yang pernah sobat buat pada blog sobat. Halaman ini cukup penting untuk pembaca jika mereka ingin melihat artikel-artikel dari blog kita dengan cepat.

Jika saya membuka sebuah blog, maka saya sering mencari halaman sitemap blog yang saya buka karena jika kita mencari artikel lewat halaman sitemap maka akan jauh lebih mudah dan lebih cepat ketimbang mencari satu persatu.

Sitemap atau disebut juga dengan Daftar Isi juga dapat memudahkan pengunjung dalam mencari artikel dari blog kita. Halaman sitemap memang tidak terlalu penting dan tidak masalah juga jika sobat membuat halaman ini di blog sobat.

Jika sobat tidak tau bagimana cara membuat halaman sitemap di blog, sobat dapat mengikuti tutorial dibawah ini.

Cara Membuat Sitemap di Blog

Ada beberapa style sitemap yang akan saya bagikan kali ini, sobat dapat memilih salah satunya. Semua style sitemap yang akan saya bagikan dijamin 100% SEO Friendly.

#1 Sitemap Style 1

Pada style yang pertama ini, tampilan sitemap-nya sangat bagus, keren dan menarik. Cara membuatnya adalah sebagai berikut.
  1. Buka Blogger.com > Halaman.
  2. Lalu buatlah sebuah halaman baru.
  3. Pilih mode HTML.
  4. Kemudian copy dan paste-kan script dibawah ini pada halaman yang sobat buat tadi.
    5. <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;}
    /* 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;}
    </style>
  5. Setelah itu Publikasikan.
  6. Selesai.
Nanti hasilnya akan tampak seperti gambar dibawah ini.

Cara Membuat Sitemap di Blog
Demo

Script diatas saya dapatkan dari blog Arlinadzgn.com.
Untuk kolaborasi warna pada sitemap style 1 ini, sobat dapat mengubahnya sendiri.

#2 Sitemap Style 2

Pada style yang kedua ini, tampilan sitemap-nya cukup simple, ringan dan SEO Friendly. Cara membuatnya adalah sebagai berikut.
  1. Buka Blogger.com > Halaman.
  2. Lalu buatlah sebuah halaman baru.
  3. Pilih mode HTML.
  4. Kemudian copy dan paste-kan script dibawah ini pada halaman yang sobat buat tadi.
    5. <script src="https://cdn.rawgit.com/zulfanlife/Sitemap-by-Label/894ea273/sitemap%20by%20label.js"></script>
    <script src="https://www.nama-domain.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
  5. Setelah itu Publikasikan.
  6. Selesai.
Ubah tulisan yang saya tandai dengan warna merah dengan domain blog sobat.
Nanti hasilnya akan tampak seperti gambar dibawah ini.
Cara Membuat Sitemap di Blog
Demo
Pastikan setiap kali sobat membuat artikel, sobat telah mengisi label atau kategori untuk artikel yang sobat buat.
Demikian artikel yang berjudul Cara Membuat Sitemap di Blog, semoga artikel ini bermanfaat.

Tidak ada komentar

Posting Komentar