Modifikasi Daftar Isi Dengan JSON Script - Modifikasi berarti merubah yang sudah ada menjadi tampilan yang berbeda, seperti yang sudah tidak asing lagi dengan kata " DAFTAR ISI " pada sebuah blog yaitu untuk menampilkan keseluruhan daftar label posting/artikel.

Gambar Daftar Isi

Perhatikan kode berikut, script default yang mana akan menampilkan semua daftar label yang berada dalam elemen CATEGORY feed blogger

<script type="text/javascript">
//<![CDATA[
var homepage = "http://sahabatblogger77.blogspot.com";
function showLabels(json) {
    var label = json.feed.category;
    document.write('<ul>');
    for (var i = 0; i < label.length; i++) {
        document.write('<li><a href="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '" target="_blank">' + label[i].term + '</a></li>');
    }
    document.write('</ul>');
}
document.write('<scr' + 'ipt src="' + homepage + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>


Mungkin script diatas yang saat ini anda gunakan untuk menampilkan keseluruhan label posting blog anda dengan balutan text Daftar Isi, akan tetapi susunan markup diatas tidak MUTLAK, dengan kata lain kita bisa ubah strukturnya untuk mendapatkan tampilan yang berbeda.
Salah satu contoh saya menggunakan kode option(selected) untuk memanggil perintah open klik pada markup diatas

<script type="text/javascript">
//<![CDATA[
var homepage = "http://sahabatblogger77.blogspot.com";
function showLabels(json) {
    var label = json.feed.category;
    document.write('<select onchange="window.open(this.value);"><option selected disabled>DAFTAR ISI</option>');
    for (var i = 0; i < label.length; i++) {
        document.write('<option value="' + homepage + '/search/label/' + encodeURIComponent(label[i].term) + '">' + label[i].term + '</option>');
    }
    document.write('</select>');
}
//]]>
</script>





Apakah tampilan diatas bisa kita modifikasi dengan sentuhan CSS, ya.! bisa, CSS bisa berdampingan langsung dengan xml dan script kode, karena untuk membuat tampilan warna, style layout markup diatas butuh CSS untuk membuatnya.
saya akan coba gabungkan CSS berikut ini dengan script diatas, mudah-mudahan anda suka dengan hasil tampilannya.

<div style="background:blue;overflow:auto;padding:10px;width:auto;font-weight:bold;color:white;text-align:center;">DAFTAR ISI</div>
<div style="background:#eee;overflow:auto;padding:10px;border-top:4px double #999;width:auto;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css"/>
<div id="table-of-content" class="table-of-content">
<span class="loading">Selamat Membaca Artikel SAHABAT BLOGGER 77</span></div>
<script>
var toc_config = {url: 'http://sahabatblogger77.blogspot.com',containerId: 'table-of-content',showNew: 10,newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">Baru!</strong>',
sortAlphabetically: {thePanel: true,theList: true},
maxResults: 9999,activePanel: 1,
slideSpeed: {down: 400,up: 400},
slideEasing: {down: null,up: null},
slideCallback: {down: function() {},up: function() {}},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/accordion-toc-1.js"></script></div>





Dan script berikut dengan style yang berbeda, saya menggunakan script untuk membuat efek hover link dengan box black, sehingga fungsinya seperti sortir efek atau accordion efek

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/accordion-toc-skin.css"/>
<div id="table-of-content" class="table-of-content">
<span class="loading">Selamat Membaca Artikel SAHABAT BLOGGER 77</span></div>
<script>
var toc_config = {url: 'http://sahabatblogger77.blogspot.com',containerId: 'table-of-content',showNew: 10,newText: ' - <strong style="font-weight:bold;font-style:italic;color:red;">Baru!</strong>',
sortAlphabetically: {thePanel: true,theList: true},maxResults: 9999,activePanel: 1,slideSpeed: {down: 400,up: 400},
slideEasing: {down: null,up: null},
slideCallback: {down: function() {},
up: function() {}},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/accordion-toc-1.js"></script>





Bagaimana.? mudah bukan.!! sudah menemukan pilihan yang menarik untuk Modifikasi Daftar Isi Dengan JSON Script pada blog anda.?, Kalau bingung jangan bengong ya, bagus tanyakan dikolom komentar yukk..!! hehe..
SEMOGA TIDAK BERMANFAAT

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Modifikasi Daftar Isi Dengan JSON Script
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

18 komentar

  1. Kalau daftar isi di blog saya masuk kategori apa ya mbak..saya kurang tau yang penting ada
    Scriptnya tinggal di copas kan mbak

    BalasHapus
    Balasan
    1. saya kira daftar isi blog itu sama dengan category, hanya category akan disebutkan pada saat penulisan script, karena pada saat kita membuat sebuah script kita menuliskan daftar isi, maka script tersebut tidak bekerja.

      kalau masalah script yang saya share diatas, benar mbak tinggal dicopy paste aja, tetapi mohon diperhatikan untuk kode yang saya beri tanda, jika script diatas sudah ada dalam blog mbak,hapus saja kode itu, tinggal ganti text merah dengan URL blog mbak.

      Hapus
  2. daftar isi buat navigasi pada blog memang sangat penting , karena dapat memudahkan pengunjung blog melihat postingan blog kita,nice post mba

    BalasHapus
    Balasan
    1. mempermudah pengunjung untuk berselancar dengan menampilkan sitemap blog mas,,

      Hapus
  3. Keren nih tampilannya simple tapi elegant, ada tulisan terbarunya New! nya juga. pengunjung jadi lebih gampang memilih artikel terbaru :)

    BalasHapus
    Balasan
    1. sedikit modifikasi bang, agar tampilan default terlihat keren,,hehe

      Hapus
  4. Terwujud kembali datang Mbak :D

    Sangat keren modifikasi daftar isinya mbak devy, saya juga telah membuat artikel yang mirip dengan ini. Terima Kasih ya!!

    BalasHapus
  5. Trims sharing dan petunjuknya :)
    bisakah membuat daftar isi walaupun jumlah artikel
    masih sedikit di blog kita?

    BalasHapus
    Balasan
    1. bisa bang, yang penting artikelnya dikategorikan dengan 1tag label per artikel,karena akan terjadi double artikel tampil jika kita buat 2-3 kategory tag label dalam 1 artikel

      Hapus
    2. trims banget infonya..
      beberapa artikel di blog saya memang doubel labelnya

      Hapus
  6. ijin nyimak mbak devy
    keren ya bisa memodif gitu
    ajarin donk
    hehehe :D

    BalasHapus
  7. saya amankan dulu kodenya bos, sapa tau besok2 butuh, hehehe....

    BalasHapus
  8. keren yah daftar isinya.. mungkin dicoba dulu nih :D

    BalasHapus
  9. manteplah...saya simpen dulu ah scriptnya jeng....

    BalasHapus
  10. Bagus hasil akhirnya Mbak, Modifikasi akhirnya tampil lebih menarik

    BalasHapus
  11. Mampir lagi di blog keren ini Mbak, seperti biasa kunjungan rutin :)

    BalasHapus
  12. Nyobak nerapin jangn lupa kunjungannya
    Sekolah SDE

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK