Thursday, March 22, 2018

Membuat Daftar Isi Blog - Sitemap

Mungkin dalam suatu blog mungkin akan terasa kurang tanpa adanya navigasi atau tujuan saat pengunjung mengunjungi blog tersebut karena tidak adanya sitemap atau biasa kta sebut daftar isi.

Sebenarnya ada beberapa macam membuat daftar isi ini dan banyak cara membuat sitemap atau daftar isi pada blog. Kali ini saya akan berbagi tentang Membuat Daftar Isi Blog .

Untuk membuat daftar isi blog atau yang disebut juga sitemap, biasanya kita akan membutuhkan beberapa eksternal javascript yang diletakan di luar blogger. Cara membuat daftar isi blog yang seperti ini secara tidak langsung akan menambah berat blog anda saat diakses.


Membuat Daftar Isi Blog - Sitemap pada Blog

Dengan cara ini yaitu membuat daftar isi blog tanpa menggunakan eksternal javascript, akan mempercepat loading halaman blog dan akan membuat pengunjung blog Anda lebih betah berlama-lama membuka blog yang anda miliki.

Tentunya itu akan berdampak positif pada page view dan akan meningkatkan traffic blog juga yang didapatkan dari pengunjung blog.


Cara dalam membuat daftar isi blog tanpa eksternal javascript saya temukan dari pengalaman pribadi yang bersumber dari eksternal javascript yang digunakan Blog ini dan mencari sumber referensi yang lain.


Dan ternyata dala, membuat daftar isi blog tidaklah susah pada pemasangannya dan dampaknya tentu halaman daftar isi blog Anda akan loading lebih cepat dibanding menggunakan eksternal javascript. Sedangkan pada dampak positif yang lebih jauh lagi adalah kesempatan mendapatkan page view lebih banyak dari pengunjung blog.


Cara Membuat Sitemap Blog

Dalam pembuatan sitemap atau daftar isi blog ini dibutuhkan 2 buah script, dan yang pertama untuk meng-generate list artikel atau daftar postingan dan yang kedua untuk memanggil url postingan dari feed blog.

Kedua script tersebut akan dimasukan kedalam static page yang nantinya digunakan sebagai halaman daftar isi blog.

Script pertama yang akan digunakan untuk membuat daftar isi blog Anda :
Script pertama digunakan untuk membuat daftar isi blog :
Script kedua digunakan untuk memanggil posting dari feed blog :

<script src="http://diditsmile.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
!! Ganti http://diditsmile.blogspot.com dengan URL blog anda.
Cara membuat daftar isi blog atau sitemap blog yang cepat dalam loading blog adalah sebagai berikut :
1. Login ke akun blogger
2. Klik Posting kemudian Edit Pages
3. Klik New Page dan paste script pertama yang sudah di copy tadi
4. Kemudian paste script kedua persis dibawah script pertama
5. Klik Publish Page
6. Daftar isi blog tanpa javascript sudah jadi
Tujuan utama dalam pembuatan daftar isi blog tanpa eksternal javascript ini adalah supaya dapat memaksimalkan loading halaman blog Anda sehingga pengunjung blog di setiap kunjungannya akan lebih betah beralama-lama untuk membaca artikel yang ada pada blog anda.

Cara Lain Membuat Daftar Isi Pada Blog

Dikarenakan banyak orang yang sudah mencoba dan belum sukses dalam membuat daftar isi pada blog menggunakan cara diatas, maka saya menyediakan alternatif script untuk membuat daftar isi blog.

Cara membuat daftar isi pada blog dengan script yang saya sharing ini sangatlah mudah, langkah awal sama dengan cara pertama diatas yaitu membuat Halaman atau Pages baru yang nantinya akan dijadikan sebagai

Kemudian copy paste script berikut ini pada halaman yang sudah dibuat tadi

<style>#sitemap{height:1010px;padding:4px;overflow:auto;}
#sitemap a{color:#000000;font-weight:normal;}
#sitemap a:hover{color:#C97106;text-decoration:underline;}
</style>
<div id="sitemap"><script src="http://sites.google.com/site/diditwidi/js/daftar-isi.js" type="text/javascript"></script>
<script src="http://diditwidi.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  • Ganti http://diditsmile.blogspot.com dengn URL blog anda masing-masing.
  • Atur tampilan Daftar Isi Blog yang sudah dibuat dengan merubah kode CSS pada bagian <style>
........
........
</style>