Mecha versi 2.6.4 sudah dirilis!

Gawai Daftar Isi Tabulasi untuk Blogger

Tabel Konten
  1. Integrasi Gawai ke Blogger 
    1. Pengaturan 
    2. Contoh 
    3. Contoh 

Pembaruan 2018/08/13: Berbagai perubahan dan fitur baru telah ditambahkan untuk memenuhi saran dan permintaan para pengguna. Beberapa diskusi yang terdapat di dalam ruang komentar mungkin sudah tidak relevan lagi dengan isi artikel.

Widget Daftar Isi Tabulasi untuk Bogger

Berikut ini adalah sebuah gawai daftar isi blog berbentuk tabulasi. Gawai ini terdiri dari dua bilah sisi berupa daftar label dan daftar artikel. Setiap nama label akan menjadi tab, sedangkan daftar artikel akan menjadi panel tab yang akan tampil setiap kali tab diklik:

Lihat Demo

Integrasi Gawai ke Blogger 

Pertama-tama klik menu Laman pada bilah sisi. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Blogger Post Editor
Menambahkan halaman statis baru.

Setelah itu kamu akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Blogger Post Editor
Memilih mode HTML.

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link href="//dte-project.github.io/blogger/tabbed-toc/224c19.min.css" rel="stylesheet">
<script src="//dte-project.github.io/blogger/tabbed-toc.min.js?url=http://dte-feed.blogspot.com&amp;active=0"></script>

Ganti URL yang Saya beri tanda dengan alamat blog Anda kemudian klik tombol Publikasikan.

Menghilangkan parameter url akan membuat gawai ini secara otomatis menentukan URL halaman muka berdasarkan URL pada bilah alamat. Berkas 224c19.min.css adalah berkas tema. Kamu bisa menghapus berkas tersebut jika kamu ingin membuat tema sendiri:

<style>
/* Kode tema kustom di sini… */
</style>
<script src="//dte-project.github.io/blogger/tabbed-toc.min.js?active=0"></script>

Pengaturan 

OpsiKeterangan
urlGanti nilainya dengan alamat blog kamu atau alamat blog orang lain yang ingin kamu tampilkan kontennya.
idAlternatif untuk menentukan sumber data selain dengan url. Ganti nilainya dengan ID blog kamu atau ID blog orang lain yang ingin kamu tampilkan kontennya. ID harus dituliskan sebagai string. Menambahkan parameter id akan mengabaikan nilai parameter url. Contoh: id="4890949828965961610"
directionDireksi teks pada blog kamu. Nilainya bisa berupa "ltr" atau "rtl".
containerSelektor CSS untuk menentukan di mana gawai akan ditampilkan. Menghilangkan parameter ini akan membuat gawai secara otomatis menempatkan diri tepat sebelum tag <script> yang kamu sisipkan.
activeDigunakan untuk menentukan urutan tab yang akan aktif saat pertama kali halaman dimuat. Nilai 0 akan membuat tab di urutan pertama menjadi aktif. Nilai "Musim Gugur" akan membuat tab dengan label Musim Gugur menjadi aktif.
hideTentukan nama-nama label yang tidak ingin kamu tampilkan.
dateGanti nilainya menjadi false untuk menyembunyikan waktu penerbitan artikel. Selain itu akan dianggap sebagai format waktu penerbitan: %Y% untuk menampilkan angka tahun, %M% untuk menampilkan angka bulan, %D% untuk menampilkan angka hari, %h% untuk menampilkan angka jam format 12, %m% untuk menampilkan angka menit, %s% untuk menampilkan angka detik, %M~% untuk menampilkan nama bulan, %D~% untuk menampilkan nama hari, %h~% untuk menampilkan angka jam format 24, dan %N% untuk menampilkan keterangan waktu format 12; nilainya bisa berupa "AM" atau "PM" tergantung dari data text[midday].
excerptGanti nilainya menjadi true untuk menampilkan ringkasan artikel. Atau gunakan angka untuk menentukan maksimal karakter yang akan ditampilkan dalam ringkasan artikel sebelum diakhiri oleh karakter ….
imageGanti nilainya menjadi true untuk menampilkan gambar artikel. Atau gunakan angka untuk menentukan ukuran lebar dan tinggi gambar. Kamu juga bisa menggunakan parameter standar gambar Google untuk memanipulasi ukuran, seperti "s100", "s100-c", dan "w100-h50".
targetJika bernilai "_blank", semua tautan akan terbuka di tab/jendela baru saat diklik.
loadDigunakan untuk menentukan waktu penundaan pemuatan JSON. Tentukan sebagai angka untuk waktu penundaan memuat dalam satuan milidetik atau true agar gawai ini memuat setelah keseluruhan halaman telah selesai termuat.
sortfalse untuk menyortir artikel secara normal berdasarkan bulan terbit, 1 untuk menyortir artikel dari A ke Z, -1 untuk menyortir artikel dari Z ke A.
recentfalse untuk menyembunyikan tanda New!. Ganti dengan angka untuk menentukan berapa banyak artikel terbaru yang ingin ditandai dengan label New!.
text[recent]Markup HTML bebas untuk membuat label New! pada artikel-artikel terbaru.
text[months]Digunakan untuk menentukan nama-nama bulan sesuai dengan sistem kalender di negara tempat kamu tinggal.
text[days]Digunakan untuk menentukan nama-nama hari sesuai dengan sistem kalender di negara tempat kamu tinggal.

