Home / blog

Cara Membuat Daftar Isi atau sitemap Blog Blogger

Cara Membuat Daftar Isi Blog (sitemap) | Peta situs blog atau website lebih populer dengan sebutan daftar isi atau menu navigasi daftar isi, dan dalam bahasa inggris disebut dengan sitemap atau table of content.

Bagi sobat pemula, mungkin perlu dijelaskan bahwa terdapat dua jenis daftar isi (sitemap) blogger, yaitu sitemap Html dan sitemap XML. Sitemap XML digunakan mesin pencari untuk merayapi isi situs dan menyusun indeks (seperti misalnya oleh mesin pencari google) dan pengunjung tidak bisa mengerti isinya dengan baik, serta tidak bisa di-klik. Sementara Sitemap Html, yang biasanya diletakkan pada halaman statis suatu situs (pages atau laman pada blogger) digunakan untuk kemudahan pengunjung blog dalam menelusuri semua artikel atau posting blog.

Pada artikel ini, yang akan dibahas adalah site map HTML yang ditujukan untuk mempermudah pengunjung situs (meskipun pada banyak kasus juga digunakan untuk mendapatkan persetujuan pengajuan sebagai publisher adsense).

Dengan bahasa sederhana, artikel ini akan membahas tutorial cara membuat seluruh konten blog (berupa judul dan tertaut ke artikel lengkap) pada satu halaman statis yang tingan dan cepat. Contoh daftar isi bisa sobat lihat di Daftar Isi WebKeren.Net

Kegunaan Daftar Isi Blog

Halaman daftar isi sangat membantu bagi pengguna, mesin pencari, maupun pemillik blog sendiri untuk menjelajahi keseluruhan isi website. Membuat daftar isi blog juga direkomendasikan oleh google karena membuat pengunjung merasa nyaman ketika mengunjungi blog,- karena konten blog yang dibutuhkan bisa ditemukan dengan mudah. Daftar isi blog juga meningkatkan seo (optimalisasi mesin pencari) karena memuat semua link internal dengan kata kunci atau anchor teks yang benar-benar tepat.

Cara Membuat Daftar Isi Blog

  1. Masuk / Login akun Blogger dan Pilih Blog yang ingin ditambahkan laman daftar isi
  2. Pilih Laman (Page) di Menu Dashboard Blog (sebelah kiri)
  3. Pilih New Page (laman baru).
  4. Pilih / masuk mode HTML
  5. Copy kode HTML daftar isi di bawah ini yang sesuai dengan keinginan sobat (pilih satu).
  6. Ganti www.webkeren.net dengan nama blog sobat
  7. Klik Publish dan Daftar isi blog sobat sudah tampil

Terdapat bermacam-macam daftar isi blog, dan berikut ini adalah beberapa kode html yang bisa sobat gunakan untuk membuat daftar isi blog.

1. Kode HTML untuk Membuat Daftar Isi Blog Berdasarkan Kategori/Label

<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript">
</script>
<script src="http://www.webkeren.net/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

atau coba juga kode berikut

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>

<div id="toc">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.webkeren.net/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

2. Kode HTML untuk Membuat Daftar Isi Blog Berdasarkan Tanggal Publikasi

<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://www.webkeren.net/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

3. Kode HTML untuk Daftar Isi Berdasarkan Tanggal Publikasi Plus Kotak

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

4. Kode HTML untuk Membuat Daftar Isi (Sitemap) Tabulasi

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css"/>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://www.webkeren.net", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

5. Kode HTML untuk Membuat Daftar Isi hanya Label Tertentu

Catatan: ganti Nama%20Label dengan label yang sobat ingin tampilkan
<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break; }} posttitle = posttitle.link(posturl);
if (standardstyling) document.write(‘<li>’); document.write(posttitle);} if (standardstyling) document.write(‘</li>’); }
</script>
<ul><script src=”http://www.webkeren.net/feeds/posts/default/-/Nama%20Label?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999&#8243;></script> </ul>
Demikian tutorial sederhana WebKeren.Net mengenai Cara Membuat Daftar Isi atau sitemap Blog Blogger. Semoga bermanfaat bagi pengunjung setia WebKeren.Net.

Sumber:
http://contohblognih.blogspot.com
http://www.dte.web.id
http://www.bloggingtipsandtricks.com