Cara Membuat Daftar Isi Ala Kang Ismet Di Halaman Statis

Kali ini saya akan berbagi cara membuat daftar isi Ala Kang Ismet seperti yang saya gunakan. Untuk menggunakan diblog sobat silahkan ikuti langkah - langkah berikut ini.
Langkah :

1. Login pada blog Anda masing-masing.
2. Pada menu dashboard pilih menu laman.
   
   
   
3. Lalu pilih menu laman baru.
   
   
   
4. Setelah itu jangan lupa untuk mengganti jenis compose menjadi html.
   
   
   
5. Lalu copy script dibawah ini lalu paste pada kolom laman tersebut.
   

    <style type="text/css">
   /* Basic Skin for Multi Feed Loader */
   .list-entries{background:white;border:1px solid #d8d8d8}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#02C7FD;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0 !important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden;color:#999}.list-entries .more-link{border-bottom:none;}.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#009999;padding:.5em 1em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#006B6B}
   /* Custom CSS */
   .list-entries {margin:7px;width:270px; /* Lebar widget */ float:left;font-size:11px;}
   </style><br />
   <br />
   <div id="feed-list-container"></div><div style="clear:both;"></div><br />
   <script type="text/javascript">
   var multiFeed = {
       feedsUri: [
           {
               name: "Blogger",
               url: "https://sederettutorial.blogspot.com",
               tag: "Blogger"
           },
           {
               name: "HTML",
               url: "https://sederettutorial.blogspot.com",
               tag: "HTML"
           }       
       ],
       numPost: 2,
       showThumbnail: true,
       showSummary: true,
       summaryLength: 80,
       titleLength: "auto",
       thumbSize: 72,
       containerId: "feed-list-container",
       readMore: {
           text: "Selengkapnya",
           endParam: "?max-results=8"
       }
   };
   </script><br />
   <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script> 

Catatan

1. Pada kode url: "https://sederettutorial.blogspot.com", ganti dengan alamat URL blog sobat
2. Pada kode name: "Blogger",  ganti dengan judul label blog Anda, 
3. Pada kode tag: "Blogger" ganti dengan nama tag label blog Anda, 
4. Jika ingin menambah daftar isi, Anda dapat menambah kode di bawah ini setelah tanda },





{
name: "Blogger",
url: "https://sederettutorial.blogspot.com",
tag: "Blogger"
}

contoh


{
name: "HTML",
url: "https://sederettutorial.blogspot.com",
tag: "HTML"
},
{
name: "Tutorial",
url: "https://sederettutorial.blogspot.com",
tag: "Tutorial"
}




6. Lihat kode dibawah ini, kode ini untuk mengatur Lebar widget

   .list-entries {margin:7px;width:270px;

7. Lihat kode dibawah ini, kode ini untuk menentukan jumlah post dalam satu widget

   numPost: 2,

8. Publikasikan.