Contoh 

Menampilkan gambar dan ringkasan:

<script src="tabbed-toc.min.js?excerpt=200&amp;image=80"></script>

Membuat tab ke tiga aktif saat pertama kali halaman dimuat:

<script src="tabbed-toc.min.js?active=2"></script>

Membuat tab dengan label Iklan aktif saat pertama kali halaman dimuat:

<script src="tabbed-toc.min.js?active=Iklan"></script>

Menyembunyikan tab dengan label Iklan dan Tautan:

<script src="tabbed-toc.min.js?hide=["Iklan","Tautan"]"></script>
<script src="tabbed-toc.min.js?hide[0]=Iklan&amp;hide[1]=Tautan"></script>

Memodifikasi format waktu penerbitan (karakter % harus diubah menjadi %25):

<script src="tabbed-toc.min.js?date=%25Y%25-%25M%25-%25D%25%20%25h%25%3A%25m%25%3A%25s%25"></script>

Menentukan kontainer spesifik (karakter # harus diubah menjadi %23):

<script src="tabbed-toc.min.js?container=%23content"></script>

Kemudian, pada suatu tempat, Anda buat elemen HTML seperti ini:

<div id="content"></div>

Gunakan alat ini untuk mempermudah dalam mengubah karakter mentah menjadi karakter yang aman untuk URL.

Menyembunyikan iklan:

<script src="tabbed-toc.min.js?ad=false"></script>

Gawai ini Saya buat sebagai kode sumber yang terbuka sehingga Saya pada dasarnya tidak menghasilkan keuntungan apa-apa secara finansial. Ada baiknya kamu bersedia membantu Saya untuk menyebarkan alamat web ini dengan cara tidak menentukan nilai parameter ad sebagai false atau dengan cara berinisiatif memasang iklan pada web ini. Dengan begitu Saya dapat terus termotivasi untuk mengembangkan gawai-gawai yang ada. Menentukan nilai berupa angka akan membuat tautan web ini muncul setiap N sekali dimana N memiliki arti seberapa banyak pengunjung yang sama memuat ulang halaman kamu:

<script src="tabbed-toc.min.js?ad=10"></script>

Contoh 

96 Komentar

Anonim

\o/ thanks for the great blogger plugin.

Hopefully there will version 2 with integrate with navigation

Taufik Nurrohman

I've observed that most users not really like the navigation system on their table of content <=) I'll focus on stuff relating to the navigation system in the larger plugins :)

Anonim

^_^ yes i know, but I has an idea to place sitemap widget on homepage instead of sitemap page.

do you thinks it a best ways for users to navigate and seo friendly?

Taufik Nurrohman

I don't think that JavaScript is good for SEO. Although they are good for quick content access. I mean, search engines may not be concerned with a variety of links you put in the home page if they are generated from JavaScript, search engines will ignore it and turned their attention with something they can read (something that's not the home page).
Putting a table of contents in the home page might be nice for your reader access (most likely it will lead them to open multiple pages at once), but never think about SEO.

Randy

wah thanks a lot bang :) makin mantap aja nih tutorialnya ,udah q pake buat arsip q hehe

Anonim

I also notice a little bits problem when i set true at "showSummaries" and "showThumbnails"

video problem - screenr.com/uFT7

Taufik Nurrohman

Yes. It happens in Chrome:

This widget works fine in Firefox, Safari, Opera and IE9. I'll try to fix this issue.

Anonim

cocok bgt sama warna blog saya. izin pakek :D

abang ichal

nambahin overflow:hidden di wilayah daftar judul postnya bmana?

Taufik Nurrohman

#tabbed-toc .toc-content {
overflow:hidden;
}

abang ichal

oo ok ok.. thenks yah

uki

wow...keren deh :D

tes

keren Banget mas :D

Beben Koben

ini mah kategori jadi daftar isi...xixixixi

Erwin pratama

Apa bisa widget ini dikasih gambar. maksudnya bagian pos disebelah kanan dikasih gambar seperti fitur readmore. maaf cuman naya doang, maklum newbie ane.

