Latest News

Cara Mudah membuat Sitemap Daftar Isi Blog Keren

Cara Mudah membuat Sitemap Daftar Isi  Blog Keren-Secrinfo


Bukan hanya di buku maupun novel, dll. Daftar isi juga sering digunakan di website maupun blog. Fungsinya sama, yaitu memudahkan kita mencari article yang ada di web, blog, maupun buku tersebut. Nah, sekarang kami akan share tentang Cara Mudah membuat Sitemap Daftar Isi Blog Keren. Bagaimana caranya ? langsung saja, ini dia

Membuat Daftar Isi sebagai postingan


1. Pertama yang harus kita lakukan adalah log in di blogger tentunya
2. Seperti biasa,klik tombol pensil seperti kita akan blogging dan posting
3. Klik pada tab HTML, dan tuliskan kode rahasia ( kode ada di bagian bawah postingan )
4. Lalu klik Publikasikan

Membuat Daftar Isi sebagai Laman


1. (Saya anggap sudah log ini blogger ya,) klik pada tab atau bagian Laman
2. Klik buat laman baru
3. Klik pada tab HTML, dan tuliskan kode rahasia ( kode ada di bagian bawah postingan )

Membuat Daftar Isi Sebagai Widget


1. Setelah log in klik pada bagian "Tata Letak"
2. Klik tambahkan Gadget
3. Pilih Gadget HTML
4. Tuliskan kode rahasia ( kode ada di bagian bawah postingan )

Kode Rahasia

<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...</span></div>
<a href="http://www.blogger.com/blogger.g?blogID=1214246444595948000#" style="display: block; font: normal bold 8px Tahoma,Sans-Serif; margin: 9px; text-align: right; text-decoration: none;" title="Tabbed TOC">Get The Sitemap like this</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://www.secrinfo.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 200,
    showThumbnails: false,
    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

1. Ganti URL berwarna merah menjadi URL blog anda
2. showDates: false ( ganti menjadi true jika ingin menampilkan waktu postingan)
3. showSummaries: false ( ganti menjadi true jika ingin menampilkan ringkasan singat postingan )
4. showThumbnails: false ( ubah menjadi true jika ingin menampilkan gambar )
5. newTabLink: true ( ubah menjadi false jika anda ingin membuka link pada tab yang sama )
6. maxResults: 99999 ( jumlah maksimal postingan yang ditampilkan )

Mudah bukan ?
Jika berhasil maka kurang lebih akan seperti ini


Mudah bukan ?
Sekian article tentang Cara Mudah membuat Sitemap Daftar Isi Blog Keren . Mudah-mudahan ada guna dan manfaatnya,
Thanks

Codesource : http://www.dte.web.id

11 Responses to "Cara Mudah membuat Sitemap Daftar Isi Blog Keren"

  1. Saya copy dulu codenya pak.. siapa tau lain waktu kepikiran buat bikin sitemap...

    BalasHapus
  2. wah, boleh di coba nih, makasih bang Ficar

    BalasHapus
  3. ini sudah saya terapkan gan, :)

    saya sukses Folback, atas nama Daniel (Style Admin)

    thanks

    BalasHapus
  4. Wahh bagus kyanya nihh.. Keep posting om.. i'm still watching.. ;)
    By; Deafile Bedah Blog

    BalasHapus

Let's comment and i'll coment on your blog

No Sara
No Spam
No Ads !!!