Membuat Daftar Isi/Sitemap yang Responsive
Membuat Daftar Isi/Sitemap yang Responsive

Blog Ardhana - Selamat datang di Bocahpedia, pada kesempatan kali ini saya 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&amp;max-results=9999&amp;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&amp;max-results=9999&amp;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 Ardhana ini. Klik disini

Demikian artikel yang saya buat, mengenai cara membuat daftar isi/sitemap yang responsive. Semoga bermanfaat. Jangan lupa share artikel ini, agar kedepan Bocahpedia menjadi lebih baik dan membagikan berbagai tutorial yang menarik. Terimakasih.

Related Posts

Load comments

Comments