Cara membuat Daftar Isi (Site Map) Otomatis dan Ringan


Selamat malam sobat, semoga selalu sehat selalu. Pada kesempatan ini saya akan membagi tutorial blog yaitu Cara membuat Daftar Isi (Site Map) Otomatis dan Ringan. Patinya sobat akan berfikir bagaimana kalau blognya ada Daftar isi agar mudah pengunjung lihat history posting sobat yang selama sobat buat dan di postingkan. Untuk artikel baru akan ditandai dengan "New!!" pada daftar isinya. Sungguh keren kan? Sobat ingin pasang? yuk ikuti langkah-langkah berikut dibawah ini :
  1. Login blog
  2. Lalu Buatlah Postingan baru atau buat di laman kosong baru
  3. Lalu pilih HTML disamping Compose
  4. Setelah itu Copy kode dibawah ini
  5. <div style="background-color: none; border: 1px solid #000000; height: 500px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
    <script src="http://me-sitemap.googlecode.com/files/sitemapblog.js"></script>
    <script src="http://eskun.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    </div>
  6. Lalu ganti kode yang berwarna merah dengan dengan url blog anda.
  7. Kemudian Publishkan dan lihat hasilnya.
Untuk tambahan, sobat bisa juga merubah atau memodifikasi sesuai selera tampilan daftar isi sobat :
  • none = Ini bisa anda kasih kode warna juga, karena none tersebut adalah warna buat background
  • 1 = Angka ini adalah ukuran buat tebal border bisa sobat rubah juga dengan angka 0-9
  • #000000 = Kode ini adalah kode warna buat border, bisa sobat rubah sesuka hati dengan kode warna
  • 500 = Angka ini adalah ukuran tinggi buat border daftar isi sobat
  • Auto = ini adalah margin dan overflow, bisa dirubah dengan angka yang sobat inginkan
  • 3 = Angaka ini adalah padding bisa sobat rubah dengan angak 0-9
  • Left = Adalah posisi tulisan sebelah kiri, bisa dirubah dengan Right(kanan) atau Center(tengah)
  • 100% = Ukuran lebar dari kotak daftar isi, rubah lah sesuai keinginan sobat
 
Sangatlah mudah bukan sobat membuatnya? Apabila ada pertanyaan silakan sobat semua tinggalkan komentar dibawah ini. Selamat mencoba ^_^

4 komentar

Write komentar
November 17, 2013 at 1:30 PM delete

thanks. sangat membantu.
visit back ya : wahyunorry.blogspot.com

Reply
avatar
August 3, 2014 at 1:59 PM delete

thanks bro :D hahhaha membantu sekaleeee . . .. visit back ya ditunggu .
http://ombimo.blogspot.com

Reply
avatar

Berkomentarlah sesuai konten. NO SARA, NO SPAM, NO LINK AKTIF dan semacamnya.
Terima kasih.

Conversion Conversion Emoticon Emoticon