Membuat Daftar Isi Dengan Navigasi

Membuat Daftar Isi Dengan Navigasi di blog, daftar isi atau biasa dikenal oleh para blogger dengan sebutan Sitemaps merupakan semua isi halaman url artikel blog dan untuk mempermudah pengunjung mengetahui lebih jauh isi dari blog tersebut secara keseluruhan. Sedangkan fungsi Sitempa sendiri terhadap SEO untuk menginformasikan url-url yang berada di blog agar lebih mudah di crawl dan dijelajahi oleh mesin pencari (Search Engine) sehingga bisa lebih cepat terindeks.

Diartikel hari ini saya akan mencoba membagikan widget daftar isi dengan navigasi kepada Anda yang menurut saya jauh berbeda dengan daftar isi yang ada pada blog lainnya.

Screenshot

Demo

1. Login pada blog
2. Pilih Page/Laman kosong
3. Masukan code berikut, pada halaman HTML bukan pada Compose

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_facebook-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://www.fianetmu.com",
    postsperpage   = 4,
    numchars       = 370,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QedFTXKnNIfmUsc2Typd-YmyUVC8Go0sBefZEhkqy01VnqC6d8n3JoNENIIakuwI-aAWBzaNJ3ADyxjn6hdwLs_CxGuHYocndrKy-GRIWAm1_3LHbihcPrZPU2S9Yfodocr14Lvv1_k/s1600/no+image.jpg";
</script>
<script type="text/javascript" src="http://fianetmu-com.googlecode.com/files/blog%20daftar%20isi.js"></script>

Keterangan :

- Kode CSS Warna merah adalah tampilan Widget, silahkan ganti dengan code berikut ini sesuai Thema daftar isi yang Anda inginkan :

Brown Theme - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown.css

Black Theme - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_elegant-black-theme.css

Diary Book Theme - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_CSS3-diary-book-theme.css

White Theme - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-white-theme.css

Yellow Green Theme - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_yellow-green-theme.css

Dark Red Thema - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_dark-red-theme.css

Construction Thema - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_construction-theme.css

Default Thema - Demo

http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css

- Selanjut untuk kode yang berwarna Pink jumlah tampilan pada postsperpage
- Dan kode url yang berwarna biru silahkan ganti dengan url blog Anda

4. Save

Daftar isi serta Thema ini dibuat oleh master Blog Taufik Nurrohman pada salah satu situsnya (www.dte.web.id) jadi untuk lebih jelas silahkan menuju ke website beliau.