Cara Membuat Sitemap/Daftar isi Dengan Pilihan Sortir Di Blog

Sitemap adalah halaman yang berisi daftar artikel yang ada pada blog sobat. Pada sitemap di blog sobat ada artikel-artikel yang sudah sobat publikasikan.

Sekarang saya akan membagikan tutorial cara membuat sitemap otomatis dengan pilihan sortir yang super keren.






Kelebihan sitemap atau daftar isi dengan pilihan sortir.

• Fast loading
• Warna background bisa dipilih sesuai yang diinginkan
• Mengurutkan artikel berdasarkan abjad atau kategori
• Lebih teratur

Sekarang kita langsung pada tutorial cara memasukannya ke blog sobat.

• Login ke blogger

• Buat laman baru (page)
• Kasih judul laman, semisal: Daftar isi atau Sitemap

• Setelah itu klik mode HTML pada laman yang sobat buat

• Masukan kode HTML dibawah ini pada laman yang sedang sobat buat

<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:#2B2B2B;
    font-weight:bold;
    color:white;
    text-shadow:0 1px 0 rgba(0,0,0,.3);
  }
  #th-1 {
    width:60%;
    background-color:#0D6E95;
  }
  #th-2,#th-3 {width:20%}
  #tocTable td.toc-header-col-1,
  #tocTable td.toc-header-col-2 {
    padding:0 !important;
    background-color:#028080;
  }
  #tocTable td.toc-header-col-3 {background-color:#BFBFBF}
  #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:#028080;
    -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, //
      theOptions     = "Pilih berdasarkan",                //
      theSortPosts   = "Berdasarkan Abjad", //
      theSortLabels  = "Berdasarkan kategori", //
      theTitles      = "Judul post",  //
      theLabels      = "Kategori",  //
      theDates       = "Tanggal pub",   //
      theBlankLabels = "Tak Berlabel",   //
      theSiteUrl     = "URL BLOG SOBAT"; //
</script>
<script src="https://googledrive.com/host/0B61953MHHkhbR2lKMlBxemFFQ1E"></script>

• Keterangan:

- Warna biru ganti dengan url blog sobat

- Warna merah adalah warna judul / kategori / tanggal pub pada sitemap

- warna orange adalah warna pada tanggal sitemap
- Warna hijau adalah warna pada background sitemap (judul post dan kategori)

• Bingung milih warna? Atau gak tau kode-kode nya? klik di sini untuk mencari warna yang di inginkan sobat

• Silahkan sobat ganti dengan warna yang sobat inginkan.
• Jika sudah semua, tinggal sobat publikasikan
• Lihat sitemap yang tadi sobat buat. Jika sudah benar maka sobat sudah berhasil membuat daftar isi untuk blog nya.

Demikian tutorial cara membuat sitemap atau daftar isi dengan pilihan sortir di blog
Semoga bermamfaat.