Tuesday, March 21, 2017

Membuat Halaman Khusus Untuk Daftar Isi Blog

Chat on Whatsapp

Hallo Sahabat semua, kali ini Kang Wira 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 hala.an 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).


Baca juga : Membuat Sitemap Berdasarkan Kategori Seperti Kang Wira


<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.

Previous
Next Post »

KASIH KOMENTAR DISINI

BLOGGER
DISQUS
Pilih System Komentar

2 comments

Remarkable! Its genuinely awesome piece of writing, I have got much clear idea concerning from this article.

Balas

Thank you very much for your compliments. What kind of ideas do you mean?

Balas