Cara Membuat Daftar Isi Blog Keren Valid HTML5 - Erend Elektronik

Cara Membuat Daftar Isi Blog Valid HTML5 - Bukan saja valid HTML5 tapi memang Daftar Isi Blog ini ringan dalam loading tidak memberatkan blog sobat. Cara pembuatanya-pun sangat simpel dan mudah.

Daftar Isi (Sitemap) Blog ini merupakan satu menu blog yang diharuskan ada oleh Google. Ini memungkinkan pengunjung blog untuk lebih mudah mengacak-acak isi blog kita. Daftar Isi Blog yang akan kita buat ini berdasarkan Label. 

Ikuti langkah berikut guna membuat Daftar Isi Blog Keren :
 1. Login Akun Blogger sobat.

 2.Klik Laman dan Buat Laman Baru

 3. Pastekan kode css dibawah pada kotak (HTML) bukan (Compose) Laman baru, buat judul Daftar Isi atau untuk judul terserah kehendak sobat. Kalau sudah yakin dan mantaf, tinggal publish. Klik kotak Perbarui.

Selamat berkreasi, Happy Blogging !

Update untuk saudara @Uchiha Uzuma :

<div style="border: 1px solid #eee; height: 750px; overflow: auto; padding: 10px; width: 580px;"> <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: #3498DB; 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{text-transform:uppercase;} .new{color:#FF5F00;font-weight:bold;font-style:italic;} .postname{font-weight:normal;background:#fff;margin-left: 35px;} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style><br /> <div id="toc"> <script src="http://yourjavascript.com/19011761625/scriptsitemapbaru.js" type="text/javascript"></script><br /> <script src="https://rapiserui.blogspot.com//feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div> </div>

Daftar Isi Keren Valid HTML versi blog ini 2019 :

<div class="daftarisirapiserui"> <script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script><br /> <script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=teknomia_Load"></script><br /> </div> <style>.daftarisirapiserui{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;} .daftarisirapiserui a{color:black;} .daftarisirapiserui p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;} .daftarisirapiserui ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;} user agent stylesheetli{display:list-item;} .daftarisirapiserui ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;} .daftarisirapiserui ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;} .daftarisirapiserui 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);} .daftarisirapiserui 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;} .teknomia_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;} </style>

Artikel Terkait