Cara Menambahkan Widget Sitemap di Blog ala Arlina Design

Cara Menambahkan Widget Sitemap di Blog ala Arlina Design - Sitemap atau yang biasa di kenal daftar isi adalah widget yang membuat blog anda semakin tampak rapih dan seperti profesional , sudah banyak tutorial di luar sanah sebenarnya , namun pada pertemuan kali ini saya akan membagikan cara menambah sitemap ala mbak arlina .
Berbicara soal arlina design , siapa yang tidak mengenal dia? arlina adalah seseorang yang pandai coding dan pembuat template . jadi nama arlina sudah tidak asing lagi bagi para blogger , jika anda penasaran dengan siapa itu arlna design , anda bisa klik tautan berikut [Arlina Design]

Oke kita kembali ke topik , sekarang simak baik-baik ya

Buka Blogger > Pilih Blog > Laman
Buatlah sebuah laman baru , dan pada bagian HTML anda paste kode berikut

<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/sitemap-content.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>

Publikasi laman anda
Tahap berikutnya buka Tempate > Edit HTML
Cari kode </style>
Agar mempercepat pencarian kode </style> anda tekan CTRL + F
Copy-Paste kode di bawah ini tepat sebelum kode</style>

/* CSS Full Sitemap */
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;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;}
.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:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;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:#e76e66;}
#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;}
td.toc-entry-col2 {background:#fafafa;}