Cara Membuat Sitemap/Daftar Isi Responsive Perlabel Keren

siang sobat.:p , mumpung hari ini hari minggu , dan saya sedang dirumah sendiri #curhat :D

maka tidak salah nya untuk melakukan kegiatan yang bermaanfaat dengan membuat postingan tentang tutorial ... 

oken kali ini saya akan share bagaimana cara membuat daftar Cara Membuat Sitemap/Daftar Isi Responsive Perlabel Keren , masih ada yang belum jelas , tentang daftar isi .. ini lho gan coba lihat ke sini  <= demo

screenshot

bagi yang tertarik , simak baik baik tutorial dari ane .. 

1. masuk ke blogger

2. buat laman/ato pos baru (terserah anda,kalau saya Laman)

3. masukin kode di bawah ini di Hml-Nya , bukan pada Compose 

<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://susah-senang18.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 hijau dengan url blog anda

5. Lalu publikasikan
6. Selesai

sekian postingan dri saya .. semoga anda tidak bosan untuk mengunjungi blog kecil saya ...

tolong sisipkan komentar.. 

sumber : disini