Membuat Halaman Khusus Untuk Daftar Isi Blog

Hallo Sahabat semua, kali ini saya mau kasih 1 widget yang wajib di miliki teman-teman blogger setanah air.

Kenapa saya sebut Wajib ? Menurut google, Halaman Daftar isi justru berpengaruh terhadap kualitas blog yang kamu buat.

Dengan adanya Halaman Khusus Daftar isi Blog, Secara otomatis semua visitor akan mencari tahu apa saja isi dari blog yang kamu buat.

Kali ini Kang Wira hanya akan memberikan script Daftar Isi yang Tampilannya cukup unik.

Membuat Halaman Khusus Untuk Daftar Isi

Selain Unik, Script Daftar isi Blog yang akan Kang Wira berikan kali ini ternyata sudah Responsif loh.

Jadi kita tidak perlu repot-repot dalam mengedit widget tersebut agar tampil lebih baik pada saat visitor melihat halaman daftar isi yang kamu buat menggunakan Smartphone.

Untuk melihat Demo Tampilan dari Halaman Daftar isi yang unik kali ini, kamu bisa klik tombol Demo dibawah ini.

D E M O

Berminat Pasang Halaman ini?

Apabila kamu berminat untuk membuat halaman Daftar isi Blog seperti contoh pada halaman Demo diatas, kamu cukup membuat halaman baru dengan judul DAFTAR ISI, lalu salin Kode HTML yang saya berikan dibawah ini dan tempelkan kode tersebut pada tag HTML (jangan di Compose).

<div class='KangWira'>
<script src="https://rawgit.com/mastamvan/backup/master/sitemap.js"></script>
<script src="/feeds/posts/default?max-results=5000&amp;alt=json-in-script&amp;callback=mas_tamvan_Load"></script>
</div>
<style type='text/css'>.KangWira{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.KangWira a{color:black;}
.KangWira p .mas_tamvan_Label{background:#f38504;display:block;padding:12px;}
.KangWira ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#f2b976;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.KangWira ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#e47f08;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.KangWira ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.KangWira ol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.KangWira ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.mas_tamvan_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>

Script saya dapat dari Blog Mas Tamvan, dan sedikit saya edit mengenai warna dan CSS yang ada.

Simpan Laman yang kamu buat Lalu lihat hasilnya.

Jika kamu merasa kesulitan saat mencoba untuk merubah warna tampilan Daftar isi yang ada pada kode CSS tersebut?

Silahkan kamu tinggalkan komentar dibawah ini dan jangan lupa untuk berlangganan artikel blog ini dengan mengisi alamat email kamu pada kolom berlangganan gratis dibawah ini.