Pada tulisan sebelumnya telah dibahas mengenai dua buah model daftar isi (table of content) hasil olahan Master Blogger, Abu Farhan. Nah, pada tulisan bagian kedua ini akan dibahas mengenai daftar isi yang dapat menampilkan secara keseluruhan, per-kategori, atau pertanggal, seperti dapat dilihat pada Daftar Isi SC Community.
Daftar isi ini merupakan hasil olahan seorang blogger muda asal Makasar, Copycat91. Kelebihan lain dari daftar isi ini adalah bisa melihat ringkasan, atau lebih tepatnya melihat paragraf awal, dari sebuah artikel (jumlah karakternya bisa kita tentukan sendiri), sehingga dapat menarik pembaca untuk mengetahuinya lebih lanjut.
Untuk membuat daftar isi ini mirip dengan cara membuat daftar isi pada bagian ke-1, hanya pada script-nya saja yang berbeda. Untuk lebih jelasnya kamu dapat mengikuti langkah-langkah berikut:
Seperti pada pembuatan daftar isi bagian I, kamu juga harus membuatkan link untuk daftar isi ini yang bisa kamu tempatkan di navbar menu atau di sidebar. Link-nya misalnya seperti ini (jika memilih entri baru):
Selain itu kamu juga dapat menambahkan perintah overflow supaya tidak terlalu memanjang jika jumlah artikel pada blog kamu sudah banyak, misalnya seperti ini:
Ok coy, selamat mencoba....
Daftar isi ini merupakan hasil olahan seorang blogger muda asal Makasar, Copycat91. Kelebihan lain dari daftar isi ini adalah bisa melihat ringkasan, atau lebih tepatnya melihat paragraf awal, dari sebuah artikel (jumlah karakternya bisa kita tentukan sendiri), sehingga dapat menarik pembaca untuk mengetahuinya lebih lanjut.
Untuk membuat daftar isi ini mirip dengan cara membuat daftar isi pada bagian ke-1, hanya pada script-nya saja yang berbeda. Untuk lebih jelasnya kamu dapat mengikuti langkah-langkah berikut:
- Login ke Blogger.
- Kemudian buat sebuah Entri Baru atau Laman Baru dan pilih Edit HTML.
- Berilah judul, misalnya: Daftar Isi.
- Jika memilih Entri Baru, klik pada Opsi Entri dan setting supaya dipublikasikan mundur (ke tanggal pertama kali kamu posting).
- Kopikan script berikut (gunakan Control C) dan ganti NamaBlog sesuai nama Blog kamu:
Oya, kamu juga dapat mengubah jumlah karakter ringkasannya tidak 500. Misalnya dengan: 200, 300, 400, 600, dst.
<div id="cl_option"> Loading... </div> <div id="cl_content_list"></div> <script type="text/javascript">var jumlah_kata_dalam_ringkasan = 500;</script> <script src="https://sites.google.com/site/ruangsc/enes/blogtoc-v3.js"></script> <script src="http://NamaBlog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999"></script>
- Setelah di-paste, klik Terbitkan Entri dan ucapkan Alhamdulillah...
Seperti pada pembuatan daftar isi bagian I, kamu juga harus membuatkan link untuk daftar isi ini yang bisa kamu tempatkan di navbar menu atau di sidebar. Link-nya misalnya seperti ini (jika memilih entri baru):
<a href="http://NamaBlog.blogspot.com/2009/03/daftar-isi.html">Daftar Isi</a>atau seperti ini (jika memilih laman baru):
<a href="http://NamaBlog.blogspot.com/p/daftar-isi.html">Daftar Isi</a>
Selain itu kamu juga dapat menambahkan perintah overflow supaya tidak terlalu memanjang jika jumlah artikel pada blog kamu sudah banyak, misalnya seperti ini:
<div style="overflow:auto; border: 1px solid #CCC; margin:0px; padding:10px; width:auto; height:500px; background-color:#F0F0F0; text-align:left;">Script Yang Dikopikan</div>
Ok coy, selamat mencoba....
29 komentarPosting Komentar
blog q juga dah tak pasang sob
artikel yang mantap kang
Wah ...
jadi banyak belajar dari sini
thanks
Script keren! Patut dicoba!
mmmm... ntar aku suruh adeku coba deh.. soalnya dia yang ngerti... ehehehhee
salam sobat
wah tambah ilmu lagi ,membuat daftar isi di blog.
harus setting agar dpublikasikan mundur ke tgl pertama kali posting.
aduh masih ragu2 mencobanya,,berhasil ngga nantinya,,
diulang-ulang lagi nich bacanya,,,
Assalamualaikum........
Lama yeuh teu ngutak-ngatik blog
nyoba deui ah
Makasih sobat infona, good post
salam kanggo kulawargi sadaya
Gimana dengan di wp bisa gak yah
Saalam kena Boz
kalo bikin daftar link yang discrol oge sami sapertos ieu teu, Kang?
@Rep Semua:
Makasih komennya sob...
@Rep Nura:
Nggak susah kok mba, soalnya kan di postingan bikinnya.
@Rep Reca:
Wa'alaikum salam sob... Iraha atuh arek pulang ka Cikembar? Kangen yeuh...
@Rep Dadang:
Di WP beda sob, soalnya gak pake HTML, tp PHP. Salam kenal juga sob..
@Rep Annie:
Ngadamel kotak scroll-nya sami ceu, lebetna link sanes script Daftar Isi.
Bagus banget nih Kang, kenapa ngga dari dulu sih bikin posting ini, hehehe, sekarang lagi males ngerubah tampilan blog...
nice infonya sahabatku...praktek dicobain di blog aku lainnya
Thanks buat infonya uda lama aku cari artikel ini brusan nemu di sini karna biasanya memakai fasilitas edit thema dan itu sangat merepotkan bagi mobile bloging seperti saya,dan lngsung di tindak lanjuti.
Tutor nya mantap mas...
thanks mas..
salam kenal iaa.
Pembahasan kita sama ya beda isi
Tapi lebih mudah di sini caranya, krn gak perlu utak atik kode html widget
saya copy script buat kawan ku ya bro
wah makasih sOb sCriptnya,,
salam kenal ya sOb,,
gImana kAlaU kita sAling bErtUkar lInk sOb??
hmm.. bermanfaat juga nih... trims ya sharingnya... ^^
@Rep Ngepostingdoang:
Ok-ok aja sob. No problema..
thanks
mas maksud dari overflow itu apa..trz mksd dari scrifpt yang di kopikan itu yang mana y mas??
@Rep BlogPuisi:
Overflow itu kalo mau pake scroll sob. Script yg dikopikan tuh yang paling atas
Punteun kang Enes ah, pertanyaan saya mo diulang lagi sekalian sambil kenalan ma tmn2 yg lain he99,9x..
Dah dicoba kang.. tapi ada satu kategori yg isinya tidak terdetek (nama kategori muncul tapi isi dari kategori tsb tidak muncul). Kunaon kang nya?
Oya.. apakah daftar isi model ini mempengaruhi loading (menjadi lambat/berat)atau tidak?
TAMBAHAN: Apakah daftar isi model yg lain juga mempengaruhi loading? hatur nuhun
Mantap nih kang tipsnya . c\kapan2 ijin utk copas ya..
Makasi banyak akang
Gue coba broo...
Mantap gan infonya, dah dicoba di blog saya.
tank sob ditunggu kunjungan baliknya ya
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.