Sitemap (Daftar Isi) Blogger di Halaman Statis Hanya Satu Label Saja

Cara membuat dan menampilkan daftar isi di halaman statis page Blogger sederhana hanya satu label saja. Bisa diurutkan berdasarkan judul atau tanggal posting.
Sitemap Daftar Isi Blogger di Halaman Statis Hanya Satu Label Saja

Sitemap ini bertujuan untuk menampilkan daftar isi dengan satu label yang spesifik. Tadinya saya pikir tidak ada yang mau menampilkan sitemap hanya dari satu label tertentu doang, eh ternyata ada beberapa orang yang request. Dan tidak perlu khawatir sitemap akan mentok 150 judul saja seperti yang dikeluhkan oleh mereka yang request. Katanya banyak tutorial untuk menampilkan daftar isi hanya satu label di luaran sana yang judulnya tidak tampil semua. Nah di script buatan igniel.com ini semua judul akan muncul.

Langkah pertama, tambahkan kode CSS berikut DI ATAS </style> atau ]]></b:skin>.

/* Blogger Sitemap One Label Title Only by igniel.com */
#sitemap6 {font-size:14px; font-weight:400;}
#sitemap6 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap6 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap6 a:hover {color:#000;}
#sitemap6 ol {margin:0px; padding:0px;}
#sitemap6 ol li {color:#666; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Langkah berikutnya buatlah sebuah halaman statis (page) baru dan langsung salin semua kode di bawah ini ke dalam text editor. Pastikan memilih mode HTML, bukan Compose. Kodenya murni Javascript ya, tidak perlu jQuery.

<div id="sitemap6">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap One Label Title Only by igniel.com */
var label = 'Blogger';
var text = 'Total post with label';
var sortby = 'date'; /* 'date' OR 'title' */

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('i a=["\\f\\v\\g\\h\\r\\d","\\v\\g\\b\\e\\d\\b\\1f\\c\\b\\B\\b\\l\\d","\\f\\g\\v","\\m\\w\\b\\b\\j\\f\\m\\r\\u\\f\\d\\f\\m\\j\\b\\w\\e\\k\\c\\d\\m\\S\\m","\\1q\\e\\c\\d\\q\\I\\f\\u\\l\\R\\v\\e\\c\\c\\Z\\e\\v\\1c\\q\\f\\h\\d\\b\\B\\e\\r\\1a\\R\\f\\d\\e\\g\\d\\S\\h\\l\\j\\b\\1g\\q","\\R\\B\\e\\1g\\S\\g\\b\\f\\k\\c\\d\\f\\q","\\e\\r\\r\\b\\l\\j\\1y\\x\\h\\c\\j","\\Z\\u\\j\\P","\\f\\h\\d\\b\\B\\e\\r\\1a","\\W\\b\\d\\1f\\c\\b\\B\\b\\l\\d\\1C\\P\\1B\\j","\\h\\l\\l\\b\\g\\1A\\1z\\1D\\1E","","\\w\\b\\b\\j","\\c\\b\\l\\W\\d\\x","\\b\\l\\d\\g\\P","\\1K\\d","\\d\\h\\d\\c\\b","\\c\\h\\l\\1c","\\g\\b\\c","\\e\\c\\d\\b\\g\\l\\e\\d\\b","\\x\\g\\b\\w","\\r\\k\\f\\x","\\I\\k\\j\\k\\c","\\f\\u\\g\\d","\\p\\c\\h\\o\\p\\e\\y\\x\\g\\b\\w\\q\\t","\\k\\g\\c","\\t\\y\\d\\h\\d\\c\\b\\q\\t","\\t\\o","\\p\\m\\e\\o\\p\\m\\c\\h\\o","\\p\\j\\h\\Y\\y\\v\\c\\e\\f\\f\\q\\t\\I\\k\\j\\k\\c\\t\\o","\\y","\\1h\\y","\\p\\m\\j\\h\\Y\\o\\p\\u\\c\\o","\\p\\m\\u\\c\\o"];i T=1,H=1G,K=1F 1H();V M(){i U=O[a[1]](a[0]);U[a[2]]=a[3]+1b+a[4]+T+a[5]+H;O[a[7]][a[6]](U)}V 1x(X){i J=O[a[9]](a[8]);C(!J){1d};J[a[10]]=a[11];i A=X[a[12]];C(A[a[14]][a[13]]>0){N(i G=0;G<A[a[14]][a[13]];G++){i D=A[a[14]][G];i E=D[a[16]][a[15]];N(i z=0;z<D[a[17]][a[13]];z++){C(D[a[17]][z][a[18]]==a[19]){i F=D[a[17]][z][a[1o]];C(F&&F[a[13]]>0&&E&&E[a[13]]>0){K[a[1I]]({"\\k\\g\\c":F,"\\I\\k\\j\\k\\c":E})};1l}}};C(A[a[14]][a[13]]>=H){T+=H;M()}1i{i Q=a[11],n;i n=(1J===a[16]?K[a[1w]](V(n,1e){1d n[a[L]]>1e[a[L]]?1:-1}):K);N(i s=0;s<n[a[13]];s++){Q+=a[1L]+n[s][a[1v]]+a[1s]+n[s][a[L]]+a[1k]+n[s][a[L]]+a[1j]};J[a[10]]=a[1u]+1m+a[1t]+1b+a[1r]+n[a[13]]+a[1n]+Q+a[1p]}}}M()',62,110,'||||||||||_0x73e9|x65|x6C|x74|x61|x73|x72|x69|var|x64|x75|x6E|x2F|_0x6718x10|x3E|x3C|x3D|x70|_0x6718x12|x22|x6F|x63|x66|x68|x20|_0x6718xd|_0x6718x9|x6D|if|_0x6718xb|_0x6718xc|_0x6718xe|_0x6718xa|max|x6A|_0x6718x8|sitemap6Arr|22|runSitemap6|for|document|x79|_0x6718xf|x26|x2D|start|_0x6718x5|function|x67|_0x6718x7|x76|x62|||||||||||x36|label|x6B|return|_0x6718x11|x45|x78|x3A|else|28|27|break|text|32|20|33|x3F|31|26|30|29|25|23|sitemap6|x43|x54|x48|x49|x42|x4D|x4C|new|150|Array|21|sortby|x24|24'.split('|'),0,{}));
//]]> </script>

