Senin, 03 Maret 2014

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.
Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren



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: 
      
Terima Kasih Telah Berkunjung Di Bog ini Semoga Bermanfaat
Judul: Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren
Tulisan di Blog ini tidak semuanya saya Tulis dan juga banyak artikel Dari BLog Lainnya Cara Membuat Daftar Isi Otomatis Di Blog terbaru dan Keren Blog ini hanyalah sebagai Bookmark dari Blog tetangga yang ingin saya baca ketika ada waktu Longgar untuk Blog tulisan saya Sendiri adalah http://m-shohiburridak.blogspot.com itu banyak berisi Tutorial Tentang Jaringan

Related Post:



Diposting oleh Networking di 04.44
0

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Gunakan Google Chrome Untuk Mendapatkan Tampilan Terbaik Blog Ini ( ^_^ )