Cara Mudah Membuat Daftar Isi Otomatis [Sitemap] Blog Yang Keren


Daftar Isi pada sebuah blog merupakan berupa daftar artikel yang ada pada sebuah blog atau website dengan memberikan internal link pada semua laman artikel tertentu, dengan adanya daftar isi maka akan mempermudah seorang pengunjung untuk mencari apa yang dibutuhkan seorang pengunjung tersebut pada blog Anda. Namun tentu apabila dilakukan secara manual yang artinya setiap Anda membuat artikel yang baru Anda juga harus memperbarui laman daftar isi pada blog, maka itu akan sangat membosankan dan juga membutuhkan waktu meskipun memang tidak lama.

Cara Membuat Daftar Isi Otomatis Keren pada Blog

Lalu Bagaimana Supaya Daftar Isi Dapat Menjadi Otomatis?

Membuat daftar isi otomatis tentu bisa!! Yaitu dengan menggunakan javascript. Maka dari itu saya sekarang akan menjelaskan kepada Anda mengenai Cara Mudah Membuat Daftar Isi Otomatis [Sitemap] Blog Yang Keren, supaya daftar isi pada blog Anda menjadi otomatis dan tidak perlu diperbarui terus-menerus.

Baca juga "2 Cara Menambahkan Tanda Admin/Author pada Komentar Blog"

Membuat Daftar Isi Otomatis Keren

Sebelumnya untuk hasilnya bisa Anda lihat pada daftar isi blog ini atau lihat DEMO. Membuat daftar isi otomatis untuk blog cukup mudah Anda tinggal mengikuti langka-langkah berikut.

  1. Pertama Anda sudah harus masuk pada blogger.
  2. Lalu pada Dasboard blogger masuklah pada "Laman" dan buat Laman Baru dengan judul "Daftar Isi" atau "Sitemap". Atau Anda juga bis menggunakan laman daftar isi yang lama namun dengan menghapus isinya yang artinya pada posisi kosong.
  3. Setelah itu masukan kode script berikut pada mode HTML bukan Compose.

  4. #Tanpa Style CSS (Biasa)
    <div id="toc"> <script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script> <script src="http://www.bloggars.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script></div>
    #Style CSS (Keren)
    <style type="text/css">
    #toc{width:97%;margin:5px auto;border:1px solid #00a3c1;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
    .labl{color:#ff0000;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#00a3c1 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#00a3c1),color-stop(1,#C2EAFE));border:1px solid #00a3c1;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
    .labl a{color:#fff;}
    .labl:first-letter{text-transform:uppercase;}
    .new{color:#ff0000;font-weight:bold;font-style:italic;}
    .postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
    .postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
    </style>
    <div id="toc">
    <script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script>
    <script src="http://www.bloggars.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script></div>
    Catatan:
  5. Setelah memasukan salah satu kode script diatas, klik "Publikasikan" dan lihat hasilnya.
Baca juga "Cara Memasang Navigasi Page Number Pada Blog"

Ada Alasan mengapa Anda harus mengupload kembali javascript sitemap yang saya berikan, yaitu supaya semuanya tidak menggunakan url tersebut dan Anda punya url javascript sendiri dan tentu saja untuk membuat kecepatan loading laman menjadi lebih ringan karena url javascript uang Anda upload hanya digunakan oleh blog Anda sendiri. Namun menggunakan yang saya berikan diataspun tidak apa-apa apabila Anda malas untuk menguploadnya kembali.

Selesai dan degitulah cara membuat daftar isi otomatis pada sebuah blog, mudah bukan?! Terima kasih sudah membaca artikel saya kali ini, apabila ada yang ingin ditanyakan atau script tidak berfungsi bisa menghubungi saya atau Anda bisa berkomentar pada kolom komentar yang tersedia.

Related Posts:

16 comments:

  1. persis sama seperti itu dulu tampilan sitemap saya gan. tapi sekarang cuman tampil segaris biru.
    coba deh investigasi ke TKP nya di
    espelima.blogspot.co.id/p/site-map_68.html
    url nya aja dah aneh..
    oh ya itu style yg ke dua ga ketutup ya?. apa emang kepotong?.

    ReplyDelete
    Replies
    1. Ubah aja kang script punya akang sama yang diatas, yang kedua yang udah ada style nya.

      Delete
  2. itu file js nya gak bisa di unduh kang bro....?

    ReplyDelete
  3. saya sdh baca cara daftar hosting js juga.
    contoh nya saya mau upload script sitemap js. untuk hosting. contoh file script js yg gimana ya yg di upload mas bro..?

    ReplyDelete
    Replies
    1. Baca lagi postingan mengenai upload javascriptnya nanti juga ngerti. Untuk javascriptnya kan sudah ada di download di artikel ini pada catatan atau langsung saja klik alamat ini https://drive.google.com/file/d/0B-1BezpQT43XbG1NbU4xR1pZRzQ/view?usp=sharing kang.

      Delete
  4. Tapi di blogku pernah ku coba kok brantakan ya gan

    ReplyDelete
    Replies
    1. Berantakan bagaimana kang? Mungkin ada css ketinggalan, sehingga tampilannya berantakan.

      Delete
  5. Kak cara memasukkan beritanya ke dalam salh satu daftar isi gimna ya kak/?

    ReplyDelete
    Replies
    1. Maksudnya artikel?? Kalo artikel/postingan nanti otomatis akan terdapat pada daftar isi asalkan ikuti saja tutorial diatas dengan benar.

      Delete
  6. terima kasih gan, script daftar isinya bagus dan mudah dipasang. semoga sukses selalu.

    ReplyDelete
  7. berhasil gan, makasi banyak - banyak yaa,,,

    ReplyDelete
  8. haduh maaf gak baca rule...
    terima kasih... daftar isinya berhasil di blog saya :)

    ReplyDelete

Beri komentar dengan menggunakan Bahasa yang Baik dan Sopan!
Didalam komentar dilarang mencantumkan link hidup dan apabila Anda melakukannya maka Admin berhak menghapusnya.

Powered by Blogger.