Cara Membuat Sitemap Responsive dan Fast Loading di Blogger

Bang Feri Blog - Sebelumnya kita telah membaha artikel tentang cara membuat daftar isi di postingan blog (table of content). Nah pada artikel kali ini saya akan berbagi tentang cara membuat daftar isi blog atau tepatnya cara membuat halaman sitemap di bloger.

Nah, tapi sebelum lanjut baiknya sobat tahu tersebut dahulu apa sih yang dimaksud dengan halaman sitemap atau halaman daftar di situ. oleh karena itu berikut ini penjelasan tentang site map.

Apa sih Sitemap itu?

Sitemap atau peta situs adalah salah satu alat bantu berupa daftar isi atau daftar kumpulan artikel yang ada di dalam sebuah website tertentu.

Sitemap ini biasanya digunakan oleh para webmaster (Google Search Console) untuk mempermudah dalam pengenalan website/blog. Dengan begitu, mesin google akan dengan mudah menjelajahi dan meraih halaman-halaman yang ada di dalam website tersebut.

Serta sitemap yang keren itu adalah sitemap yang memiliki tampilan Responsive, fast loading dan SEO Friendly.

Perbedaan Sitemap dengan Daftar Isi Artikel

Jika dilihat dari bentuk isi, sitemap menampilkan susunan atau daftar artikel-artikel yang ada di blog itu di sendiri yang disajikan sesuai label postigan yang ada secara automatis, sedangkan daftar isi artikel hanya menampilkan daftar pembahasan yang ada di dalam artikel tersebut. Contohnya seperti daftar isi diatas ini.

Nah, mungkin seperti itu penjelasan sitemap dan perbedaan sitemap dengan daftar isi artikel. Selanjutnya kita melangkah ke cara pembuatan sitemap yang responsif dan fast loading di blogger.

Bagaimana cara membuat sitemap yang responsive dan fast loading di blogger?

Cara Membuat Sitemap Responsif dan Fast Loading untuk Blogger

Untuk membuat sitemap yang responsif dan fast loading di blogger sangatlah mudah oleh karena itu silahkan sobat ikuti langkah-langkah berikut ini dengan teliti.

#1. Login ke Blogger, kemudian buka menu Halaman kemudian klik tombol Buat Halaman Baru. Nama halaman bisa diisi sesuai keinginan atau  "Sitemap".

#2. Ganti metode penulisan konten dari Compose ke HTML, kemudian tempelkan script berikut ini di kolom konten nya.

<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

#4. Setelah itu, untuk membuat sitemap menjadi responsive dan lebih keren, selanjutnya kita tambahkan resource sitemap.css berikut ini tepat dibawahnya:

<link rel="stylesheet" href="https://rawcdn.githack.com/pixwebsite/css/545b4f6b18ef179055c57b4c54dbfdf1219d1d24/Sitemap.css" />

#5. Terakhir klik posting atau publikasikan halaman.

Nah sekarang halaman sitemap responsive dan fast loading untuk blog sobat telah selesai dibuat. Untuk melihat hasilnya sobat bisa mengklik kata "Lihat" yang berada tepat di bawah judul halam sitemap.

Share :