Membuat Daftar Isi/Sitemap yang Responsive
Snippet
iNDZGN - Pada kesempatan kali ini admin akan berbagi tutorial cara membuat daftar isi/sitemap yang responsive. Sitemap itu sangat berpengaruh untuk pengindex-an blog. Jadi, untuk kamu yang belum tahu, silahkan ikuti tutorial yang akan saya jelaskan di bawah ini.
Keuntungan menggunakan sitemap ini, blog kamu tampil lebih profesional dari sebelumnya. Selain itu, visitor atau pengunjung blog kamu bisa melihat keseluruhan artikel yang ada pada blog kamu dengan mudah. Dan pasti, itu akan menjadi nilai plus untuk blog jika visitor/pengunjung membuka artikel yang ada pada sitemap ini.
Now, let's try. Cara penerapannya pun sangat mudah, dan silahkan ikuti beberapa langkah-langkah di bawah ini:
1. Buka Blogger>Laman>Buat laman baru>Terapkan kode di bawah ini pada tab HTML
<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>Kemudian publikasikan halaman yang sudah kamu buat tadi
2. Klik Template>Buka edit template> Terapkan kode di bawah ini tepat sebelum </style> atau ]]></b:skin>
/* 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;}Tentukan penggunaan font dan warna sesuai template blog kamu. dan kemudian simpan template
Jika blog kamu sudah terdapat ratusan artikel yang dipublikasi, ada baiknya kamu membatasi tinggi halaman dengan style pada kode pertama tadi. Misal seperti di bawah ini
<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</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>
Silahkan, kamu bisa menentukan tinggi max-height di atas sesuai keinginan kamu, dan yang pasti sesuai template blog kamu. Untuk contoh hasil sitemap, kamu bisa melihat sitemap blog iNDZGN ini. Klik disini
Demikian artikel yang saya buat, mengenai Membuat Daftar Isi/Sitemap yang Responsive. Semoga bermanfaat. Jangan lupa share artikel ini, agar kedepan iNDZGN menjadi lebih baik dan membagikan berbagai tutorial yang menarik. Terimakasih.
