Modifikasi Daftar Isi Dengan JSON Script

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.

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>

DEMO SHOW

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>

DEMO SHOW

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>

DEMO SHOW

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