Cara Membuat Daftar Isi Blog Dengan jQuery

Hi pembaca setia BlogipRikardo, maaf sebelumnya karena sudah 3 hari Saya tidak menulis Artikel dikarenakan ada suatu yang harus Saya kerjakan. Langsung saja, sebelumnya Saya telah membagikan tutorial Cara Membuat Daftar Isi Blog Keren dan Simple, kali ini Saya akan memberikan tutorial yang bisa dibilang masih sama Tema nya, cuma berbeda di tampilannya saja yaitu, Cara Membuat Daftar Isi Blog Dengan jQuery yang script nya Saya dapatkan dari sahabat Saya, Ficri Pebriyana. Sudah Saya jelaskan pada artikel sebelumnya, Sitemap atau peta situs atau bisa juga disebut daftar isi dari sebuah situs website maupun blog digunakan agar kita lebih mudah melihat isi dari suatu situs website ataupun blog. Dengan menggunakan sitemap atau daftar isi kita atau visitor dapat dengan mudahnya melihat seluruh artikel yang ada dalam blog tersebut dengan masing-masing label atau kategori yang berbeda-beda.

Untuk demo Sitemap yang Saya share kali ini, silahkan dilihat DISINI.

Jika Anda tertarik untuk menerapkan Sitemap dengan jQuery ini, silahkan simak tutorial dibawah ini:

1. Masuk ke Akun Blogger Anda.

2. Pada menu Dashboard, pilih Laman.

3. Lalu klik Laman Baru.

4. Kemudian berikan judul Daftar Isi ataupun Sitemap.

5. Pilih HTML di sudut kiri atas, bukan Compose.

6. Copy dan Pastekan kode berikut ke laman tersebut.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><link href="https://googledrive.com/host/0B685uqap5sAIQWVXbHMyZ2ozX0U/sitemap.css" rel="stylesheet"></link>

<div class="table-of-content" id="table-of-content">

<span class="loading">Loading...</span></div>

<script>

var toc_config ={url:'http://www.blogiprikardo.blogspot.com',containerId:'table-of-content',showNew:10,newText:' - <strong style="font-weight:bold;font-style:italic;color:red;">News !!!</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="https://ficri-pebriyana-js.googlecode.com/svn/sitemap.js"></script>

7. Ganti http://www.blogiprikardo.blogspot.com dengan URL Blog Anda.

8. Klik Publikasikan.

Catatan:

Jika jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/>

sudah ada di HTML blog Anda, silahkan dihapus saja.
Sekian dulu tutorial Cara Membuat Daftar Isi Blog Dengan jQuery dari BlogipRikardo. Semoga bermanfaat, jika ada saran, berikan komentar Anda dibawah.

Tweet