Cara Menciptakan Sitemap Blogger Super Keren

Daftar isi / sitemap blog berdasarkan label yaitu daftar judul artikel blog beserta tautannya yang dikelompokkan berdasarkan label atau kategori. Sehingga akan menciptakan tampilannya terlihat lebih rapi dan keren tentunya. Selain itu juga, sanggup memudahkan pengguna untuk menentukan dan mencari apa yang mereka inginkan. Daftar isi ini sanggup dipasang sebagai widget blog. Tapi, kebanyakan blogger lebih menentukan untuk memasang daftar isi ini pada halaman statis (Laman). Alasannya, semoga terlihat lebih profesional.

Berikut ini cara menciptakan daftar isi berdasarkan label pada halaman statis Blog:

1. Masuk ke Blogger, kemudian pilih Blog yang ingin Anda buatkan halaman daftar isi.
2. Pada hidangan Blogger sebelah kiri pilih Laman, kemudian klik Laman baru.
3. Buatlah judul pada laman, kemudian salin isyarat script di bawah, kemudian pastekan sebagai isi laman.

Silahkan lihat demo untuk memastikan, apakah isyarat tersebut benar adanya??? 

<div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;"></div><script src="https://cdn.rawgit.com/Librayanada/vip/master/daftar-isi.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><br />
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1 {display:none;} #HTML3 {visibility:hidden;} /* CSS Full Sitemap */ #bp_toc{background:#f4f5f6;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:#7f8c8d;font-size:1.6rem;text-transform:uppercase;font-weight:700;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;} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);} #bp_toc tr:nth-child(1) a {color:#666;} #bp_toc td.toc-header-col1{background-color:#fff;} #bp_toc td.toc-header-col2{background-color:#fff;} #bp_toc td.toc-header-col3{background-color:#fff;} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700} #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8} #bp_toc td.toc-entry-col2{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8} #bp_toc td.toc-entry-col3{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8} #bp_toc td a{color:#666;} .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:12px; text-decoration:none;color:#aaa;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;} </style>

4. Jangan lupa ganti url nya dengan url blog milik Anda. Dan pribadi publikasikan pada mode HTML.  Silahkan lihat, daftar isi blog manis sudah jadi.

Catatan:

Setelah di publikasikan, sebaiknya jangan di edit atau di utak Atik lagi. Jika terpaksa ingin melaksanakan pengeditan, usahakan pribadi masuk pada mode HTML. Jika masuk melalui mode Compose >> mode HTML >> Edit >> Perbarui = RUSAK