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:

Lihat Demo

---

Integrasi Gawai ke Blogger

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

Menambahkan halaman statis baru.

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

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

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&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

• Bawaan: Kelabu

Parser JSON untuk Blogger · Tahun Awal dan Tahun Akhir

var url = 'http://dte-feed.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=';

// Function to load a `<script>` tag without `document.write`
function load(url) {
    var script = document.createElement('script');
    script.src = url;
    document.head.appendChild(script);
}

// Get the first and last post year…
function getFirstAndLastYear($) {
    $ = $.feed || {};
    var entry = $.entry || [],
        range = {};
    // Get the first post year from `json.feed.entry[i].published.$t` value
    range[0] = entry[0] && +entry[0].published.$t.split('-')[0] || false;
    // Get the last post year from `json.feed.updated.$t` value
    range[1] = +$.updated.$t.split('-')[0];
    // [3]. Result will be available in the `range` variable as `[from, to]` format
    console.log(range);
    // You can now do stuff using the `range` variable start from here
    document.getElementById('blog-history').innerHTML = '\u00A9 Copyright ' + range[0] + ' \u2013 ' + range[1];
}

// Get the total posts…
function getTotalPosts($) {
    $ = $.feed || {};
    var i = $.openSearch$totalResults.$t,
        entry = $.entry || [];
    // [2]. Get the first and last post year…
    // Use the `max-results` and `start-index` parameter to limit the posts
    load(url + 'getFirstAndLastYear&max-results=1&start-index=' + i);
}

// [1]. Get the total posts…
load(url + 'getTotalPosts&max-results=0');

Widget Menu Navigasi Blogger Dari Sumber Berupa Objek

Konsep ini merupakan salah satu penerapan dari artikel berikut sebagai salah satu cara untuk menyederhanakan sintaks HTML elemen navigasi sebagai objek:

<b:widget id='HTML1' title='Navigation' type='HTML' version='1'>
  <b:widget-settings>
    <b:widget-setting name='content'>[{
    name: "Home",
    path: "/"
}]</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <b:with expr:value='data:content' var='array'>
      <b:include data='array' name='nav'/>
    </b:with>
  </b:includable>
  <b:includable id='nav' var='array'>
    <nav class='nav' id='nav'>
      <b:include data='array' name='ul'/>
    </nav>
  </b:includable>
  <b:includable id='ul' var='array'>
    <b:if cond='data:array.size > 0'>
      <ul>
        <b:loop values='data:array' var='this'>
          <b:include data='this' name='li'/>
        </b:loop>
      </ul>
    </b:if>
  </b:includable>
  <b:includable id='li' var='this'>
    <li>
      <b:class cond='path(data:view.url, data:this.path) == data:view.url' name='active'/>
      <b:include data='this' name='a'/>
      <b:if cond='data:this.children'>
        <b:include data='this.children' name='ul'/>
      </b:if>
    </li>
  </b:includable>
  <b:includable id='a' var='this'>
    <b:if cond='data:this.path || data:this.link'>
      <a>
        <b:attr expr:value='data:this.path ? path(data:view.url, data:this.path) : data:this.link' name='href'/>
        <b:attr cond='data:this.title' expr:value='data:this.title' name='title'/>
        <b:attr cond='data:this.target' expr:value='data:this.target' name='target'/>
        <data:this.name/>
      </a>
    <b:else/>
      <span class='a'><data:this.name/></span>
    </b:if>
  </b:includable>
</b:widget>

Kode CSS menu navigasi dapat Anda ambil dari sumber mana saja, selama selektor CSS adalah berupa .nav atau #nav (misalnya dari sini). Atau, Anda juga bisa menambahkan kelas kustom seperti ini sebagai cara untuk menyesuaikan kode HTML dengan kode CSS menu navigasi yang Anda dapatkan:

<b:includable id='nav' var='array'>
  <nav class='nav superfish' id='nav'>
    <b:include data='array' name='ul'/>
  </nav>
</b:includable>

Penggunaan

Masuk ke editor HTML Templat, salin dan tempel kode XML di atas ke dalam area <b:section> … </b:section> kemudian simpan perubahan. Anda mungkin perlu mengubah ID widget yang Saya beri tanda dengan urutan angka yang lain untuk mencegah duplikat ID widget. Setelah itu masuk ke editor Tata Letak. Di situ seharusnya sudah bertambah satu buah widget bertipe HTML/JavaScript dengan judul Navigation. Klik tombol Edit!

Setiap item menu tersimpan di dalam kontainer. Berikut ini adalah contoh kontainer menu yang masih kosong:

[]

Kemudian kita tambahkan sebuah menu, sebut saja Beranda:

[{
    name: "Beranda",
    path: "/"
}]

Kemudian kita tambahkan sebuah menu lagi bernama Profil:

[{
    name: "Beranda",
    path: "/"
}, {
    name: "Profil",
    path: "p/tentang-saya.html"
}]

Untuk tautan eksternal, gunakan atribut url sebagai pengganti path:

[{
    name: "Beranda",
    path: "/"
}, {
    name: "Profil",
    url: "//about.me/ta.tau.taufik"
}]

Judul dan target tautan juga dapat ditentukan seperti ini:

[{
    name: "Profil",
    url: "//about.me/ta.tau.taufik",
    title: "Taufik Nurrohman",
    target: "_blank"
}]

Anak-anak menu dapat dibuat kembali pada atribut children dengan aturan yang sama seperti sebelumnya:

[{
    name: "Profil",
    children: [{
        name: "Facebook",
        url: "//www.facebook.com/ta.tau.taufik"
    }, {
        name: "Google+",
        url: "//plus.google.com/+TaufikNurrohman"
    }]
}]

Contoh Objek

[{
    name: "Home",
    path: "/"
}, {
    name: "About",
    path: "p/about.html",
    children: [{
        name: "About Me",
        path: "p/about.html"
    }, {
        name: "Advertise",
        path: "p/advertise.html",
        children: [{
            name: "Method 1",
            path: "p/advertise-1.html"
        }, {
            name: "Method 2",
            path: "p/advertise-2.html"
        }]
    }]
}, {
    name: "Archive",
    path: "p/archive.html"
}, {
    name: "Contact",
    link: "//www.facebook.com/ta.tau.taufik",
    title: "Facebook",
    target: "_blank"
}]