Cara Membuat Sitemap / Daftar Isi Pakai Tabel Keren di Blogger

SepintasSeo - Di Blogspot atau Blogger terdapat feed yang bisa digunakan sebagai sitemap ataupun daftar isi. Cara membuat daftar isi atau sitemap tersebut sangat mudah atau gampang, yaitu dengan menempelkan sedikit kode javascript ke laman (page) ataupun dan tentunya dengan memanfaatkan feed atau RSS dari blog yang bersangkutan.
Cara Membuat Sitemap / Daftar Isi Pakai Tabel Keren di Blogger

Pembuatan sitemap atau daftar isi secara otomatis pada artikel ini ditujukan untuk pengunjung blog kita, bukan untuk robot Google. Platform blog yang dimaksud di sini adalah Blogger bukan Wordpress, Tumblr, dan platform blog lainnya. Blogger memberikan fasilitas untuk membuat sitemap dengan begitu mudah dan secara otomatis.

Nah dalam sitemap ini di modifikasi dengan bentuk tabel-tabel yang dipadukan dengan warna biru putih agar sitemap lebih keren, ringan dan responsif. Sitmap inilah yang saya pakai pada blog sepintasseo ini. Jika anda ingin membuat sitmap seperti ini silahkan ikuti cara-cara berikut ini :

Berikut cara membuat sitemap / daftar isi otomatis di Blogger :
#1. Masuk ke akun blogger
#2. Pilih menu 'Laman'
#3. Buat laman baru (Klik tombol 'Laman baru' > 'Laman kosong')
#4. Pilih mode 'HTML'
#5. Beri judul Daftar Isi atau Sitemap (judul terserah anda)
#6. Masukkan kode script alien ini sebagai berikut:

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#tocTable {
  border:2px solid white;
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
  margin:0 0 5px;
}
#tocTable th,
#tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
  width:60%;
  background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
  padding:0 !important;
  background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
  display:block;
  width:220px;
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  cursor:pointer;
  border:none;
  outline:none;
  background-color:#eee;
  margin:0 0 2px 0;
  padding:5px;
}
</style>
<script>
var theTotalPosts  = 9999, // Tentukan jumlah maksimal posting
    theOptions     = "Sortir...",                // Label opsi 1
    theSortPosts   = "Sortir berdasarkan Abjad", // Label opsi 2
    theSortLabels  = "Sortir berdasarkan Label", // Label opsi 3
    theTitles      = "Judul Artikel",  // Header tabel 1
    theLabels      = "Label Artikel",  // Header tabel 2
    theDates       = "Bulan Terbit",   // Header tabel 3
    theBlankLabels = "Tak Berlabel",   // Label kosong
    theSiteUrl     = "http://sepintasseo.blogspot.com"; //
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/toc-table-sort.js"></script></div>

#7. Ganti kode warna biru menjadi url blog anda
#8. Publikasikan

Nah itulah Cara Membuat Sitemap / Daftar Isi Pakai Tabel Keren di Blogger, laman sitemap/daftar isi ini sangat penting untuk sebuah blog, beguna untuk pengunjung blog yang ingin mengetahui artikel-artikel blog dan tentu saja menjadi syarat wajib untuk daftar Google Adsense.

