Membuat Halaman Khusus Untuk Daftar Isi Blog
Hallo Sahabat semua, kali ini aku mau kasih 1 widget yang wajib di miliki teman-teman blogger setanah air.
Kenapa aku sebut Wajib ? Menurut google, Halaman Daftar isi justru besar lengan berkuasa terhadap kualitas blog yang kau buat.
Dengan adanya Halaman Khusus Daftar isi Blog, Secara otomatis semua visitor akan mencari tahu apa saja isi dari blog yang kau buat.
Kali ini Kang Wira hanya akan menawarkan script Daftar Isi yang Tampilannya cukup unik.
Selain Unik, Script Daftar isi Blog yang akan Kang Wira berikan kali ini ternyata sudah Responsif loh.
Makara kita tidak perlu repot-repot dalam mengedit widget tersebut biar tampil lebih baik pada ketika visitor melihat halaman daftar isi yang kau buat memakai Smartphone.
Untuk melihat Demo Tampilan dari Halaman Daftar isi yang unik kali ini, kau sanggup klik tombol Demo dibawah ini.
Apabila kau berminat untuk menciptakan halaman Daftar isi Blog menyerupai tumpuan pada halaman Demo diatas, kau cukup menciptakan halaman gres dengan judul DAFTAR ISI, kemudian salin Kode HTML yang aku berikan dibawah ini dan tempelkan isyarat tersebut pada tag HTML (jangan di Compose).
Simpan Laman yang kau buat Lalu lihat hasilnya.
Jika kau merasa kesulitan ketika mencoba untuk merubah warna tampilan Daftar isi yang ada pada isyarat CSS tersebut?
Silahkan kau tinggalkan komentar dibawah ini dan jangan lupa untuk berlangganan artikel blog ini dengan mengisi alamat email kau pada kolom berlangganan gratis dibawah ini.
Kenapa aku sebut Wajib ? Menurut google, Halaman Daftar isi justru besar lengan berkuasa terhadap kualitas blog yang kau buat.
Dengan adanya Halaman Khusus Daftar isi Blog, Secara otomatis semua visitor akan mencari tahu apa saja isi dari blog yang kau buat.
Kali ini Kang Wira hanya akan menawarkan script Daftar Isi yang Tampilannya cukup unik.
Selain Unik, Script Daftar isi Blog yang akan Kang Wira berikan kali ini ternyata sudah Responsif loh.
Makara kita tidak perlu repot-repot dalam mengedit widget tersebut biar tampil lebih baik pada ketika visitor melihat halaman daftar isi yang kau buat memakai Smartphone.
Untuk melihat Demo Tampilan dari Halaman Daftar isi yang unik kali ini, kau sanggup klik tombol Demo dibawah ini.
D E M O
Berminat Pasang Halaman ini?
Apabila kau berminat untuk menciptakan halaman Daftar isi Blog menyerupai tumpuan pada halaman Demo diatas, kau cukup menciptakan halaman gres dengan judul DAFTAR ISI, kemudian salin Kode HTML yang aku berikan dibawah ini dan tempelkan isyarat 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&alt=json-in-script&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 aku sanggup dari Blog Mas Tamvan, dan sedikit aku edit mengenai warna dan CSS yang ada.
Simpan Laman yang kau buat Lalu lihat hasilnya.
Jika kau merasa kesulitan ketika mencoba untuk merubah warna tampilan Daftar isi yang ada pada isyarat CSS tersebut?
Silahkan kau tinggalkan komentar dibawah ini dan jangan lupa untuk berlangganan artikel blog ini dengan mengisi alamat email kau pada kolom berlangganan gratis dibawah ini.
Post a Comment for "Membuat Halaman Khusus Untuk Daftar Isi Blog"