Fungsi Daftar Isi Blog
Menurut Social Media Tutorial, daftar isi juga bagus untuk optimisasi mesin pencari (Good for SEO) karena menyajikan kata kunci yang benar yang sudah digunakan (provided correct keywords have been used).- Delivers a good overview of the information that awaits the reader
- Avoids duplicate posts in diverse labels and remove the bewilderment of search engine bots.
- Supports for creating internal links of blog posts, which boost up page rank
- It can be used as “Related posts” link, on any blog-post.
- Last, but not the least, to show a certain requirement of the blog posts to explore under Specific label.
Cara Membuat Daftar Isi Blog
- Klik menu "Page" (Halaman) di Dashboard Blog
- Klik New Page (Halaman Baru)
- Isi nama halaman dengan Sitemap, Peta Situs, atau Daftar Isi
- Klik tombol mode HTML
- Copy dan Paste salah satu kode HTML daftar isi di bawah ini. Jangan lupa ganti dulu http://kuronimejc.blogspot.co.id/ dengan nama blog Anda.
- Klik Publish!
1. Kode Daftar Isi Blog Simple Berdasarkan Kategori/Label (DEMO)
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="http://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="http://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>
Kode Lainnya:
<style>
p.labels a {
color: #fff;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
border-bottom: 1px solid #ddd;
display: block;
padding: 8px;
background: #555;
}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
.sitemap-link{display:none}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>
p.labels a {
color: #fff;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
border-bottom: 1px solid #ddd;
display: block;
padding: 8px;
background: #555;
}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
.sitemap-link{display:none}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>
Alternatif:
Untuk tampilan daftar isi "lebih cantik" bisa gunakan kode di bawah ini:
<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://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
#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://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
2. Kode Daftar Isi Berdasarkan Tanggal Publikasi
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://http://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="http://http://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
3. Kode 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://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://kuronimejc.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
Selain sitemap daftar isi berdasarkan label (kategori) dan berdasarkan tanggal, masih banyak kode daftar isi di luar sana yang di-share oleh para blogger yang baik hati dan tidak sombong :)
