Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label/Katergori


Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label/Katergori. Bagi yang sudah mempunyai blog sendiri, terkadang masih ada juga yang belum tahu Cara Membuat Daftar Isi Blog secara Otomatis. Naah, dari pada bertanya-tanya "Gimana sih cara-nya membuat daftar isi blog secara otomatis itu ?? dan Fungsinya itu untuk apa sih ?? Langsung saja simak postingan saya dibawah ini. ..

Fungsi Daftar Isi Blog

Dengan adanya daftar isi / Sitemap yang ada di blog ini di harapkan untuk bisa memudahkan bagi si pembaca untuk mengakses bagian-bagian atau konten isi blog dan mencari posting atau artikel yang mereka butuhkan secara cepat dan tepat. Selain itu, 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).

Cara Membuat Daftar Isi Blog


1. Klik menu Page (Laman) di Dashboard Blog.

2. Klik New Page (Laman Baru) kemudian klik tombol menu HTML.
3. Setelah itu Copy dan Paste salah satu kode HTML daftar isi di bawah ini. Jangan lupa ganti dulu http://ilsekomputer.blogspot.com dengan nama blog Anda.
4. dan yang terakhir "Klik Publish (Publikasikan)".

Oiya, Daftar isi yang saya bagikan ini ada 2 versi yaitu Daftar isi berdasarkan kategori/label dan Daftar isi Berdasarkan tanggal Publikasi, nantinya anda bisa memilih daftar isi dibawah ini yang sesuai dengan selera anda.  

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://ilsekomputer.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

2. Kode HTML untuk Daftar Isi Berdasarkan Tanggal Publikasi

<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://ilsekomputer.blogspot.com/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: 2px solid #000000; height: 400px; margin: auto; overflow: auto; padding: 4px; text-align: left; width: 100%;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://ilsekomputer.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Keterangan Tambahan
Anda juga bisa mengganti tulisan orange diatas (2px) dengan selera anda, Contoh; 2px diganti dengan 1px. Selain itu ada juga bisa mengedit - edit tulisan yang berwarna biru diatas dengan sesuka hati anda.
Update 9 September 2016

Usut punya usut ternyata trick diatas sudah tidak bisa digunakan lagi. Saya coba kode satu-persatu ternyata hasilnya Nol Besar. awalnya saya juga belum tahu penyebabnya. Setelah saya cek, mungkin karena penyimpanan kode js diserver sudah tidak ada. Ternyata tebak  aan saya benar. Ini hasil cek saya digoogle "The requested URL /files/mysitemap.js was not found on this server. That’s all we know" dan sekarang saya gantikan yang baru dengan berdasarkan label dan bulan dipubliskannya . Berikut kodenya :

Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Bulan di Publisikan

<script src="https://googledrive.com/host/0B-L9a2eFlJk4MjFxczNBUmlvSDg/sitmap.js"></script><script src="http://ilsekomputer.blogspot.co.id/feeds/posts/default/?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label


<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/0B2ww3WS8P1MJM2JkeHlyUVp4dnc/" type="text/javascript"></script>
<script src="http://ilsekomputer.blogspot.co.id/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Source Code :http://www.blogbamz.com/2014/09/cara-membuat-sitemap.html & https://www.buatblog.net/2015/03/cara-membuat-sitemap.html

Demikianlah trik tentang Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label/Katergori, Semoga bisa bermanfaat bagi anda, jika ada yang belum jelas silahkan ditanyakan melalui kotak komentar.