Taufik Nurrohman

Tinggal set opsi showThumbnails menjadi true. Kalau ingin gambarnya berada di sebelah kanan, kamu harus mengedit kode CSS di bagian ini, ubah menjadi float:right

#tabbed-toc .panel li .summary img.thumbnail {
float:right;
margin:0 0 0 8px;
}

Erwin

oh gita ya om . mau tanya lagi. itu berdasarkan frekuensi bulan atau berdasarkan label ya? terimakasih.

Taufik Nurrohman

Penggabungan sortir berdasarkan label dan abjad (tidak seperti arsip blog).

Salim

ijin pake mas taufik .. :)

Salim

em, udah dipake nih, tapi kok saya taruh link css yang saya ubah kok nggak bisa ya mas ?

Taufik Nurrohman

Kalau susah pakai tag <style> saja:

<style type="text/css">
Kode CSS di sini...
</style>

Rosyd Aqbar

apik pak tofik, tapi keliatanya masih ada yang kurang deh kang, Boleh di kasih efek transisi ga ? biar keren gitu :D

Unknown

mantap bang.. :-bd Thanks yaa.. :)

oya bang, ko ada 2 label yang ga nampilin isi postingannya..
gmna ni??
mohon pencerahan'a.. :( :'(
cek http://boyrohman.blogspot.com/2011/11/daftar-isi.html

Unknown

mantaf :-bd

Ismail Sossé Alaoui

Thank you 1.000.000 times bro taufik for this precious work
i like it very much

Freelancer

Wuih mantab kang, langsung aja deh saya pakai di blog Direktori Indonesia.. terimakasih ya gan..

Unknown

kang toufik, saya coba edit css nya untuk ganti warna, trus saya coba untuk uploud ndiri di google code, dengan pertimbangan mencegah jika scripst banyak yang pakai, nanti akan di banned/eror.. untuk kode file.js nya ga ada masalah.. tapi koq untuk file css nya ga bisa ya kang.. ada tutor buat nyimpan CSS nya.. file udah saya save di notepad dengan nama xxx.css, pas saya panggil not work.. ada masukan kang..?

Anonim

terimakasih kang,blog saya jadi tambah keren tuh,,,,coba ditinjau

Anonim

kok gak muncul mas isi kategorinya ? solusinya gmana nih mas ?

Taufik Nurrohman

Feed posting jangan dimatikan...

Unknown

sama mas, kalau saya sebagian dari isi label hilang :( nih gimana solusinya yah??

Unknown

Wah fiturnya semakin lengkap..
:-bd

Unknown

Mas bisa g klo di bikinnya label tertentu aja (tetapi lebih dari satu label)? Misalnya label teknologi dan informasi saja

Anonim

Trima Kasih, saya sudah menggunakanan widget daftar isi ini.. saya cuma merubah kode warna untuk penyesuaian dengan tampilan blog.

Unknown

mas ada gk daftar isi yg ringan..

Bima Aditama

sangat membantu gan :)

Unknown

Wah bermanfaat sekali mas :-bd. Tapi saya pengen ganti warnanya bagaimana caranya mas ??

Anonim

Memuat... DTE :] var tabbedTOC = { blogUrl: "http://dandylaksana.blogspot.com", // Blog URL containerId: "tabbed-toc", // Container ID activeTab: 1, // The default active tab index (default: the first tab) showDates: false, // `true` ...
Read More

Ko jadi gini ya sob

Unknown

mas taufiq , kalo daftar isi tabulasinya berdasarkan bulan terbit ,gimana ya mas ?

Taufik Nurrohman

Ide bagus. Tapi belum dibuat.

Unknown

tolong ya mas hehe ,saya lagi butuh soalnya mas
biar pengunjung gak bingung soalnya kalo pake label gak beraturan mana postingan terbaru dengan yang lama,acak-acakan nanti urutannya hehe
biar lebih nyaman mas :D

Unknown

keren bgt mas, btw buatnya pake apa aja ni ?

Unknown

Punya ane kok gini Bang

Cara ilangin Bullet-bulletnya gmana bang? :D

Taufik Nurrohman

Tambahkan CSS ini:

<style>
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
list-style:none !important;
list-style-image:none !important;
}
#tabbed-toc ul:before,
#tabbed-toc ol:before,
#tabbed-toc li:before,
#tabbed-toc ul:after,
#tabbed-toc ol:after,
#tabbed-toc li:after {display:none}
</style>

Unknown

Mas Taufik saya mau nanya. Kalau Daftar Isi kayak punya mas taufik gimana ??
Soalnya aku tertarik...

Unknown

