Sunday, May 13, 2012

Cara Membuat Daftar Isi Otomatis Menggunakan Style

Cara Membuat Daftar Isi Otomatis Menggunakan Css ini adalah tutorial blog yang selan jutnya saya postingkan lihat juga artikel sebelumnya yaitu DOWNLOAD GAME YU GI OH POWER OF CHAOS : KAIBA THE REVENGE.
Daftar isi otomatis ini sangat bermamfaat karena dengan adanya daftar isi otomatis ini pengunjung akan lebih mudah menjelajah blog anda dan memudahkan anda mengelompokan postingan anda untuk mempelajari bagaimana membuat daftarisi ini silahkan anda lihat dan simak tutorialnya dibawah ini : 

Tutorial Blog Cara Membuat Daftar Isi Otomatis Menggunakan Style
  • Mula mula masuk dahulu ke accoun blog anda
  • Biasa isikan Username dan Password anda
  • Lalu Klik New Entri anatu Buat entry baru
  • Lalu pilih HTML jangn pilih Compose
  • Kemudian Berijudul Daftar isi atau apapun namanya bebas 
  • Kemudian copy Paste kan kode HTML dibawah ini :
<div style="margin-top: -10px;">
<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       = "New!!!",
        sDownSpeed = 600,
        sUpSpeed   = 600;
</script>
<script src="http://wisnunugraha.googlecode.com/files/AccordionList.js" type="text/javascript">
</script>
<script src="http://thomijasir.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;">
<a href="http://thomijasir.blogspot.com/" target="_blank"><img alt="Catatan Thomi Jasir" border="0" height="30px" src="http://i1077.photobucket.com/albums/w468/Thomijasir/logojadiexchange145x45.jpg" title="Situs ini memiliki berbagai macam informasi yang anda harus ketahui disini juga ada Download software games business informasi kesehatan tutorial blog" widith="200px" /></a></div>
</div>
Keterangan :
Warna Merah : isikan dengan alamat URL Blog anda
Warna Hijau : isikan dengan kata kata anda fungsinya untuk menampilkan tulisan di entry baru
Warna Kuning : itu adalah ukuran margin anda bisamengubahnya sesuai template blog anda
  • Lalu Pratinjau dulu untuk melihat hasilnya 
  • Setelah menurut anda bagus untuk dipasang tinggal Save
  • Langkah terakhir adalah publikasi 
  • selesilah lagkah langkanya
Ini hasilnya :
Tampilan Daftar is otomatis anda
Sekian Tutorial dari saya semoga bermamfaat dan selamat mencoba !!
Klik DISINI kalo memang suka dengan artikel ini
 

*ATTENTION If you Want Download Please Turn OFF or Remove Your AdBlock
Title: Cara Membuat Daftar Isi Otomatis Menggunakan Style
Reviewed By: Unknown
Rating Blog: 4.7 dari 5

Article Category Tutorial Blog Title Cara Membuat Daftar Isi Otomatis Menggunakan Style You can share articles and copy the Articles This is very useful if, but do not forget to save the link source you can copy the code below. Thanks!
ads
ads

Written By : Unknown Time : 2:18 PM Category :

0 Comments:

Post a Comment

Rules If you Want Comment Here

1. Post a Comment The polite and courteous
2. Not Spamming, Junk
3. The topic of discussion commented articles relevant title
4. Give advice if you feel the need to advise
5. Do not use Anonymous
6. Please!!! LANGUAGE USE THE STANDARD
7. Do not put any links in comments

Thanks To the visitors who have taken the time you hope the above article useful.