Cara membuat daftar isi blog responsive

Iseng-iseng surfing mbah google nyari cara membuat daftar isi blog responsive, nemu dech di blognya Kang Fikri...

Sitemaps atau daftar isi sangat lah penting selain optimasi seo pada suatu blog. agar memudahkan pengunjung untuk menjelajahi beberapa artikel dalam suatu blog tersebut. nah disini pula akan dijelaskan tutor cara pasang sitemaps atau daftar isi yang responsive.

Untuk demo nya : klik di sini   [ punya Kang Fikri ]
yang ini penampakan daftar isi yang ane pasang di blog ni gan  klik di sini

Cara :

• Login Blogger > laman > laman baru.
• pilih menu html nya bukan yang compose.

•  kemudian copy kan Script di bawah ini di kolom yang tersedia.

<style type="text/css">
#table-outer {
  padding:7px 10px;
  margin:30px 30px 0;
}
#table-outer table {
  width:80%;
  margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#table-outer label {
  font-weight:bold;
  color:#999;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  display:block;
  text-align:right;
  margin:0 10px 0 0;
  padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
  display:block;
  margin:0;
  padding:0;
}
#table-outer input,#table-outer select {
  width:95%;
  background-color:#111;
  border:none;
  display:block;
  margin:0;
  padding:5px 5px;
  font-size:86%;
  text-transform:uppercase;
  color:#777;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
  display:block;
  clear:both;
  margin:0 30px;
  padding:0;
  list-style:none;
  overflow:hidden;
  position:relative;
  border:1px solid #3c3c3c;
  border-top:none;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
  content:"";
  display:block;
  width:1px;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  background-color:#3c3c3c;
}
#feed-container li {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #3c3c3c;
  color:#999;
  width:50%;
  float:left;
  display:inline;
}
#feed-container li .inner {
  margin:15px 16px;
  height:116px;
  overflow:hidden;
  word-wrap:break-word;
  text-overflow:ellipsis;
}
#feed-container li a {
  text-decoration:none;
  color:#5687B8;
}
#feed-container li a:hover {
  text-decoration:none;
  color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
  margin:0 10px 5px 0;
  padding:5px;
  background-color:#222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  float:left;
}
#result-desc {
  margin:0 30px;
  padding:0;
  border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
  display:block;
  margin:0;
  padding:5px 10px 7px;
  color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
  margin:10px 30px 0;
  text-align:center;
  font-weight:bold;
  text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
  background-color:#111;
  padding:0;
  color:#999;
  text-decoration:none;
  display:block;
  height:30px;
  line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
  background-color:black;
  color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>

<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="feed-order">Urutkan artikel berdasarkan:</label>
                </td>
                <td><select id="feed-order">
                        <option selected="" value="published">POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
                </td>
                <td><select disabled="" id="label-sorter">
                        <option selected="">Loading....</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="feed-q">Cari dengan kata kunci:</label>
                </td>
                <td><form id="post-searcher">
<input id="feed-q" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<br />
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://kangfikri.googlecode.com/svn/sitemaps.js" type="text/javascript"></script>

• Tinggal save dah.