Membuat Sitemap/Daftar Isi Responsive keren Perlabel ~ Lubang Pengetahuan

Datar isi/Sitemap sangat penging buat pengujung suatu blog dalam menemukan postingan terbaru di suatu blog, tidak jarang ditemui kalau Daftar isi yang dimiliki blog sangat cupu dan tidak keren dan tidak membuat pengunjung nyawan, kali ini saya akan berbagi cara membuat daftar isi yang keren dan Responsive dan tentu saya membuat pengunjung betah, mari ikuti langkah berikut:

Langkah Pemasangan

Masuk dulu ke blogger
Pilih laman > buat laman baru
Judul nya terserah anda bisa sitemap atau daftar isi
setelah itu beralih ke mode HTML dengan menambahkan kode yang ada di bawah ini

<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/85534041115/lubang.js" type="text/javascript">
</script><br />
<script src="http://lubangpengetahuan.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
<div style="text-align: right;">
<div style="margin-top: -10px;">
</div>
</div>
</div>

Ganti tulisan yang berwarna Kucing dengan url blog agan sendiri