Membuat Daftar Isi Blog dengan Cepat dan Mudah

Membuat Daftar Isi Blog dengan Cepat dan Mudah - Apakah kamu masih mencari-cari cara untuk membuat daftar isi dari blog kamu, atau yang biasa para blogger menyebutnya sitemap? atau sudah memiliki daftar isi blog tapi belum sesuai dengan keinginan? Atau mungkin saja keinginan kamu sama seperti keinginan Wahyu IWe?

Banyak sekali postingan yang membahas tentang cara memasang daftar isi blog, ada banyak bermacam-macam cara dan model, dan semua itu tergantung dari selera masing-masing, karena selera saya suka yang simpel maka kali ini saya akan berbagi cara membuat daftar isi blog yang simpel saja namun tidak mengurangi kesan modern.

Beberapa waktu lalu saya pernah menggunakan daftar isi blog berdasarkan label, namun bagi saya merasa kurang cocok, alasannya banyak judul post yang berulang dan tidak berurut sesuai tanggal postingan.

Jadi kali ini saya akan berbagi cara membuat daftar isi blog yang simpel dan terdapat nomor urut postingan serta otomatis sudah ada scroll agar halaman yang terbuka tidak terlalu panjang.

Tentunya cara yang akan saya bagikan cukup mudah, karena kode yang saya bagikan tidak akan membuat kamu kebingungan, dijamin tanpa harus merubah apapun.

Yang perlu kamu lakukan hanya menambahkan halaman statis dan meletakkan kodenya disana, selanjutnya tinggal kamu lihat hasilnya.

Apa keuntungan memasang daftar isi (sitemap) pada blog?

Setiap blog rata-rata memiliki daftar isi/sitemap dan bisa dipastikan semua memiliki daftar isi, para blogger menyertakan sitemap tersebut bukan karena tanpa alasan atau hanya ikut-ikutan saja.

Keuntungan yang bisa kamu dapatkan jika blog kamu memiliki sitemap akan menambah kebetahan pengunjung blog untuk berlama-lama di blog kamu, karena jika blog kamu memiliki content yang menarik maka pengunjung akan penasaran dengan content-content kamu yang lain, maka dengan rasa penasaran itu mereka akan melihat-lihat isi dari blog kamu melalui sitemap/daftar isi blog.

Oke kita lanjut ke tekape...

Cara membuat daftar isi (sitemap) blog dengan cepat dan mudah:

1. Masuk ke akun blogger kamu

2. Copy dulu kode berikut ini

<div style="overflow: auto; width: 610px; height: 1000px; padding: 10px; border: 0px solid #eee;">

<div id="bp_toc">
Please wait....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments,#Label1,#FollowByEmail1 {display:none;}
#HTML3 {visibility:hidden;}
/* CSS Full Sitemap */
#bp_toc {background:#16a085;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fff;font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
#bp_toc a{text-align:left;float:none;font-size:90%;padding:0}
</style>
</div>

 sourcecode by: Arlina design

3. Kembali ke akun blog dan pilih menu Laman dan Laman baru (lihat gambar)

 

4. Selanjutnya tulis judulnya (misal: Sitemap), sebelum kode di paste jangan lupa pilih mode HTML, selanjutnya paste kode tadi pada area no. 3 dan Publikasikan (ikuti sesuai nomor pada gambar)

5. Selesai, sekarang coba lihat hasilnya.

Gimana, cukup mudah bukan? kamu tidak perlu memasukkan alamat blog kamu dan tanpa harus mengganti kode-kode yang lainnya.

Sampai disini dulu postingan cara membuat daftar isi atau sitemap blog dengan cepat dan mudah, semoga bermanfaat!

Share this

Share on Facebook