Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren

Cara membuat Daftar Isi / Sitemap Otomatis Di Blogger terbaru dan Keren dengan javascript Accordion Style

Sitemap adalah salah satu elemen penting dalam sebuah blog. Karena di Blogger.com tidak menggunakan layanan plugin seperti di WP, maka penggunanya sering kali membuat daftar isi secara manual. Membuat sebuah halaman daftar isi di blogspot mereka. Hal ini juga dipercaya meningkatkan SEO onpage blog mereka tersebut. Dengan membuat daftar isi otomatis dalam blog mereka, pengunjung akan dapat melihat semua postingan yang terdapat dalam blog mereka, biasanya setiap postingan di bagi berdasarkan label atatu kategori.

Oke, setelah sebelumnya netomaniak telah membuat postingan Cara membuat daftar isi otomatis dengan tabulasi, kali ini saya mencoba membagikan cara membuat daftar isi otomatis dengan efek accordion style, yang tentunya lebih keren dan stylis. javascript yang digunakan boleh dibilang sangat simple dan ringan. Berikut tutorial nya:

1. Login ke blog Kalian dulu.

2. Setelah itu, pilih blog yang akan kalian tambahkan sitemapnya.

3. Lalu klik menu Laman/Page di bilah kiri.

4. Buat sebuah halaman kosong dengan judul sitemap ataupun daftar isi ataupun bebas terserah anda.

5. Setelah itu akan muncul sebuah form untuk menuliskan isi yang akan dipublikasikan dihalaman tersebut.

6.  Klik HTML mode di samping kanan tombol Compose.

7. Lalu, copy dan masukan kode dibawah ini pada mode html tersebut.

• .<div dir="ltr" style="text-align: left;" trbidi="on">

  <div style="margin-top: -10px;">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

  </script><br />

  <style type="text/css">

  #daftar-isi {

    background-color:#333;

    border:2px solid #fafafa;

    color:#fff;

    margin-bottom:10px;

    -webkit-box-shadow:0 1px 2px #000;

    -moz-box-shadow:0 1px 2px #000;

    box-shadow:0 1px 2px #000;

    overflow:hidden;

  }

  
  

  #daftar-isi .judul-label {

    overflow:hidden;

    cursor:pointer;

    text-decoration:none;

    font:normal 13px/100% 'Verdana',Arial,Sans-serif;

    padding:10px 15px 11px;

    color:#bbb;

    text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);

    border-top:1px solid #444;border-bottom:1px solid #222;

    background:#333;

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');

    background:-webkit-linear-gradient(top, #3c3c3c, #333);

    background:-moz-linear-gradient(top, #3c3c3c, #333);

    background:-o-linear-gradient(#3c3c3c, #333);

    background:linear-gradient(#3c3c3c, #333));

  }

  
  

  #daftar-isi .headactive {

    color:#efefef;

    border-top:1px solid #24B6E3;border-bottom:1px solid #104968;

    background:#248AB0;

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');

    background:-webkit-linear-gradient(top, #248AB0, #21739B);

    background:-moz-linear-gradient(top, #248AB0, #21739B);

    background:-o-linear-gradient(#248AB0, #21739B);

    background:linear-gradient(#248AB0, #21739B));

  }

  
  

  #daftar-isi ol {

    background-color:#333;

    margin:0 0;

    padding:0 0;

    color:#999;

    list-style:none;

  }

  
  

  #daftar-isi li {

    line-height:normal;

    font:normal 11px/100% 'Verdana',Arial,Sans-serif;

    margin:0 0;

    padding:5px 5px 5px 15px;

    white-space:nowrap;

    text-align:left;

    border-top:1px solid #444;border-bottom:1px solid #222;

  }

  
  

  #daftar-isi li:first-child {border-top:none;}

  #daftar-isi a              {color:#5687f8;}

  #daftar-isi a:hover        {text-decoration:underline;}

  #daftar-isi a:visited      {color:#5687b8;}

  
  

  #daftar-isi strong {

    font-weight:bold;

    font-style:italic;

    color:red;

  }

  </style><br />

  <script type="text/javascript">

      showNew    = true;

      accToc     = true;

      openNewTab = true;

  
  

      var maxNew     = 10,

          baru       = "New!!!",

          sDownSpeed = 600,

          sUpSpeed   = 600;

  </script><br />

  <script src="http://yourjavascript.com/123135733222/daftarisi.js" type="text/javascript">

  </script><br />

  <script src="http://www.netomaniak.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">

  </script></div>

  <div style="text-align: right;">

  <div style="margin-top: -10px;">

  </div>

  </div>

  </div>

  </div>

keterangan: ganti www.netomaniak.com dengan alamat blog anda!!!

8. Setelah itu, silahkan Publish atau Simpan. Buka halaman tersebut untuk melihat hasilnya.

Ok, itu dia tutorial Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren. Jika ada kesalahan atau tidak berhasil di terapkan di blog anda, silahkan posting komentar anda di postingan ini.

Baca juga: 

      

• .

  • Cara Modifikasi Widget Popular Posts Keren Dengan ...

  • Cara Download Full Speed di Mediafire (Tampilan 20...
  • Cara Menggunakan Internet Gratis SSH
  • Tutoial Membuat Akun SSH Sekali Klik Tanpa Daftar
  • Memunculkan Deskripsi (Alinea Pertama) Posting di ...
  • Template Fastest Magz Modifikasi Terbaru Gratis
  • Cara Membuat Daftar Isi/Sitemap Blogger