27.4.14
21
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

gambar daftar isi


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.


<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...!!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Desain Tampilan Daftar Isi Model Tab
Ditulis oleh= Devy
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 =

21 komentar

  1. sitemapnya bagus, keren abis deh :)

    BalasHapus
    Balasan
    1. cuma sedikit beda dari yang biasanya kok, karena masih banyak lagi desain mereka-mereka yang lebih keren dari ini, hehe

      Hapus
  2. langsung praktek mbak :d

    BalasHapus
  3. ini menarik sekali untuk dicoba mbak jadi daftar isinya jadi lebih enak dipandang dan tidak kesusahan kalau pengen mencari berita dengan tab yang bersangkutan :)

    BalasHapus
  4. Barusan dah liat demonya mbak, kalo menurut saya sih bukan menarik lagi ini mah tapi keren buanget mbak, saya mah belom bisa bikinnya juga... kalo gitu ijin copy criptnya ya mbak ta; coba praktekin di blog acakadut saya :)

    BalasHapus
    Balasan
    1. berarti sudah termasuk kategori keren ya mas,,hehe

      silahkan mas,disimpan scriptnya,kali aja sewaktu-waktu butuh ingin membuat tampilan yang berbeda

      Hapus
  5. sebelumnya sudah ada ne sob.. tapi tampilannya seperti explorer pada windows sob...
    tapi ini juga bagus kog... keren-keren...

    SEMANGAT sob.... :>)

    BalasHapus
  6. daftar isi model tab ini lagi trendi, yang ngga pake daftar isi kaya gini, berarti bukan blogger gaul deh ih..yah yah yah.....:-)
    tuh liat deh daftar isi saya...malah lebih canggih...sok lah diliat gih...:o)

    BalasHapus
    Balasan
    1. daftar isi blognya itu model label only ya mas, desain yang simple.

      Hapus
  7. tampilan daftar isi ini kelihatannya keren nih jadi pengen mencoba mbak

    BalasHapus
  8. Saya sudah menerapkan kode-kode di atas mbak, tetapi hasilnya kok error ya apa saya yang belum paham ya heeheee, maklumlah saya kan tidak sehebat mbak devi

    BalasHapus
    Balasan
    1. pengaturan pada kode CSS mas,namun pada tutor ini pembangun CSS tidak saya tampilkan karena sudah saya ringkas dengan kode link rel="stylesheet"

      coba tambahkan kode ini diatas <div id="tabbed-toc">
      <link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css"/>

      selanjutnya hapus kode <p> dan gantikan dengan kode berikut
      <p style="margin-top:-4em;padding:10px;background:green;color:#fff;text-align:center;font:bold 16px/18px Helvetia;border-radius:4px;-webkit-border-radius:4px;border-bottom:2px solid red;">

      semoga dapat membantu

      Hapus
  9. mkasi tutorialnya mbak devy..

    BalasHapus
  10. mantab mbak tipsnya...lanjut deh

    BalasHapus
  11. keren Mba, itu model kategorynya judulnya ap ya di daftar isi...gak ktemu..!, tertarik mw culik..!

    BalasHapus
    Balasan
    1. hayoo..suka culik neh,,hehe..
      widget category itu belum saya share mas tutorialnya,lain waktu akan saya share tutornya,tampilannya masih akan saya desain lagi agar lebih keren,

      Hapus
    2. mksi ats attensinya Mba..!, sdh mulai paham tutornya,, oiyya,. kodenya jangan yg panjang2 ya mba..satu lagi.,.untuk mengganti warna latar widget author yg judulnya post yg itu mba..yg ada kata please cite ini jgn diedit..biyar sesuai dgn template diedit dimana pd html, td sukses pasang, tp tdk seirama dg warna template.. jadinya lepas lagi..

      Hapus
    3. agar lebih memudahkan,kita bahas saja pada tutor yang mas tanyakan

      Hapus
  12. Makasih infonya sist sangat membantu kami untuk memodif blog kami
    http://apotek-perkasa.blogspot.com

    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