Breaking News
Loading...

Cara Membuat Daftar isi Otomatis di Blog

6bsfc - Click for Next Image...

Sudah lama tidak membuat tutorial Blog akhirnya memposting lagi. Postingan ini untuk menjawab pertanyaan dari Destur Purnama Jati yaitu cara membuat daftar isi otomatis di blog. daftar isi blog otomatis memang sangat efisien di bandingkan membuat daftar isi secara manual. Daftar isi blog ini bekerja berdasarkan Label dan Feed Blog.. Untuk previewnya anda bisa lihat pada gambar di atas atau pada halaman Daftar isi blog ini..

Jika anda tertarik untuk membuat daftar isi otomatis di blog, silahkan ikuti langkah-langkahnya di bawah ini:

1. Pastikan anda sudah login di Blogger..
2. Pada Dashboard pilih New Post..
3. Kemudian pilih Edit Pages..
4. Pilih New Page..
5. Beri Judul "Daftar Isi", lalu Klik Edit HTML dan masukkan kode CSS & script di bawah ini:
<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://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) 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:ccc; 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:#ccc; 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="http://blog-dollar98.googlecode.com/files/Acc1.js" type="text/javascript">
</script>
<script src="http://raytkj.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<span style='float:right;font:italic 9px Arial, Sans-Serif;'>
<a href='http://raytkj.blogspot.com/' target='_blank'>:: widget by Ilmu Internet ::</a></span>
Seperti pada gambar di bawah ini..
dtlmx - Click for Next Image...

Keterangan:
Ubah http://raytkj.blogspot.com dengan Url Blog anda..
6. Setelah itu Publish Page..
7. Selesai..

4 komentar:

  1. wow...Thanks gan postingnya....:)

    BalasHapus
  2. Ini penipuan namanya masa berbagi tapi di anti copas -___-

    BalasHapus
    Balasan
    1. anti copas dimananya ? masih bisa dicopas cuman kalau copas artikel untuk dipublish ya harus pakai sumbernya. kalau copas script masukin ke edit html ya gak usah masukin sumbernya.

      Hapus

Terima kasih sudah mau berkunjung ke Blog sederhana ini, Tidak ada salahnya untuk memberikan komentar untuk kemajuan blog ini.
Catatan komentar yang tidak ditampilkan :
1. Komentar SPAM
2. Komentar tidak bermutu / tidak nyambung.
3. Memasukan Link ke dalam kotak komentar blog.

 
Toggle Footer