Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog

Your Ads Here

Sitemap / Daftar isi adalah Tempat dimana sebuah halaman menyimpan beberapa Link / Tautan yang mentaut ke Halaman-halaman / Postingan-postingan di Blog itu sendiri .. dan pada kesempatan ini saya akan memberitahukan 2 Langkah mudah Cara Membuat Sitemap / Daftar Isi Otomatis di Blog / Blogger / Blogspot ..

Lihat DEMO →

Berikut Tutorial / Cara-cara nya :

1. Simpan bumbu CSS dibawah sebelum Tag </head> pada halaman EDIT HTML :

<style type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#d5d5d5;
  -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;
}
See also: Cara Memasang Tooltip Responsive di Blog dengan jQuery.

#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:#e9e9e9;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#444444;
  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 #444444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
See also: Membuat Top Komentator pada Halaman Statis dan Komentar Blog

#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;



Your Ads Here










Your Ads Here










  font-weight:bold;
  font-size:11px;
  color:#4d4d4d;
  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;
}
See also: Memahami Logika CSS Media Queries agar Layout Blog Responsive!

#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:#c2c2c2;
  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,
See also: Pregnancy:  The Importance of Prenatal Care

  #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>

2. Lalu Edit & Simpan bumbu JavaScript dibawah ini di Halaman / Postingan blog anda! ketika menulis post tekan tombol HTML → Paste → Simpan !

<div id="tabbed-toc"><span class="loading">Loading...</span></div> <a style="display:block;text-align:right;font:normal bold 8px Tahoma,Sans-Serif;text-decoration:none;margin:9px;" href="http://rian-nurherdian.blogspot.com/2013/01/cara-membuat-sitemap-atau-daftar-isi.html" title="Cara Membuat Sitemap / Daftar isi di Blog seperti ini ?">Sitemap Widget!</a> <script type="text/javascript"> var tabbedTOC = { blogUrl: "http://alamat-blog-anda.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 type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Keterangan : Ganti dengan Alamat Blog anda , pada text yang di beri background kuning pada bumbu JavaScript di atas ..

3. Selesai .. selamat Mencoba! dan semoga bermanfaat .. #enjoy blogging ^-^

Your Ads Here