Sabtu, Juni 22, 2013

Cara Membuat Daftar Isi / Sitemap Keren

Mau buat Daftar isi / Sitemap, tapi bingung, ga tau gimana caranya, baca artikel ini, insyaallah membantu anda dalam membuat DAFTAR ISI pada blog teman - teman semua.

Cara Membuat Daftar Isi / Sitemap Keren

Yadi000.Blogspot.Com - Selamat Sore sobat Yadi000 Blog, kali ini saya akan Share artikel tentang "Cara Membuat Daftar Isi / Sitemap Keren", Nah disini mungkin anda belum tau apa Sebenarnya fungsi daftar isi/ Sitemap pada blog/ Website.

Apa Fungsi Daftar Isi / Sitemap ?
Daftar Isi / Sitemap memiliki beberapa keuntungan untuk blog dan website diantaranya adalah sebagai berikut....!!!!!

  • Sebagian dari langkah SEO (Search Engine Optimization)
  • Mempermudah pengunjung mencari dan Melihat isi blog
Nah untuk pembuatannya tidak cukup Sulit, Caranya :
  • Login ke akun blogger anda
  • Buat daftar isi dari menu Buat Laman atau Buat Entri
  • Saat sedang membuat halaman daftar isi, silahkan beralih dari mode COMPOSE ke mode  HTML
Cara Membuat Daftar Isi / Sitemap Keren

  • Copy Paste Script dibawah kedalam Tempat pengetikan artikel ( HTML )
Script :

<div dir="ltr" style="text-align: left;" trbidi="on">
<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://yadi000.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></div>

Teman - Teman juga dapat menggunakan Daftar isi yang lain Seperti ini, caranya sama saja, tinggal copy script di bawah ini saja, di coba2 aja mana yang cocok.
Script : 

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:270px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://NamaBlogaAnda.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Ket :

  • Ganti tulisan WARNA MERAH dengan Nama Blog anda
  • Untuk contoh Daftar isi, silahkan lihat DISINI
Sekian Artikel saya tentang Cara Membuat Daftar Isi / Sitemap Keren, apabila ada yang kurang jelas, silahkan berkomentar.

SEMOGA BERMANFAAT

Share this

26 Responses to "Cara Membuat Daftar Isi / Sitemap Keren"

  1. begitu bnyk model sitemap ya..
    sampe para blogger pun bingung pake yg model apa, coz sama kerennya..
    dlu jg ane da prnah nyoba sitemap sprt punya sobat, tp akhirnya jatuh cinta sama sitemap model lain..
    -keep blogging- :>)

    BalasHapus
    Balasan
    1. hahhaa bener banget....
      selera admin blog beda2 gan. wkwkwkwk (o)

      Hapus
  2. wah bias di coba nie gan :)
    oh yaaa blog agan dah ane like juga low

    BalasHapus
    Balasan
    1. silahkan gan....
      sepp.. makasih gan.. blog agan juga udah ane follow

      Hapus
  3. artikelnya sangat mantap nih.... thanks udah berbagi...

    BalasHapus
  4. ada yg lebih ringan loadingx mas?

    BalasHapus
    Balasan
    1. ringan atau ga nya itu tergantung dari banyaknya artikel yang di post pada blog agan.. :D

      Hapus
  5. terima kasih om buat artikel ini ... sangat bermanfaat buat blogger pemula untuk menjadi media inspirasi saya ...

    BalasHapus
  6. Sangat bermanfaat nih bagi para blogger newbie..
    Thx artikelnya gan..

    BalasHapus
  7. keren artikelnya zob...ijin nyoba ya!
    di tunggu pos terbarunya

    BalasHapus
  8. nice artikel (h)
    gan ane dah follow blog agan Follback ya gan :d

    BalasHapus
    Balasan
    1. seepp... blog agan sudah saya follow juga :D

      Hapus
  9. Daftar isi sangat perlu gan, untuk merangkum semua artikel kita,

    sudah saya terapkan,

    BalasHapus
    Balasan
    1. bener banget gan. biar pengunjung muter2 di blog kita

      Hapus
  10. nice info sob :) maju terus blognya

    BalasHapus
  11. wahh patut di coba nih :D
    keren keren

    http://cheat-ckt.blogspot.com

    BalasHapus

Sebelum berkomentar harap di perhatikan aturanya :

1. No Sara
2. No Porno
3. No Live Link
4. No SPAM And Junk

Best Regards Admin_J_Y