Value Keterangan
var label Label yang ditampilkan. CASE SENSITIVE! Pastikan penulisannya sama persis dengan label di Blogger mulai dari huruf besar, kecil, spasi, dan tanda baca.
var text Tulisan di judul.
var sortby Jenis pengurutan.
'date': berdasarkan tanggal posting, mulai dari terbaru sampai terlama.
'title: berdasarkan abjad mulai dari A zampai Z.

Setelah selesai, jangan lupa publikasikan halaman dan hasilnya akan seperti demo di Codepen saya.



Apa kamu punya request tutorial lain? Tuliskan di kolom komentar. Kalau sanggup dan sempat akan saya buatkan. Semoga tutorial membuat daftar isi hanya satu label di Blogspot ini bisa membantu meski hanya sedikit.

33
Sitemap (Daftar Isi) Blogger di Halaman Statis Hanya Satu Label Saja
Sitemap (Daftar Isi) Blogger di Halaman Statis Hanya Satu Label Saja
Cara membuat dan menampilkan daftar isi di halaman statis page Blogger sederhana hanya satu label saja. Bisa diurutkan berdasarkan judul atau tanggal posting.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

33 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Zulham Effendi
    20 November, 2023
    Profil: https://www.blogger.com/profile/09986658077599333517
    Ka sepertinya codenya sudah tidak berfungsi
  • Shinzuan
    11 Juni, 2023
    Profil: https://www.blogger.com/profile/03926161244953134149
    Min kalo mau buat 1 label pake yang ini gimana ya? Soalnya buat anime
  • Admin
    03 Maret, 2023
    Profil: https://www.blogger.com/profile/15849269767775558466
    Kira² apa yang salah ya?

    Saya coba dari banyak tutorial tidak berhasil.
    Dengan tutorial dari sini tinggal modifikasi nama label udah berhasil.

    Terima kasih.
  • Assa
    10 Februari, 2021
    Profil: https://www.blogger.com/profile/01181696575872615271
    Mbak biar tabelnya bisa di scroll, caranya bagiamana?
  • عبد
    28 November, 2020
    Profil: https://www.blogger.com/profile/10012308296821394148
    Cara agar susunannya postnya dari yang lama ke yang baru gimana ya?
  • Admin
    11 September, 2020
    Profil: https://www.blogger.com/profile/18400153320211647867
    mba' bisa g' daftar isinya disertai gambar thunbail?
  • Mbah Du-chan
    14 April, 2020
    Profil: https://www.blogger.com/profile/15404074571472464954
    Min kalo misal numberingnya pake bullet/ngga ada bullet/numbering sama sekali gimana?
    terus sama kalo urutannya terlama sampe terbaru (perlu kalo itu blog manga/novel yg pake chapter2) bisa ngga min?

    oh iya ini juga pengen aku tanyain, kalo bikin tombol next/prev post tapi di 1 label itu gimana ya?

    makasih banget min ilmunya..(y)
  • Vishaka
    09 November, 2019
    Profil: https://www.blogger.com/profile/01994937931680695308
    Mantul banget, tampilan blog jadi makin keren
  • admin
    06 September, 2019
    Profil: https://www.blogger.com/profile/00006196156028518702
    mba cara biar per abjad gimna
  • Kanjeng Mariyadi Ngawi
    11 Agustus, 2019
    Profil: https://www.blogger.com/profile/04856905821293514049
    mantap hu
  • Kazama
    28 April, 2019
    Profil: https://www.blogger.com/profile/10528212064312871073
    scriptnya udh ngga jalan ta ? ko loading terus..?
  • Rafiqi
    09 April, 2019
    Profil: https://www.blogger.com/profile/15078260122563429337
    mantul mba.
  • Enjoe
    19 Maret, 2019
    Profil: https://www.blogger.com/profile/07776906850106309693
    biar sesuai abjad gimana mbak?
  • Admin
    18 Maret, 2019
    Profil: https://www.blogger.com/profile/13161193354744481651
    Mbak request
    List postingan perlabel tapi ada abjad nya
    Kn soalnya di anime ada movie, ova sama episode
    • Admin
      18 Maret, 2019
      Profil: https://www.blogger.com/profile/13161193354744481651
      Hampir kayak yg ni
      https://www.igniel.com/2019/02/sitemap-daftar-isi-navigasi-per-huruf.html?m=1
    • Admin
      18 Maret, 2019
      Profil: https://www.blogger.com/profile/13161193354744481651
      Tetapi listnya lanya 1 label kayak postingan yg saya kunjungi ini
  • Halo Sobat
    12 Maret, 2019
    Profil: https://www.blogger.com/profile/02463943286476293209
    kalo mau isi thumbnail gmn caranya mbak?
  • Yuuki
    09 Maret, 2019
    Profil: https://www.blogger.com/profile/04391405424964474862
    dibuat list kecil + 2 kolom bisa gak mbak? biat gak kepanjangan.
    kaya gini
    https://4.bp.blogspot.com/-gK0Hk3S9pIg/XINWXaGnQKI/AAAAAAAAAKM/At8Gen4rpJAdFduelxlLs8KIXrV09cP5ACLcBGAs/s1600/Untitled.png
    • Igniel
      10 Maret, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tinggal edit CSSnya. Silakan diulik.
  • M. Limon
    03 Maret, 2019
    Profil: https://www.blogger.com/profile/07103600535159878470
    Hi Igniel..
    I am your big fan✌
    Now i am facing a problem 😣
    In my #Template. If i visit my site from mobile devices #Comment is not displaying 😭.
    But if i visit my site from Desktop or Computer the Comment box display proparly😐
    .
    .
    Now question is how can i show comment box in mobile devices?
    .
    Please Help me out
  • Rich Ard
    02 Maret, 2019
    Profil: https://www.blogger.com/profile/08181588658968702674
    kak nanya dong, itu yang buat bikin tulisan javascript jadi seperti kode tanda baca yang panjang namanya apa ya?
  • Unknown
    26 Februari, 2019
    Profil: https://www.blogger.com/profile/10385716852959847600
    request mbak ,buat utk bbrp label buat fitur ngeshort gitu, cth label "Film Indonesia" dan tahun "2016"
  • A. Abdul Mustahab ツ
    19 Februari, 2019
    Profil: https://www.blogger.com/profile/05409057447679540831
    mbak, buat agar scriptnya bisa di hosting dong, biar bisa saya pakai di blog AMP menggunakan iframe
  • 유♥우  Putra Arwah JTS ☆☆★
    14 Februari, 2019
    Profil: https://www.blogger.com/profile/03311508874996641994
    G ada tutor seperti di igniel untuk "tampilan grid dan list" ?
    Apa pake jquery addclass / remove / toggle kak ?
    • Igniel
      14 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak ada.
    • 유♥우  Putra Arwah JTS ☆☆★
      14 Februari, 2019
      Profil: https://www.blogger.com/profile/03311508874996641994
      Pake apa kak... klo boleh tau sistem jquerynya aja
    • 유♥우  Putra Arwah JTS ☆☆★
      19 Februari, 2019
      Profil: https://www.blogger.com/profile/03311508874996641994
      Grid list nya gak make cokie... cm addclass aja... jadi setiap ke halaman awal pengunjung harus mengklik list lagi dan lagi untuk selalu ke tampilan list
    • Igniel
      19 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sengaja. Tampilan utama blog ini grid. Bukan list.
  • Andre
    14 Februari, 2019
    Profil: https://www.blogger.com/profile/15281443660278400620
    penghasilan kakak berapa yah perbulan?
  • Unknown
    08 Februari, 2019
    Profil: https://www.blogger.com/profile/00870608482016246401
    Mbak request tutorial daftar isi yang ada di
    https://www.igniel.com/2019/02/sitemap-daftar-isi-navigasi-per-huruf.html

    Tapi hanya untuk satu label, di anime atau manga-kan memiliki beberapa chapter / episode.

    contohnya di anime, judul induknya "boruto", sub judulnya "boruto episode 1, boruto episode 2 danseterusnya".

    jadi kalau menggunakan tutorial itu yang digunakan untuk menunjukkan daftar isi anime, sub judul animenya pun ikutan muncul.

    jadi mohon dibuatkan versi yang hanya menggunakan 1 label saja.

    terima kasih
  • Unknown
    08 Februari, 2019
    Profil: https://www.blogger.com/profile/00870608482016246401
    ok mbak manta mantap, terima kasih.