Membuat Daftar Isi Dengan Desain Keren

Posted by Wahyu basofii on Rabu, 29 Mei 2013

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

.

Judul : Membuat Daftar Isi Dengan Desain Keren
Label :
URL : http://wahyu-only.blogspot.com/2013/05/daftar-isi-dengan-desain-keren.html

18 komentar:

  1. Balasan
    1. Hai bro..atas nama siapa ya ?? :D

      Hapus
    2. ATAS NAMA AGIEL13.BLOGSPOT.COM

      TUCH DI FOLLOWERS ABANG ADA :)

      Nick ny Agiel A Dharmawan

      Hapus
    3. Udah saya follow bro..makasih

      Hapus
  2. Wah...menarik nih mas tuyornya
    sekalian mampir di sini :)

    BalasHapus
    Balasan
    1. Hehe,,iya mas,makasih kunjunganya ya.

      Hapus
  3. Mantap mas...
    Kunjungan balik yah :D
    http://crewbola.blogspot.com/

    BalasHapus
    Balasan
    1. Ok bro,,makasih ya kunjungannya :D

      Hapus
  4. blum bsa praktek kak,,,
    ngeblog pkai hp

    BalasHapus
  5. kira2 widget ini...cocok ndak ya mas sama template. sy :)

    BalasHapus
    Balasan
    1. Coba dulu aja mas...insyaallah cocok kok..

      Hapus
  6. Follback Bang Follback :)

    AGIEL13.BLOGSPOT.COM

    BalasHapus
  7. izin coba gan, di saya work gk ya..?

    come back..

    BalasHapus
  8. keren gan ijin untuk mencoba nih ,thanks

    BalasHapus
  9. gan follback blog ane yaa :)

    http://diakuin.blogspot.com

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter