Cara Membuat daftar isi efek jquery Accordion keren dan otomatis | X TKJ 4 Community

Membuat daftar isi efek jquery Accordion keren dan otomatis 

 

Daftar isi adalah daftar semua artikel posting yang ada dalam satu blog. Daftar isi otomatis ini juga sering disebut Sitemap. Dengan kita membuat daftar isi blog keren otomatis tentunya hal ini akan menimbulkan dampak yang positif pada blog kita karena pengunjung pun akan lebih mudah untuk menelusuri semua halaman yang ada pada blog kita dan akhirnya pengunjung pun akan jatuh hati pada blog kita dan ingin terus balik lagi untuk mengunjungi blog kita, dan ini tentunya akan berdampak baik terhadap promosi bisnis online yang kita jalankan.

Sebuah blog akan lebih profesional jika memiliki aksesoris yang lengkap. Salah satu komponen dasar tersebut adalah Daftar Isi tersebut, walaupun blogger sendiri sudah menyediakan widget berupa arsip blog yang mempunyai fungsi hampir sama dengan ini. Tapi banyak ahli seo berpendapat bahwa cara untuk mengoptimasi seo suatu halaman artikel adalah salah satunya dengan menghilangkan widget arsip blog yang dipasang. Karena dianggapnya mesin pencari tidak suka dengan adanya 2 link atau lebih pada suatu halaman dengan tujuan yang sama. Jadi bagaimana mengantisipasinya? Ya... dengan membuat Daftar Isi atau Sitemap ini.

Daftar isi banyak sekali jenisnya tergantung dari kesukaan masing masing orang saja. Nah, kali ini saya akan posting bagaimana membuat daftar isi keren dan otomatis dengan efek jquery accordion. Klik Daftar Isi Blog ini untuk melihat contohnya. 

Berikut langkah langkah pembuatannya :

• Login Ke akun Blogger
• Klik Laman [Daftar Isi akan di buat di sebuah Halaman]
• Klik Laman Baru lalu pilih Laman Kosong [klik HTML]
• Copy paste Code di bawah ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=6984301103846628017" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>

<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 10,
    baru       = "Baru Niee !",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>

<script src="http://xtkj4community.blogspot.com/files/daftar-halaman.js" type="text/javascript"></script>

<script src="http://obatherbal-2u.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


Keterangan :

• baru = Tulisan yang akan ditampilkan di samping judul artikel baru
• maxNew = Jumlah Artikel yang akan terdapat tulisan "Baru Niee !"
• sDownSpeed = Kecepatan membuka daftar Label
• sUpSpeed = Kecepatan menutup daftar Label 
• ganti url blog dengan urlt blog anda

Daftar isi  ini merupakan hasil karya dari Abu farhan (www.abu-farhan.com). Daftar isi tersebut akan memisahkan tiap label artikel blog dan diurutkan berdasarkan waktu terbit artikel. Artikel juga akan secara otomatis akan berada di daftar isi tersebut jika di beri label.

Demikianlah cara membuat Daftar Isi atau Site Map blog efek jquery Accordion keren, semoga bermanfaat. Selamat mencoba !