Menu daftar isi blog akan memudahkan
pembaca mengakses bagian-bagian atau konten blog secara cepat dan mencari tulisana,
artikel, atau posting yang mereka butuhkan.
Menu navigasi daftar isi ini juga
dianjurkan Google guna memudahkan user menjelajahi blog kita. Google memang "Selalu berpihak" pada user. Apa yang disukai user, disukai
pula oleh Google.
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).
Fungsi lainnya :
• 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
1. Klik Menu Page di Dashboard Blog
2. Klik New Page > klik tombol
menu HTML
3. Copy dan Paste salah satu kode
HTML daftar isi di bawah ini. Jangan lupa ganti dulu vansofficial dengan nama
blog Anda.
4. Klik Publish!
Setidaknya ada dua macam daftar isi
blog, yaitu Berdasarkan Label/Kategori dan Berdasarkan Tanggal Publikasi.
Kode-kode HTML daftar isi di bawah ini di-copas dari googlecode.com . Masih
banyak kode daftar isi di sana yang di-share oleh para author yang baik hati dan tidak sombong :)
1. Kode HTML untuk Daftar Isi
Berdasarkan Kategori/Label
<script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript">
</script>
<script src="http://vansofficial.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
Aternatif : Untuk tampilan yang lebih cantik, gunakan script dibawah 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://vansofficial.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
2. Kode HTML untuk Daftar Isi
Berdasarkan Tanggal Publikasi
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://vansofficial.com/feeds/posts/default?max-results=9999&alt=json-in-script&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://vansofficial.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
Ada juga format daftar isi blog yang
interaktif dan (mungkin) lebih menarik, seperti yang
di-share oleh My Blogger Lab dan HiFiFan. Silahkan dipilih mana yang terbaik untuk blog anda.
Terima Kasih dan Semoga Bermanfaat
