| |



Pada postingan kali ini, saya akan memberikan tutorial memasang daftar isi dengan sortir label buatan Mas Taufik pada blognya yaitu dte.web.id, namun dengan beberapa modifikasi warna pada cssnya. Sahabat bisa memasangnya pada widget atau pada halaman statis blog sahabat dan menyesuaikan warnanya dengan blog sahabat. Caranya tinggal copy paste kode dibawah ini:




<style type="text/css">
#daftar-isi {
  background-color:#1F2B37;
  color:#fff;
  margin-bottom:10px;
  overflow:hidden;
}
#daftar-isi .judul-label {
  overflow:hidden;
  cursor:pointer;
  text-decoration:none;
  font:normal 16px/100% 'Verdana',Arial,Sans-serif;
  padding:15px;
  color:#bbb;
  border-bottom:1px solid #2c3e50;
  background:#1F2B37;
  }
#daftar-isi .headactive {
  color:#FFF;
  border-bottom:1px solid #256B99;
  background:#3498db;
}
#daftar-isi ol {
  background-color:#7f8c8d;
  margin:0 0;
  padding:0 0;
  color:#fff;
  list-style:none;
}
#daftar-isi li {
  line-height:normal;
  font:normal 13px/100% 'Verdana',Arial,Sans-serif;
  margin:0 0;
  padding:5px 5px 5px 15px;
  white-space:nowrap;
  text-align:left;
}
#daftar-isi li:first-child {border-top:none;}
#daftar-isi a              {color:#FFF;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out
}
#daftar-isi a:hover        {text-decoration:none;padding-left:5px}
#daftar-isi a:visited      {color:#FFF;}
#daftar-isi strong {
  font-weight:bold;
  font-style:italic;
  color:red;
}
</style>
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true,
    maxNew     = 5,
    baru       = "Baru!",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script type="text/javascript" src="http://yourjavascript.com/22132518161/daftar-isi-acordion.js"></script>
<script src="http://ridhomfirdaus.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


NB: Silahkan ganti ridhomfirdaus.blogspot.com dengan blog sahabat. Silahkan sesuaikan warnanya dengan tampilan blog sahabat. Untuk mengetahui kode warnanya, bisa sahabat lihat di sini.

Memasang daftar isi pada halaman statis
  • Masuk ke menu Laman. Kemudian, pada menu Laman Baru pilihlah Laman Kosong. Sebelum memasukan kodenya, tulis terlebih dahulu judul halamannya. ex: Sitemap, Daftar Isi, Menu, etc
Memasang daftar isi pada widget
  • Masuk ke pengaturan Tata Letak, kemudian tambah gadget dan pilih HTML/JavaScrip.
Demikian tutorial tentang Memasang Daftar Isi Accordion. Semoga bermanfaat dan mempercantik blog sahabat.
Share:

G+1

Howdy, I'm @ridhomfirdaus

Seorang blogger, designer serta founder incsomnia, sebuah jasa pembuatan design dan website. Berstatus sebagai mahasiswa Jurusan KPI UIN Bandung dan dewan redaksi majalah jurusan yaitu Dejavu Magazine. Terimakasih atas kunjungan sahabat di blog sederhana ini. Silahkan simpan link website/blog sahabat atau mengisi buku tamu di sini agar bisa saling bersilaturahim. Terimakasih.
tukar link Guestbook

0 komentar:

Posting Komentar

 
Back to Top