Desain Tampilan Daftar Isi Model Tab

Desain Tampilan Daftar Isi Model Tab - Daftar isi merupakan rangkuman keseluruhan isi suatu halaman yang digambarkan dengan tampilan teks judul yang termuat pada halaman tersebut, sehingga dengan adanya daftar isi ini dapat memudahkan kita untuk mencari beberapa materi yang kita perlukan pada halaman tersebut. Jika pada blog daftar isi biasanya disertakan pada menu navigasi, bahkan ada beberapa blog yang membuat teks daftar isi dengan efek kedip untuk memberitahukan kepada pembaca bahwa pada menu itu terdapat semua artikel yang ada pada blog tersebut.

Category atau label akan bertindak untuk merangkum judul artikel jika pada blog, dan jika pada buku ini seperti halaman pemberitahuan dimana letak judul materi tersebut termuat, sehingga desain tampilan daftar isi ini dapat kita pisahkan antara label dan judul artikel. Desain tampilan daftar isi pada blog sudah pernah saya modifikasi diartikel sebelumnya dengan berbagai model, pada kesempatan kali ini SAHABAT BLOGGER 77 akan kembali memberikan desain terbaru tampilan daftar isi MODEL TAB seperti pada gambar dibawah ini

Model sebelumnya - Modifikasi Daftar Isi Dengan JSON Script


Script berikut tidak jauh berbeda pada modifikasi model sebelumnya, perubahan hanya saya edit pada kode tab-nya saja, dan beberapa script saya tambahkan untuk menampilkan JUMLAH POSTING dan JUMLAH KOMENTAR yang terdapat pada blog Anda.

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css"/>

<div id="tabbed-toc">
<span class="loading">Loading...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://URL-Anda.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    thumbSize: 40,
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    newText: " - <em style='color:red;'>New!</em>"
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>
<script type="text/javascript">
function showPostCount(json) {
    document.write(parseInt(json.feed.openSearch$totalResults.$t, 10));
}
</script>
<p><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showPostCount"></script> Total Posting &amp; <script src="/feeds/comments/summary?max-results=0&alt=json-in-script&callback=showPostCount"></script> Total Komentar</p>

DEMO SHOW


Bagaimana, cukup cantik bukan desain daftar isinya, hehe..!!
Semoga koleksi tampilan daftar isi berikut dapat bermanfaat buat Anda. Terimakasih dan sampai jumpa...!!!