Pada kesempatan kali ini saya akan men-share tutorial untuk membuat sebuah sitemap blogger, yang tentunya sangat keren. Dengan adanya sitemap ini di blog kalian, maka pengunjung akan lebih mudah mengexplore blog kalian. Sitemap ini sendiri bertujuan atau berfungsi untuk mempermudah visitor atau pengunjung untuk melihat isi dari blog kalian. Yang pasti, tanpa membuka per page dari blog kalian, pengunjung bisa melihat daftar isi blog.
Sitemap atau table daftar isi ini sangat amat dibutuhkan dalam sebuah blog, karna reader atau pembaca blog lebih suka dengan adanya daftar isi ini, seperti yang tadi saya bilang, ini akan mempermudah mereka untuk membaca isi blog kita. Beberapa kelebihan yang dimiliki oleh sitemap ini adalah :
- Pengunjung atau pembaca dapat mengetahui seluruh isi dari blog, tentunya hanya berupa judul, tanggal dan label saja, tidak termasuk isi dari artikel.
- Sitemap sendiri dapat menjadi petunjuk untuk pengunjung, agar mereka bisa sampe ke artikel kita.
- Sitemap ini tidak memakan banyak waktu untuk loading nya.
- Dengan menggunakan sitemap di blog kalian atau di website, maka blog ataupun website kalian akan terlihat lebih profesional.
Penjelasan nya udah panjang, dan pastinya sitemap ini wajib ada di blog atau website kalian. Oke langsung aja ke cara pembuatan nya.
Langkah Pertama : Login ke Blogger menggunakan akun blog kalian dan kemudian masuk ke dashboard.
Langkah Kedua : Sudah di dashboard, seakrang klik Laman kemudian buat laman baru.
Langkah Ketiga : Dari compose ganti menjadi HTML, dan copy kode berikut lalu paste kan di sana.
<style scoped="" type="text/css">
#bp_toc {background:#008CDB;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';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:'Trebuchet MS';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;}
#comments {display:none;}
</style>
<div id="bp_toc" style="max-height: 1200px; overflow-x: auto; overflow: scroll;">
</div>
<script src="https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
Untuk kostumisasi, kalian bisa merubah ukuran Max-height:1200px sesuai dengan keinginan. selain itu kalian juga bisa merubah background nya dengan warna yang kalian suka, cara nya kalian hanya merubah kode warna background:#008CDB; dengan kode warna HTML. Langkah terakhir kalian hanya perlu mempublikasikan laman tersebut, dan taraaa kalian sudah memiliki laman sitemap di blog kalian.
EmoticonEmoticon