Gawai Daftar Isi Tabulasi untuk Blogger
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.
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:
Integrasi Gawai ke Blogger
Pertama-tama klik menu Laman pada bilah sisi. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:
Setelah itu kamu akan melihat formulir halaman statis seperti ini. Klik 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&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
Opsi | Keterangan |
---|---|
url |
Ganti nilainya dengan alamat blog kamu atau alamat blog orang lain yang ingin kamu tampilkan kontennya. |
id |
Alternatif 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" |
direction |
Direksi teks pada blog kamu. Nilainya bisa berupa "ltr" atau "rtl" . |
container |
Selektor 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. |
active |
Digunakan 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. |
hide |
Tentukan nama-nama label yang tidak ingin kamu tampilkan. |
date |
Ganti 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] . |
excerpt |
Ganti nilainya menjadi true untuk menampilkan ringkasan artikel. Atau gunakan angka untuk menentukan maksimal karakter yang akan ditampilkan dalam ringkasan artikel sebelum diakhiri oleh karakter … . |
image |
Ganti 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" . |
target |
Jika bernilai "_blank" , semua tautan akan terbuka di tab/jendela baru saat diklik. |
load |
Digunakan 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. |
sort |
false untuk menyortir artikel secara normal berdasarkan bulan terbit, 1 untuk menyortir artikel dari A ke Z, -1 untuk menyortir artikel dari Z ke A. |
recent |
false 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&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&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
- Bawaan: Kelabu
Labels: Blogger, JavaScript, Widget
96 Comments:
\o/ thanks for the great blogger plugin.
Hopefully there will version 2 with integrate with navigation
wah thanks a lot bang :) makin mantap aja nih tutorialnya ,udah q pake buat arsip q hehe
I also notice a little bits problem when i set true at "showSummaries" and "showThumbnails"
video problem - screenr.com/uFT7
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 :)
^_^ 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?
cocok bgt sama warna blog saya. izin pakek :D
Yes. It happens in Chrome:
http://3.bp.blogspot.com/-QRotlIxFeZA/UJCrpvxClII/AAAAAAAAFKU/LHRpOMPSuGk/s1600/tabbed-toc-bug.png
This widget works fine in Firefox, Safari, Opera and IE9. I'll try to fix this issue.
nambahin overflow:hidden di wilayah daftar judul postnya bmana?
#tabbed-toc .toc-content {
overflow:hidden;
}
wow...keren deh :D
keren Banget mas :D
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.
ini mah kategori jadi daftar isi...xixixixi
oo ok ok.. thenks yah
Apa bisa widget ini dikasih gambar. maksudnya bagian pos disebelah kanan dikasih gambar seperti fitur readmore. maaf cuman naya doang, maklum newbie ane.
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;
}
oh gita ya om . mau tanya lagi. itu berdasarkan frekuensi bulan atau berdasarkan label ya? terimakasih.
ijin pake mas taufik .. :)
em, udah dipake nih, tapi kok saya taruh link css yang saya ubah kok nggak bisa ya mas ?
Penggabungan sortir berdasarkan label dan abjad (tidak seperti arsip blog).
Kalau susah pakai tag <style> saja:
<style type="text/css">
Kode CSS di sini...
</style>
apik pak tofik, tapi keliatanya masih ada yang kurang deh kang, Boleh di kasih efek transisi ga ? biar keren gitu :D
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
mantaf :-bd
Thank you 1.000.000 times bro taufik for this precious work
i like it very much
Wuih mantab kang, langsung aja deh saya pakai di blog Direktori Indonesia.. terimakasih ya gan..
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..?
Baca komentar ini ⇒ /2012/05/bantu-saya-menjawab-pertanyaan.html?showComment=1338312777868#c4813961192052819486
iya kang.. suwun.. kemaren udah coba cari2 emang ketemu di blog itu.. udah DL juga sofwarenya, cuman windows nya ga ngedukung buat software itu.. ni lagi coba upgrade.. makasih ya kang..
terimakasih kang,blog saya jadi tambah keren tuh,,,,coba ditinjau
kok gak muncul mas isi kategorinya ? solusinya gmana nih mas ?
Feed posting jangan dimatikan...
Wah fiturnya semakin lengkap..
:-bd
Mas bisa g klo di bikinnya label tertentu aja (tetapi lebih dari satu label)? Misalnya label teknologi dan informasi saja
Trima Kasih, saya sudah menggunakanan widget daftar isi ini.. saya cuma merubah kode warna untuk penyesuaian dengan tampilan blog.
mas ada gk daftar isi yg ringan..
sangat membantu gan :)
Wah bermanfaat sekali mas :-bd. Tapi saya pengen ganti warnanya bagaimana caranya mas ??
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
Sepertinya halaman statismu rusak ⇒ /2011/10/masalah-halaman-statis-blogger-yang.html
mas taufiq , kalo daftar isi tabulasinya berdasarkan bulan terbit ,gimana ya mas ?
Ide bagus. Tapi belum dibuat.
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
keren bgt mas, btw buatnya pake apa aja ni ?
Punya ane kok gini Bang
http://i.imgur.com/Vg0zO3S.png
Cara ilangin Bullet-bulletnya gmana bang? :D
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>
Mas Taufik saya mau nanya. Kalau Daftar Isi kayak punya mas taufik gimana ??
Soalnya aku tertarik...
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
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
Dah ketemu mas ternyata pas saya hapus script emoticon nya nya sekarang sudah normal kembali
Weehh :( gitu ternyata :'(
mas, naruh javascriptnya di sebelah mna yaah?
bisa engga kalau kategori yang akan muncul ditentuin sendiri?
soalnya saya mau munculin 1 kategori saja
sesuai judul :p daftar isi mengcakup semuanya bukan terpisah-pisah ~x(
#kaboerrrrrrr =p*
widget daftar isinya keren banget mas ....pasti scriptnya juga rumit banget :D gmana cara bikinnya ya
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.. :)
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>
How to control the List of activeTab (Example I just want: Music, Tech, TV, Sports, Picture, Video.)
Nice Info Gan
Thanks masbro...
hasilnya bagus .
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...
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
thank you ..
tapi loading nya (memuat...) lama bener, kagak muncu2 tuh daftar isinya...
bisa bantu ?
thanx mas, sekarang udah ane pasang di blog ane
asik, enak disemat-semat :-bd
Kesalahan saat mengurai XML, baris 2663, kolom 63: The entity name must immediately follow the '&' in the entity reference., maksudnya gimana ya kang, mohon pencerahannya?? Terimakasih.
sama mas, kalau saya sebagian dari isi label hilang :( nih gimana solusinya yah??
→ /2012/01/penolakan-blogger-terhadap-javascript.html
izin make bang...
makasih mas taufiq. ijin untuk posting ulang ya mas. makasih sekali lagi atas pencerahannya. salam sahabat blogger.
keren masgan sitemapnya
Langsung ane praktekan di blog , menarik banget mas :)
Trims gan. langsung tak coba praktek, alhamdulillah berhasil.
sekali lagi terima kasih y gan..
yes, super keren boleh juga nih di pasang di blog ane... sip sip sip :-bd
Keren.. saya coba dulu ya gan. |o|
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..
This comment has been removed by the author.
Kalau ada markup judul atau artikel yang salah mungkin itu bisa jadi penyebabnya. Misalnya tag HTML lupa ditutup atau semacamnya.
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]
thanks for the great blogger plugin. special blog very nice. congratulations
wah ini baru kewww reeen ane ambil gan
saya sudah pake www kok tetap gak keluar ya kang .... padahal sudah sesuai instruksi ada yang salah ngga kang...
Mas, kenapa ya lebarnya nggak full nih daftar isi tabulasi. Ini mas lihat http://www.posresep.com/p/sitemap.html . Mohon bantuannya mas ?
mantap gan ijin pake di blog ane :-bd
Saya sudah menggunakan widget daftar isi ini, sedikit review, jika dalam satu label jumlah artikelnya 400 misalnya maka halaman daftar isi ini jadinya akan panjang.
Bisa gak dibuat tampil 40 artikel saja kemudian ada tombol next untuk menampilkan sisanya jadi keteranganya mungkin seperti ini 1-40 of 400 klik tombol NEXT
Kalau bentuknya sudah jadi tabulasi susah pak. Tapi untuk yang versi flat sudah ada → /2012/03/daftar-isi-blogger-dengan-navigasi.html
makasih gan ...
memuaskan hasilnya.
kalo mau memilih label yg akan ditampilkan bisa ga ?
jadi ga semu labelnya muncul
Keren ih, tertarik coba nih. Makasih agan :-bd
nggak work mas. tolong dibantu
http://www.software-gratis.net/p/sitemap.html
Terima kasih
Ada masalah pada script mas bro
Bagaimana cara buat daftar isi seperti blog ini? Keren blognya mas...
buat yg udah custom domain kenapa yang muuncul url blogspotnya?
Mas, apa bisa ini dipake untuk label tertentu saja?
Dan apa bisa dikasih scrol sendiri di dalam daftar isinya?
Terima kasih ^_^
Widget sudah diperbaharui. Sekarang kamu bisa menyembunyikan beberapa label dengan cara menambahkan parameter hide=['Label 1','Label 2'] pada URL berkas.
Untuk membatasi tinggi daftar isi bisa dilakukan dengan cara ini:
.tabbed-toc-panel {
max-height:60em;
overflow:auto;
}
Post a Comment
<< Home