Membuat Sitemap/Daftar Isi Responsive keren Perlabel



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



  • selanjutnya tinggal dipublikasikan
  • selesai
Semoga bermanfaat jangan lupa coment nya......
Previous
Next Post »

8 komentar

Click here for komentar
Unknown
admin
October 5, 2014 at 5:48 AM

wah ini yang ane cari2 gan sitemap yang responsive :D ijin coba gan :)

Reply
avatar
Unknown
admin
October 5, 2014 at 5:57 AM

Saya belum ngerti dengan sitemap tentang kegunaanya apa..

Reply
avatar
October 5, 2014 at 6:04 AM

Keren Nih, Coba Pasang Gan :)

Reply
avatar
Unknown
admin
October 5, 2014 at 6:09 AM

ini yang ane cari2 gan sitemap yang responsive

Reply
avatar
Hito
admin
October 5, 2014 at 6:10 AM

wah responsive bgt gan,, thx deh sharenya?? :D

Reply
avatar
Unknown
admin
October 6, 2014 at 1:34 AM

wah ijin bookmark dlu gan :D

Reply
avatar
October 6, 2014 at 1:52 AM

wah keren gan daftar isinya lumayan kalau ane modif lagi :D

Reply
avatar
Thanks for your comment