T

Membuat daftar isi keren dengan menggunakan jquery accordion

>

بسم الله الرحمن الرحيم

Langsung ke TKP ya gan...(lagi males)hehe

klik DEMO untuk melihat contohnya

nih langkah-langkahnya:

1. Masuk ke Blogger
2. Pilih Posting - posting baru
3.Masukan judul Posting misalnya SITEMAP BLOG sekedarbiasa blogspot
4. pilih HTML bukan Compose
5. Letakkan kode dibawah ini didalam nya:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><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>
<script type="text/javascript">
    showNew    = true;
    accToc     = true;
    openNewTab = true;

    var maxNew     = 10,
        baru       = "Baru!",
        sDownSpeed = 600,
        sUpSpeed   = 600;
</script>
<script src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js" type="text/javascript"></script>
<script src="http://sekedarbiasa.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>


 6. Ubah kode warna biru http://sekedarbiasa.blogspot.com dengan url blog anda

Ok itu saja, sangat mudahkan untuk membuatnya! Tentunya dengan sitemap tersebut penunjung anda akan betah di blog sobat dan tentunya blog menjadi lebih SEO Friendly. Terima kasih telah berkunjung ke blog saya, semoga artikel ini bermanfat. Jangan lupa berkomentar ya.....


Bila anda merasa artikel diatas bagus dan bermanfaat, anda bisa gunakan URL atau HTML dibawah ini. Silahkan anda dipasang dihalaman web atau blog anda untuk menuju kehalaman ini :




Widget by BloggerTipAndTrick


Share Artikel Ini :

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Sekedar Blog Biasa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger