Teguh Bagus of Veterinary Medicine site v.2

Excellence with Morality

__Sertifikasi dan Prestasi__

    Standart ISO 9001:2008 Kepada Universitas Airlangga oleh British Certification International

_Berbagi tak pernah Rugi_

    Teguh Bagus of Veterinary Medicine site v.2

    ____Hakikat Manusia____

    .: Barang siapa mengenal dirinya, maka ia akan mengenal TuhanNya. Seperti bahasan kita yaitu Awwal- uddin Ma'rifatullah adalah... :. more

    ∞ Akun Facebook & Twitter Kami ∞

..:: Selamat Buat para Pemenang lomba web & blog Mahasiswa Universitas Airlangga Tahun 2015; 1.Mei Budi Utami [FST'12] | 2.Mita Erna Wati [FK'12] | 3.Teguh Bagus Pribadi [FKH'12] | 4.M. Roihan Hanafi [FISIP'12] | 5.Ari Zulaicha [FISIP'12] | 6. Muziburrahman [FPK'14] | => Terimakasih atas kunjungan Anda, jangan lupa kalau mau copy/paste harap cantumkan sumbernya, by : Teguh Bagus Pribadi, http://teguhbaguspribadi-fkh12.web.unair.ac.id, dan Blog ini DIPERBAHARUI sebulan 4x karena kesibukan Perkuliahan ::..

Membuat Daftar Isi Dengan Desain Keren

diposting oleh teguhbaguspribadi-fkh12 pada 05 June 2013
di Kumpulan Tutorial Blog - 0 komentar

Sebelumnya saya memposting Artikel tentang Daftar Isi dengan effect Accordion. dan kali ini saya Membagikan lagi kepada sobat - sobat semua yaitu Daftar isi dengan desain keren,daftar isi ini menurut saya cukup bagus dan elegan,yang membuat sobat semua tertarik untuk memasangya

Screenshot :
Wahyu only



Daripada penasaran,mending langsung saja coba di blog sobat dengan mengikuti cara-cara pemasanganya.sebagai berikut :

- Login ke akun Blog
- Entri Baru -> Klik HTML ( bukan Compose )
- Taruh Script Kode di bawah ini pada Mode HTML
<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#8A94F0;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#C4C9F8;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#181D67;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #181D67;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#051466;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#999;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;
  }
}
</style>

<br />
<div id="tabbed-toc">
<span class="loading">Loading Sitemap .. Please Wait.. :)</span></div>
&nbsp;<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://wahyu-only.blogspot.com/",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: true,
    monthNames: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true,
    maxResults: 99999,
    preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js" type="text/javascript"></script> 
.

Keterangan :
.Silahkan sobat Tulisan yang berwarna merah dengan kata-kata sobat :)

.Silahkan sobat Tulisan yang berwarna hijau dengan URL sobat.


- Kemudian klik simpan

Jadi kesimpulannya, Memasang daftar isi diharuskan ada disetiap blog ataupun website, Karena fungsi dari daftar isi ini sangatlah penting yaitu sebagai peta blog yang memudahkan pengunjung dalam menjelajahi blog anda.

Sekian post tentang Cara Membuat Daftar Isi otomatis dengan desain Keren. terima kasih sudah berkunjung dan semoga bermanfaat :D

Tinggalkan Komentar

Nama :
E-mail :
Web : tanpa http://
Komentar :
Verification Code :