Mas mau nanya seputar daftar isi kenapa ya setiap daftar isi yang saya pasang di postingan saat di preview berhasil tapi setelah saya publikasikan kejadian nya kaya gini (lihat sampai looding selesai)
http://www.fullblogdesign.com/2012/06/daftar-isi.html

Unknown

Saya juga dulu gitu mas, gatau sih masalahnya kenapa, tapi pas ganti template kejadian kyk gitu ngga ada lagi, jdi mungkin bisa karena template atau faktor lain yang tidak saya tahu :D

Unknown

Dah ketemu mas ternyata pas saya hapus script emoticon nya nya sekarang sudah normal kembali

Unknown

Weehh :( gitu ternyata :'(

Yanuar Aji Saputro

mas, naruh javascriptnya di sebelah mna yaah?

Unknown

bisa engga kalau kategori yang akan muncul ditentuin sendiri?

soalnya saya mau munculin 1 kategori saja

Unknown

sesuai judul :p daftar isi mengcakup semuanya bukan terpisah-pisah ~x(

#kaboerrrrrrr =p*

Anonim

widget daftar isinya keren banget mas ....pasti scriptnya juga rumit banget :D gmana cara bikinnya ya

Unknown

mas..
kalo daftar isi nya berdasarkan label bisa gak?
trus kalo bisa juga bisa diatur label mana aja yang boleh tampil ataupun gak..
coz ada beberapa label yang saya gak mau kalo ditampilin di daftar isi..
mohon bantuannya yaa mas.. :)

Taufik Nurrohman

Masing-masing tab memiliki kelas yang berbeda, ini bisa kamu gunakan untuk menyembunyikan tab yang tidak diinginkan dengan CSS agar tidak bisa diklik. Urutan dimulai dari .toc-tab-item-0

<style>
/* Contoh: Menyembunyikan tab ke 3 dan ke 7 */
#tabbed-toc .toc-tab-item-2,
#tabbed-toc .toc-tab-item-6 {display:none}
</style>

CCA

How to control the List of activeTab (Example I just want: Music, Tech, TV, Sports, Picture, Video.)

Anonim

Nice Info Gan

MrDoubleD

Thanks masbro...
hasilnya bagus .

MrDoubleD

Mas, kenapa sekarang tiap buka daftar isi itu selalu ada script yang muncul meminta nama pengguna dan sandi? / diperlukan otentikasi.
Setiap web yang menggunakan daftar isi dan saya buka sama saja, muncul script diperlukan otentikasi.
Tolong pencerahannya...

Salim

Izin membantu. Untuk sementara waktu, silakan ganti:

http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js
Ganti dengan:
http://salimromadhon.github.io/host/tabbed-toc.js
-----
http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css
Ganti dengan:
http://salimromadhon.github.io/host/tabbed-toc.css

MrDoubleD

thank you ..
tapi loading nya (memuat...) lama bener, kagak muncu2 tuh daftar isinya...
bisa bantu ?

Anonim

thanx mas, sekarang udah ane pasang di blog ane

Andi AF Studio

asik, enak disemat-semat :-bd

Suparyono

izin make bang...

Anonim

makasih mas taufiq. ijin untuk posting ulang ya mas. makasih sekali lagi atas pencerahannya. salam sahabat blogger.

Anonim

keren masgan sitemapnya

Unknown

Langsung ane praktekan di blog , menarik banget mas :)

Anonim

Trims gan. langsung tak coba praktek, alhamdulillah berhasil.
sekali lagi terima kasih y gan..

Mas Admin

yes, super keren boleh juga nih di pasang di blog ane... sip sip sip :-bd

hawadys

Keren.. saya coba dulu ya gan. |o|

Unknown

maaf kang,numpang tanya..
saya kan sudah pasang di blog saya,tapi kenapa ketika saya pasang jumlah posting dari setiap label tidak sama dengan jumlah yang sebenarnya? padahal di script maxresult udah 9999, tapi kenapa yang muncul hanya 20an, padahal jumlah posting dalam label yang terkait lebih dari itu kang.. mohon balasannya kang. thanks..

Taufik Nurrohman

Kalau ada markup judul atau artikel yang salah mungkin itu bisa jadi penyebabnya. Misalnya tag HTML lupa ditutup atau semacamnya.

Rino Kusno

Komentar ini telah dihapus oleh pengarang.

Taufik Nurrohman

Coba pakai www mas. Saya cek di console statusnya 404 Not Found, baru bisa dibuka kalau Saya buka tautannya pakai www:

GET http://rinokusno.com/feeds/posts/summary [HTTP/1.1 404 Not Found 340ms]

Anonim

saya sudah pake www kok tetap gak keluar ya kang .... padahal sudah sesuai instruksi ada yang salah ngga kang...