Membuat Daftar Isi Otomatis dengan jQuery di Blog.

Assalamu'alaikum sahabat blogger. Pada kesempatan kali ini saya akan berbagi Tutorial Blog yaitu Cara Membuat Daftar Isi Otomatis dengan jQuery di Blog. 

Daftar Isi atau yang sering kita sebut sebagai sitemap adalah sebuah halaman yang menampilkan seluruh konten blog kita, tak terlepas dari seo, kabarnya sitemap seperti ini juga dapat mempermudah search engine untuk menemukan keberadaan seluruh konten kita pada saat spider meng-crawl blog kita. Diluar meningkatkan efektifitas SEO, widget daftar isi ini juga dapat menyuguhkan dan menampilkan seluruh postingan yang pernah dipublikasikan kepada pengunjung, pasalnya terkadang jika seseorang menyukai topik suatu blog, maka ia akan terus gencar untuk berburu postingan di blog tersebut, dan ia akan bersifat curious atau ingin mengetahui semua artikel yang setopik dan sejalan dengan minatnya.

Lihat Screenshot dibawah :

 
Tertarik ? Oke deh, langsung saja Cara Membuat Daftar Isi Accordion :
1. Login ke Blogger.

2. Pilih Laman.

3. Klik Laman Baru > Laman Kosong.
4. Pilih Opsi "HTML" (bukan compose).


5. Letakkan kode di bawah ini kedalamya.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://www.nandarious.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>
Keterangan :
  • ganti kode yang berwarna merah dengan URL blog anda.
  • Jika di blog ada sudah memiliki jquery, kode yg berwarna biru jangan ditulis.
6. Klik "Publikasikan", dan selesai.

Demikian informasi terbaru tentang cara membuat daftar isi otomatis dengan jquery di blog. Semoga bermanfaat :)

Related

Tutorial Blog 8307253637267674410

Post a Comment

  1. jadi ada sitemapnya gitu ya... bagus nih. Makasih infonya.

    ReplyDelete
  2. @Rahmat Aziz iya gan.. sama2 :) makasih juga atas kunjungannya :)

    ReplyDelete
  3. jquery..sampai sekarang saya belum terlalu paham bagaimana cara menggunakannya :-)

    ReplyDelete
  4. nice article gan...
    kunjungan siang...:D

    ReplyDelete
  5. @Alya Zahra oke. makasih atas kunjungannya ya :D

    ReplyDelete
  6. untuk pemula seperti saya itu sangat bermanfaat pak admin
    mohon kunjungan baliknya ya
    baru belajar buat blog nih
    Place ADS

    ReplyDelete
  7. ijin nyoba praktek mas..
    makasih dah bebagi.

    ReplyDelete
  8. wah mantap bro, blog aku juga pake daftar isi ini, btw templatenya keren. :like:
    kunjungi blog aku juga yah :smile: http://data-uploadku.blogspot.com/

    ReplyDelete

Terimakasih telah membaca artikel di atas. Silahkan berkomentar dengan sopan.

emo-but-icon

Side Ads

Facebook

Adv

item