Cara Membuat Sitemap/Daftar Isi Responsive Perlabel Keren

How To Creat Sitemaps Responsive In blog - Kali ini saya akan share Cara Membuat Sitemap/Daftar Isi Responsive Perlabel Keren. cara ini sangat diperlukan bagi semua blogger untuk memperindah tampilan blognya. Dengan bantuan daftar isi maka para pengunjung akan lebih mudah menemukan tutorial/game maupun Software yang sedang mereka cari di blog anda. bagaimana sob? Anda Tertarik?. jika jawabannya iya silahkan ikuti saja langkah langkah yang sudah saya buat dibawah ini

1. log in ke blogger > Dasboard
2. Cari blog yang mau anda taruhi Daftar isi/Sitemap
3. Buat Postingan baru
4. Masukkan kode dibawah ini di HTML bukan 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://updateslaluz.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. Buat menu navigasi dengan mama sitemap/daftar isi dengan url menuju ke link posting yang anda buat tadi

7. Selesai

Sekian dari saya. semoga postingan ini dapat bermanfaat bagi anda semua dan Terimakasih

Tweet

Posted by Unknown