Cara Membuat Halaman [Sitemap] di Blogger Mudah

Cara Membuat Halaman [Sitemap] di Blogger Mudah
Daftar Isi Artikel
Pada postingan kali ini, mimin Aunur.com membagikan tutorial mudah tentang bagaimana cara membuat halaman daftar isi (sitemap) di Blogger dengan dukungan cdn Statically.io menambah kecepatan render css gambar, html, dan jacascript saat memuat loading halaman sitemap tersebut.

Perlu kamu ketahui sitemap adalah daftar isi yang memuat seluruh daftar postingan pada blog dengan menampilkan bagian kategori. Dalam dunia Internet sitemap sendiri dibagi menjadi dua jenis, yakni XML dan HTML. Untuk sitemap sitemap.xml digunakan untuk keperluan khusus mengindeks postingan di mesin pencari, sedangkan sitemap.html berfungsi untuk memudahkan pengunjung melihat seluruh daftar isi postingan pada web blog kita.

Cara Membuat Halaman [Sitemap] di Blogger Mudah

Untuk panduan cara membuat halaman sitemap di Blogger, tentunya ini termasuk Sitemap tipe HTML karena termasuk dalam bentuk halaman berbeda dengan sitemap jenis XML yang hanya berbentuk teks saja.

Berikut ini kita akan memasang sitemap statis di Blogger dengan tampilan yang cukup menarik sehingga rapi dan enak dipandang untuk pengunjung blog kamu. Untuk langkah-langkah memasangnya cukup mudah. Kamu hanya perlu mengikuti tutorial dibawah ini.

Tutorial Cara Membuat Halaman Sitemap di Blogger 2020


1. Pertama-tama pergi ke Dashboard Blogger > Halaman.

2. Tambah Halaman Baru dan isi judul Sitemap lalu masukkan kode dibawah. Pastikan sudah dalam mode HTML.

Cara Memasang Halaman [Sitemap] Keren di Blogger Terbaru

<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: #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;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.statically.io/gh/onhaxid/sitemap-aunur/047076b1/sitemap-aunur.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Silahkan kamu ubah sendiri pada bagian warna, gunakan kode warna HTML untuk mengubah warna pada bagian #2D96DF dan seterusnya. Selamat mencoba!

3. Klik simpan perubahan. Sekarang halaman sitemap sudah berhasil. Seperti inilah tampilannya.

Sitemap di Blogger Keren Terbaru
Cara Memasang Halaman [Sitemap] Keren di Blogger Terbaru

Akhir Kata

Terima kasih teman-teman telah mengunjungi Aunur dan telah membaca artikel ini. Silahkan terus kunjungi blog ini untuk lebih banyak artikel dan informasi baru lainnya. Semoga harimu indah dan menyenangkan. See You! ^^
Conk Khalis
Oleh Conk Khalis

Hai, Saya Nur Khalis asli Sumenep. Seorang Content Creator dan Editor yang suka Desain dan main blog sebagai hobi mulai 2014 - sekarang. ^^

Langganan

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>