Membuat Sitemap Dengan Label Pilihan Responsive

Terkadang saya sebagai blogger pemula ingin membuat sebuah halaman sitemap atau peta situs yang memuat beberapa label saja. Sehingga label yang lain tidak perlu dimunculkan karena beberapa alasan yang kompleks. hehehe..


Karena itu saya membuat contekan pada artikel ini, siapa tau di suatu hari nanti saya butuh lagi. Kalau sobat butuh, ayo nyontek bareng..!!

Label ?

Perlu menjadi perhatian, bahwa sitemap ini hanya berfungsi kalau sobat memberi label kepada setiap postingan yang ingin didaftarkan pada halaman peta situs blog sobat IB.

Baca Juga: Apa yang dimaksud Label dan Bagaimana Membuat Label Untuk Postingan Blog ?

Menampilkan Sitemap dengan satu label

Berikut penampakkannya.

SASTRA

Dan berikut ini scriptnya,

<style type="text/css">
#ipitblog{background:#fff;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);}
judule{color:#FFF;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
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;}
ol{font-weight:normal;background:#fff;margin-left: 35px;}
ol li{border-bottom: #ddd 1px dotted;margin-right:5px;padding:3px}
</style>
<div id="ipitblog">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/pi-project@ce599c1082b28f589ee0582485dc661a3f9ba15c/sitemapsatulabel.js">
</script>
<judule>SASTRA</judule>
<ol>
<script src="/feeds/posts/default/-/SASTRA?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999">
</script>
</ol>
</div>

Keterangan Script:
SASTRA warna Biru judulnya, dan SASTRA warna merah adalah labelnya.

Bagaimana kalau ingin menampilkan sitemap dengan beberapa label ?

Nah, kalau ingin menampilkan sitemap dengan beberapa label, teman-teman bisa mengcopy script di atas beberapa kali sejumlah label yang teman-teman ingin tampilkan.

Oyah, cukup copy script dari <judule> sampai </ol> lalu pastekan di atas kode </div> yang paling bawah pada script tersebut. Kemudian jangan lupa untuk mengganti judul dan label yang mau ditampilkan.

Misalnya begini,

SASTRA

NIRWANA

Contoh di atas menggunakan 2 buah label yaitu SASTRA dan Nirwana. Perlu juga diketahui, bahwa penulisan label memang sangat berpengaruh antara penggunaan huruf besar dan huruf kecil. Jadi penulisan labelnya memang harus sama persis.

Dan apabila label yang digunakan terdiri dari dua kata, misalnya "Label Saya" maka ditulis "Label%20Saya".

Menurut beberapa mastah juga boleh menggunakan tanda "+" untuk mengganti spasi. Namun saya sangat menyarankan untuk menggunakan "%20" sebagai pengganti spasi pada penulisan code html.

Dimana meletakkan code script untuk membuat Sitemap ?

Okey ikuti langkah-langkah berikut

Pertama, masuk ke dashboard blogger. Cara paling ampuh dengan mengklik www.blogger.com,

Kedua, buat halaman baru,

Ketiga, ganti tempat penulisan dari mode Compose ke mode HTML,

Keempat, pastekan script diatas,

Kelima, Publish.

Pesan: Jangan mencoba melihat tampilan Sitemap yang baru dibuat dari mode Compose !!!
Karena anda tidak akan berhasil. Silahkan lihat dari pratinjau atau dari browser.

Demikianlah cara membuat halaman sitemap dengan label pilihan dan dengan tampilan sederhana. Cukup mudah kan kalo tinggal copy paste ?

Atau kalau sobat ingin model sitemap yang lain, silahkan memilih dari beberapa koleksi IB di artikel terkait di bawah postingan ini.

Lalu bagaimana meletakkannya di navigasi menu blog ?

Sepertinya kita akan membahas itu nanti, karena langkah-langkahnya agak panjang. Baik menggunakan widgate apalagi kalau pada template sobat mengatur navigasinya harus melalui edit tema.

Tapi percayalah, mudah kok melakukannya, hanya susah menjelaskannya.

Okkey, semoga contekan ini berguna. Kalau kegunaannya tidak maksimal silahkan sampaikan argumen sobat di komentar.