Nice! Panduan Lengkap Cara Membuat Daftar Isi di Blog

Daftar isi otomatis (Foto: Lutfietutor)

Cara Membuat Daftar Isi 'Keren' pada Blogspot Secara Otomatis - Daftar Isi (sitemap) pada blog sama halnya dengan daftar isi yang sobat temui pada majalah, buku dan sejenisnya. Khusus untuk blog fungsinya sebagai susunan artikel berupa kumpulan tautan judul postingan yang terstruktur. List daftar isi pada blog dapat menampilkan perlabel, abjad dan lain-lain, sesuai setelan dan modikasi.

Tutorial kali ini adalah membuat daftar isi artikel blog otomatis yang unik dan menarik. Modifikasi dari Om Farhan ini menggunakan teknik kolaborasi JavaScript dan Jquery sehingga terlihat dinamis. Tampilan daftar isi perlabel seperti menu navigasi vertikal. Screenshootnya dapat sobat lihat pada menu daftar isi blog ini. Admin meletakkan pada halaman posting, tepatnya mempaste kode di editor HTML post. Sobat dapat juga menampilkannya melalui sidebar atau widget lainnya.

Tujuan membuat daftar isi blog terutama sekali adalah memudahkan pengunjung menelusuri blog sobat sehingga meningkatnya Pageview blog dan artikel populer. Nah, berikut cara memasang daftar isi blog otomatis, cekidot:
1. Setelah sobat berada pada halaman Dashboard Blogger,
2. Untuk pemasangan di sidebar sehinga dapat tampil di
     halaman utama maupun postingan lainnya:
     a. Beralih ke Tata Letak, klik Tambahkan Gadget,
     b. Pilih HTML/JavaScript,
     c. Masukkan kode di bawah ini ke dalam kotak tersebut,

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://www.walman.org/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>

         ____Ubah url berwarna biru menjadi alamat blog sobat.
     d. Selesai, Simpan Template.

3. Untuk pemasangan pada 'halaman post' caranya mudah, cukup membuat entri baru dan copykan
    script di atas di dalam editor HTML posting, beri judul Daftar isi atau Sitemap.

Demikian cara membuat daftar isi otomatis pada blog, semoga bermanfaat. Happy blogging

Description: Nice! Panduan Lengkap Cara Membuat Daftar Isi di Blog Rating: 3.5 Reviewer: Unknown ItemReviewed: Nice! Panduan Lengkap Cara Membuat Daftar Isi di Blog

38 Komentar

Balas

lAGUMUSIK

8 Juni 2013 pukul 01.24

wah tips yg sangat keren, makasih sob..

profil

8 Juni 2013 pukul 01.25

thank's gan atas postingannya..

Admin

8 Juni 2013 pukul 07.59

@Sandi Metaland: Siip mas, semoga bermanfaat :)
@lAGUMUSIK: Sama-sama mas ....
@profil: Yup gan,

Terima kasih kembali atas kunjungannya (y)

10 Juni 2013 pukul 23.56

Thx bnget ne OM ;)

http://dahams-skellorz.blogspot.com/

11 Juni 2013 pukul 11.47

@dahams skellorz: Terima kasih juga atas kunjungannya :)

Blogger

20 Juni 2013 pukul 18.24

gan, kalau mau buat daftar isinya per label tetapi artikel paling baru yang ditampilkan pertama gimana gan?
contohnya di pages ini: http://www.mangaku.web.id/2011/04/baca-manga-komik-manga-fairy-tail.html

23 Juni 2013 pukul 20.09

@Blogger: kode 'daftar isi' di atas bersifat JavaScript dan masih awam buat penulis. Insya Allah itu dijadikan PR, hehe ...

25 Juni 2013 pukul 09.49

mantap gan,ane cari trik tntang sitemap

http://melshadi.blogspot.com/

Anonim

29 Juni 2013 pukul 20.51

apa ini sama dengan membuat menu dari label pak?

30 Juni 2013 pukul 04.11

mantabz gan

4 Juli 2013 pukul 22.22

ty ya gan atas infonya (Y) salam bloger indonesia
kapan" mampir ke blog saya :)

http://lagucamfrogmp3.blogspot.com/

LINTAS UNIK

5 Juli 2013 pukul 17.15

ini script dari abu farhan kan??

7 Juli 2013 pukul 10.47

@moocensusan: Sederhananya hampir sama membuat menu dari label. Namun ini bekerja secara otomatis menampilkan link berdasarkan label.
@LINTAS UNIK: Benar ini modifikasi dari Abu Farhan :)
@All: Terima kasih atas kunjungannya ... :D

arul

10 Juli 2013 pukul 01.51

makasih sob.. Bagaimana untuk mengatur lebar dari kotaknya n warna tiap labenya ya?????

11 Juli 2013 pukul 05.40

@arul: Ya sob :). Mengatur desainnya pada kode http://abu-farhan.com/script/acctoc/acc-toc.css.

niasbaluse

14 Juli 2013 pukul 03.14

gmn atur panjang isi label y, melebar kesamping, jd jelek. makasih sebelumnya

14 Juli 2013 pukul 03.16

gmn atur lebar y gan? melebar kesamping, jd jelek tampilannya gak teratur

Farid Da Natow

15 Juli 2013 pukul 08.36

mas, mau tanya. daftar isi kan kayak kategori2...
lha pas mau ngepost terus ditentukan masuk kategori mana itu cara nentukannya gimana?

16 Juli 2013 pukul 11.03

Thx sob ilmunya, bermanfaat.!!

Dhani

27 Juli 2013 pukul 10.19

wahhh mantap bgt tuchhh

sukses ajh dach gan

Mega Hipp

28 Juli 2013 pukul 12.18

Kok Tk bisa di pencet mas

Muhammad Hasan

5 Agustus 2013 pukul 16.24

gan ane mw buat daftar ea mcm di atas tu ,yg warn a merah mcm mana ???

Rendy_Oke

8 Agustus 2013 pukul 21.18

Nice banget infonya gan

jangan lupa dateng ke blog ane:
orangpinterdoang.blogspot.com

Agel Ahmad

21 Agustus 2013 pukul 22.36

keren gan postingan serta blognya dan sangat bermanfaat..
btw ane numpang taro link gan dan semoga bermanfaat juga bagi yg lain.

http://masternetmasterpulsa.blogspot.com/

27 Agustus 2013 pukul 19.29

keren sob, thx manfaat banget..

Hariyadi Prabowo

1 September 2013 pukul 23.08

Wah Form Daftar isian nya keren banget nambah ilmu saya

terus berkreasi sob

16 September 2013 pukul 00.22

http://kampussantri.blogspot.com/

kunjungan balik ya gan....

15 Oktober 2013 pukul 09.50

buat agan yang menghuni rumah ini met pagi... ane udah follow blog agan... ditunggu kunjungannya yaa..!! jangan lupa follow back

http://www.idwebcostumer.com/