65 Responses to "Cara Membuat Sitemap / Daftar Isi Pakai Tabel Keren di Blogger"

  1. gan maaf mau bertanya kok belum bisa ya saya aplikasikan ke blog saya. saya menggunakan domain tld basic blogger. terimkasih

    ReplyDelete
  2. Muannttaappp mas hendra.. Sukses selalu

    ReplyDelete
  3. Sangat bermanfaat buat blogger dan buat visitor jd lebih mudah mencari artikelnya.

    Submit juga artikelnya di Social bookmark majalah45.com ya gan

    ReplyDelete
  4. Makasih mas, tutorialnya setlah saya coba sukses 100% :D

    ReplyDelete
  5. nah mantap yang ini baru berhasil, makasih mas sitemap saya jadi keren nih :D
    kunjungi juga blog saya, baru belajar, hehe www.seriusgue.com

    ReplyDelete
  6. punya anna g bisa kang sudah di ganti url tetep ajj

    ReplyDelete
  7. bagus gan artikel nya kunjung balik ya gan http://loopnetwork21.blogspot.co.id/2016/04/cara-membuat-sitemap-di-blog.html

    ReplyDelete
  8. saya sudah coba gan tapi tidak bisa . kunbal ke komchar.blogspot.com

    ReplyDelete
  9. wahh..jd keren gan daftar isi blog sy..thanks

    ReplyDelete
  10. kasus... sitemap perlabel, tapilan no 11 atau tulisan terlalu banyak akan berpindah ke no 2_ dan setwrusnya.. jadi tidak teratur nomor poatingnya.. bgm itu gan ?

    ReplyDelete
  11. kasus... sitemap perlabel, tapilan no 11 atau tulisan terlalu banyak akan berpindah ke no 2_ dan setwrusnya.. jadi tidak teratur nomor poatingnya.. bgm itu gan ?

    ReplyDelete
  12. maaf mas, itu yang // Tentukan jumlah maksimal posting dan lainnya di hapus atau biarkan saja ?

    ReplyDelete
  13. Ko ga bisa nongol mas saya sudah terapkan cara caranya

    ReplyDelete
  14. idem ..
    gak muncul list blognya..

    ReplyDelete
  15. akhirnya nemu juga. makasih ...

    ReplyDelete
  16. kok gak bisa gan ??? apa ad syarat semisal tembako ama sirih juga ya gan ???
    mohon penjelasannya gan...
    heheheh

    ReplyDelete
  17. kok gak bisa gan ??? apa ad syarat semisal tembako ama sirih juga ya gan ???
    mohon penjelasannya gan...
    heheheh

    ReplyDelete
  18. di blog saya kok gagal ya gan?

    ReplyDelete
  19. kok di blog saya gak muncul ya gan?

    ReplyDelete
  20. Google Code udh gak bisa jadi hosting ya...
    sitemapnya gak jadi, gagal...

    Cara Membuat Sitemap Otomatis Sederhana di Blogger

    ReplyDelete
  21. SAYA SEKELUARGA INGIN MENGUCAPKAN BANYAK TERIMAH KASIH KEPADA AKI NAWE BERKAT BANTUANNNYA SEMUA HUTANG HUTANG SAYA SUDAH PADA LUNAS SEMUA BAHKAN SEKARAN SAYA SUDAH BISA BUKA TOKO SENDIRI,ITU SEMUA ATAS BANTUAN AKI YG TELAH MEMBERIKAN ANKA JITUNYA KEPADA SAYA DAN ALHAMDULILLAH ITU BENER2 TERBUKTI TEMBUS..BAGI ANDA YG INGIN SEPERTI SAYA DAN YANG SANGAT MEMERLUKAN ANGKA RITUAL 2D 3D 4D YANG DIJAMIN 100% TEMBUS SILAHKAN HUBUNGI AKI NAWE DI 085-218-379-259 ATAU KLIK SITUS DANA GAIB

    ReplyDelete
  22. ada style yang lebih keren gan >?

    ReplyDelete
  23. bisa di wordpress gk gan ?

    ReplyDelete
  24. ini bisa gak gan untuk di wordpress , soalnya saya paai worodpress

    ReplyDelete
  25. Gan ada backup Code JS nya gak Soalnya Js yg dari googlecode gk tampil

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Sitemapnya terkesan bagus dan rapi .. thanks tipsnya ..
      izin comot yeah mas ??

      www.sagoetunong.id

      Delete
  27. script error mohon diperbaiki http://dte-project.googlecode.com/svn/trunk/toc-table-sort.js

    ReplyDelete
  28. Kalau yang sudah custome domain gimana gan?

    ReplyDelete
  29. Keren gan mantap untuk blog saya

    ReplyDelete
  30. ga work lg sob, adakah script baru??

    ReplyDelete
  31. ko di blogku ngga jadi ya gan....

    ReplyDelete
  32. di blog ane kok kaga work yak gan

    ReplyDelete
  33. Scriptnya error jadi sitemapnya ga muncul boss

    ReplyDelete
  34. site maps blog ini saja ngak ada...tapi yach makasih
    salam infokito.com

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. thx bro tutorialnya, mampir juga diblog kecil ane, http://tutorialhpcom.blogspot.com

      Delete
  36. Wah mau saya coba nih, keren tampilannya.

    ReplyDelete
  37. thanks gan atas infonya...Kami menyediakan jasa travel tour biro perjlananan anda ke tanah suci mekah.. Kunjungi Halaman kami di Arwaniyyah Tour Travel

    Arwaniyyah Tour Travel

    ReplyDelete
  38. Gak bisa gan. Cuma muncul judulnya saja gmn nih

    ReplyDelete
  39. ga bisa gan, cuma muncul judul aja http://paytrenpurwokertomrv.blogspot.co.id/

    ReplyDelete
  40. kok tidak bisa di terapkan di blog..kayaknya ada yang salah kodenya.

    ReplyDelete
  41. script mati nggak bisa muncul

    ReplyDelete
  42. thanks you very much...check it out my blog http://yonbee.blogspot.com

    ReplyDelete

Berikan Saran dan Komentar Anda Jika menurut Anda Berguna :)