Update Terbaru, 24 Januari 2019
Sitemap satu label adalah daftar isi blog yang menyantumkan postingan atau artikel hanya satu label saja, seperti yang kita ketahui sitemap akan menampilkan seluruh artikel berdasarkan label. Namun ada beberapa orang yang ingin menampilkan sitemap hanya per kategori atau per label saja.
Pada kesempatan yang ceria ini saya akan memberikan tutorial membuat sitemap satu label yang super keren untuk blog blogger atau blogspot. Ini sebagai janji saya kepada pembaca blog Pena Indigo yang menanyakan tentang cara membuat sitemap satu label saja.
Berikut cuplikan komentarnya:
Atau jika anda ingin koleksi sitemap keren dan otomatis di blog silahkan (baca: Cara Membuat Sitemap SEO Keren di Blogspot) pada tutorial tersebut akan menampilkan sitemap secara keseluruhan (menampilkan sitemap berdasarkan label).
Atau jika kebetulan anda menggunakan platform wordpress bisa menggunakan tutorial yang sudah saya buat silahkan baca: Cara Membuat Daftar Isi di Blog WordPress dengan Mudah
Daftar Isi:
Sitemap Satu Label Keren di Blogger
Sitemap satu ini sudah memiliki fasilitas fast loading dan responsive jadi dapat diakses dari berbagai perangkat. Agar lebih jelas berikut tampilannya:
Kodenya dibawah ini:
<style type="text/css">
#penaindigocom{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="penaindigocom">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/pi-project@ce599c1082b28f589ee0582485dc661a3f9ba15c/sitemapsatulabel.js">
</script>
<judule>Blogging</judule>
<ol>
<script src="/feeds/posts/default/-/Blogger?orderby=published&alt=json-in-script&callback=startpost&max-results=999">
</script>
</ol>
</div>
Keterangan:
- Blogging: Judul Label
- Blogger: Nama Label
Memasang Sitemap dengan Beberapa Label Pilihan
Anda juga bisa menambahkan beberapa label pilihan, sebagai contoh anda ingin menampilkan 2 label atau 3 label saja. Maka cukup menambahkan kode berikut sebelum kode <div>
<judule>Blogging</judule>
<ol>
<script src="/feeds/posts/default/-/Blogger?orderby=published&alt=json-in-script&callback=startpost&max-results=999">
</script>
</ol>Jadi jika dipasang akan seperti ini:
<style type="text/css">
#penaindigocom{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="penaindigocom">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/pi-project@ce599c1082b28f589ee0582485dc661a3f9ba15c/sitemapsatulabel.js">
</script>
<judule>Tips dan Trik</judule>
<ol>
<script src="/feeds/posts/default/-/Tips dan Trik?orderby=published&alt=json-in-script&callback=startpost&max-results=999">
</script>
</ol>
<judule>Tools</judule>
<ol>
<script src="/feeds/posts/default/-/Tools?orderby=published&alt=json-in-script&callback=startpost&max-results=999">
</script>
</ol>
</div>
Maka hasilnya seperti gambar dibawah ini:
Cara Memasang Sitemap Per Label (Kategori) di Blogger
- Silahkan login akun Blogger.
- Kemudian pilih menu Pages lalu pilih New page
- Kemudian pilih mode HTML
- Silahkan isi judul page dengan Sitemap atau Daftar isi
- Lalu masukkan kode diatas pada kolom HTML
- Terakhir klik Publish dan lihat hasilnya.
Demikian penjelasan tentang sitemap satu label, semoga dapat bermanfaat dan menjadi pilihan sitemap yang sesuai dengan keinginan anda.
Jangan lupa juga baca artikel menarik lainnya sesuai dengan kebutuhan anda. Atau jika ingin request tutorial silahkan kirim pesan melalui halaman kontak yang sudah tersedia.
Gak bisa ganti Warna Judul Label nya ya Gan? Kalo bisa lebih bagus nih ^-^
Bisa gan, sangat mudah sekali untuk mengganti warna judul maupun background sitemap satu label ini. Silahkan edit dibagian ini judule{color:#FFF.
cuma bisa index maksimal cuma 100 post aja gan ,cara biar bisa lebih gimana
Seharusnya bisa lebih dari 100 Mas, perintah di script sampai dengan 999.
Silahkan uji coba bagian ini ya max-results=999
Luar biasa, ilmunya sangat bermanfaat
Bedanya nama label sama judul label label apa? Trus kalau labelnya lebih dari satu kata apakah tinggl dituliskan saja apa adanya dengan spasi? Mohon dijawab ya mas. Saya masih newbie ini.
Judul label bisa diubah sesuai keinginan, tetapi nama label sudah ditentukan pada blog. Cara mendapatkan nama lebel silahkan klik link label yang diinginkan kemudian copy nama label pada URL kemudian paste pada script yang sudah saya sediakan diatas.
Jangan dipermasalahkan satu kata atau lebih dari satu kata, cukup klik label nanti namanya tersedia pada URL. Karena tidak semuanya bisa dengan menambahkan spasi.
Semoga dapat membantu.
Cara menyembunyikan numbering nya gimana masmas?
Silahkan tambahkan kode
list-style-type: none;padaol lisehingga menjadi seperti ini:ol li{border-bottom: #ddd 1px dotted;margin-right:5px;padding:3px;list-style-type: none;}Mohon bantuannya gan, kalo mau diisi thumbnail gmn caranya gan?
Kalau untuk penambahan perlu banyak edit, jadi silahkan cari sendiri ya.
selalu suka lihat informasi di blog ini terimakasih pena indigo
Sama-sama semoga bermanfaat.
thanks bang dengan ini dapat membantu saya dalam membuat sitemapt perlabel di blog saya
Makasih atas artikelnya gan, membuat laman per label ini ahirnya saya temukan di blog ini. ijin langsung pakai gan.
kak, boleh minta file JavaScript nya ?
buat jaga-jaga sambil dipelajari..
Itu sudah ada tinggal diextract terus diambil.
numbering nya bisa di ubah dari atas ke bawah bang?
yang atas nomornya yang paling besar gitu..
Min ini urutan isi labelnya bisa menurut adjad nya ngga? Soalnya ini kucoba urutannya berdasarkan waktu upload.
Karena bertujuan agar artikel terbaru bisa dibaca oleh pengunjung.
kalau mau diurutkan menurut abjad, apa yang harus diubah min?
Mas Zain, saya mau nanya
1. bisa kaga link yang ada Sitemap Satu Labelnya jika di klik kebuka di Tab baru?
2. Bisa kaga di tambahkan fitur search atau semacamnya untuk mempermudah pengunjung? karena saya memiliki banyak sekali judul dalam satu label, jadi mesti scrol kebawah dan dan harus di baca satu per satu. mohon bantuan mas terimakasih
Bisa namun butuh edit banyak mas, untuk itu kami tidak bisa membantu namun saya perbolehkan untuk edit kode sepuasnya.
numbering nya bisa di ubah dari atas ke bawah bang?
jadi kalau kita buta postingan baru, postingan sebelumnya gak turun ke nomor bawah
Harus ubah scriptnya dlu dan itu ribet banget.
Tanya dong gan, tolong dibales ya.
Kalo pengen membuat sitemap/daftar isi Blog menggunakan 1 label tertentu, tapi otomatis daftar isinya berurutan A-Z bisa gak?
oke gan makasih banyak