Halaman peta situs atau yang dalam bahasa inggris disebut dengan sitemap adalah sebuah halaman yang berisi peta atau jalur menuju semua artikel yang ada pada sebuah blog. Fungsi peta situs mirip dengan daftar isi pada buku. Dengan peta situs diharapkan pengunjung dapat menemukan dan mengakses seluruh artikel yang ada pada blog.
Untuk membuat sebuah halaman peta situs kita menggunakan format halaman statis atau static page seperti saat membuat halaman kontak kami yang dijelaskan pada artikel selanjutnya. Membuat halaman situs yang dimaksud disini adalah membuat halaman yang secara otomatis bisa menampilkan keseluruhan artikel pada blog. Jadi kita tidak perlu memasukkan judul artikel satu persatu ke dalam halaman peta situs.
Halaman peta situs atau sitemap berfungsi untuk mempermudah navigasi didalam blog. Dengan halaman peta situs diharapkan pengunjung tidak “tersesat” ketika mengunjungi blog kita karena sudah memegang “peta”. Halaman peta situs juga berfungsi mempermudah mesin pencari saat mengindeks artikel yang ada pada suatu blog, jadi peta situs juga berfungsi mengarahkan crawler dari mesin pencari agar tidak “tersesat” pada blog kita.
Cara membuat halaman peta situs pada blogger atau blogspot sebenarnya sangat mudah. Kita cukup membuat script yang menampilkan semua judul artikel secara otomatis memanfaatkan fitur umpan artikel (feed) yang tersedia. Script tersebut kita buat dalam format javascript dengan beberapa kode CSS untuk mempercatik tampilan.
Berikut ini cara membuat halaman peta situs pada blogger/ blogspot:
- Buat halaman baru dengan cara klik menu Laman lalu klik Laman Baru.
- Beri judul halaman baru tersebut dengan nama Peta Situs.
- Klik tab HTML untuk mengubah mode teks editor.
- Taruh kode berikut ini pada isi halaman.
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
margin-left: 20px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<br />
<div id="toc">
<script src="//googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="//www.nulis-ilmu.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>Note : Ganti alamat //www.nulis-ilmu.blogspot.com dengan nama blog anda.
- Setelah selesai langsung saja klik Publikasikan.
- Halaman Peta situs akan dipublikasikan dengan alamat URL p/peta-situs.html.
- Silahkan tambahkan link menuju halaman peta situs tersebut pada menu.
- Berikut ini contoh tampilan halaman peta situs pada blog nulis-ilmu ini:
- Saat kita buka halaman peta situs ini memang agak sedikit lambat dikarenakan proses mengindeks semua halaman yang ada pada blog membutuhkan waktu yang relatif lama tergantung dari banyaknya artikel dan kecepatan jaringan internet yang kita pakai.
Demikian cara membuat halaman peta situs pada blogger/blogspot. Untuk menyesuaikan tampilan pada blog masing-masing silahkan edit saja kode CSS yang ada didalam halaman peta situs tadi, atur padding, margin, warna dan sebagainya menurut selera masing-masing.
