Cara Mudah Membuat Sitemap Menarik dan Responsive di Blogspot

Asalamualaikum Wr Wb.
Pada kesempatan kali ini saya kembali akan membawakan materi-materi penting untuk membangun dan mengembangkan sebuah blog, pada artikel saya yang ke 16 (enam belas) ini saya akan menjelaskan bagaimana Cara Mudah Membuat Sitemap Menarik dan Responsive di Blogspot.

Mohon maaf karena dari tanggal 4 Juni 2020, laptop saya mengalami masalah, jadi saya harus meliburkan dulu kegiatan menulis pada blog ini, tapi sekarang laptop saya sudah kembali normal, kurang lebih hampir 2 minggu saya membongkar pasang laptop ini.

Seperti biasa, sebelum saya lanjut, barangkali kamu ingin membaca tulisan-tulisan saya sebelumnya, silahkan klik pada judul yang ada di bawah ini :

Cara mendaftar Google Analytics dan memasangnya di blog
Cara Mendaftarkan blog di Google Search Console
Cara Mengaktifkan Meta Deskripsi di Blogspot
Cara setting robots.txt di blogspot

Pada pembahasan sitemap ini akan ada beberapa materi yang kita bahas, diantaranya :

Apa itu Sitemap
Apa itu Responsive
Kenapa harus ada Sitemap di blog
Cara membuat sitemap di blog
Cara Memasangnya Pada Tema Blog

Setelah kita mengenali point pembahasanya, mari sama-sama kita uraikan satu persatu dari apa yang saya tulis di atas.

Apa itu Sitemap
Sitemap atau sering di artikan sebagai daftar isi blog adalah sebuah halaman yang berisi seluruh postingan blog yang biasanya ditandai perlabel. Dengan memiliki sitemap ini maka pengunjung bisa dengan mudah memilih artikel sesuai label yang diinginkan tanpa tercampur dengan artikel-artikel lain.

Apa itu Responsive
Sengaja saya ingin membahas ini dulu takutnya kamu belum memahami istilah responsive yang saya maksud diatas.
Responsive kurang lebih artinya adalah sebuah halaman web yang selalu cocok dan rapih ketika tampil di berbagai ukuran layar perangkat, misalkan kamu membuka dengan komputer, laptop, tablet, android dan iphone. Halaman web tersebut bisa menyesuaikannya dan tampilanyapun tetap indah dan enak dipandang.

Kenapa Harus Ada Sitemap di Blog?
Saya yakin teman-teman menulis di blog untuk memberikan tutorial atau informasi yang bermanfaat untuk pembacanya, saya sebagai seorang penulis abal-abal di blog, senang rasanya jika tulisan saya bisa di baca dan memberikan manfaat untuk orang lain, seperti yang sudah saya singgung di awal, dengan adanya sitemap ini pengunjung blog akan dimudahkan saat dia ingin membaca tulisan-tulisan yang mereka inginkan berdasarkan label yang sudah kita tandai, jadi jika ditanya kenapa? maka jawabanya adalah kita memberikan kemudahan untuk para pembaca blog agar bisa mereka lebih mudah memilih artikel yang sesuai dengan yang mereka inginkan.

Cara Membuat Sitemap di Blogspot
Untuk cara membuat sitemapnya, silahkan kamu perhatikan tulisan saya di bawah ini :
Pastikan kalau kamu sudah login pada dashboard blogspotmu.
Buka menu Halaman yang ada di sebelah kanan dan pilih Halaman Baru, perhatikan gambar di bawah ini :

Setelah itu akan terbuka satu buah halaman seperti pada gambar di bawah ini :

Silahkan isi Title Halaman yang saya tandai dengan angka 1 (satu), lalu klik HTML seperti yang saya tandai dengan angka 2 (dua) pada gambar di atas.
Selanjutnya tampilan akan berubah seperti pada gambar di bawah ini :

Halaman tersebut jadi lebih lebar karena kita memindahkanya ke mode HTML yang artinya disini kita bisa menambahkan secript untuk ditampilkan pada halaman sitemap-mu, selanjutnya copy secript yang saya sediakan di bawah ini :


<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>

<br />
<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>

Secript diatas, silahkan paste pada halaman HTML yang tadi kamu buka, yang saya contohkan pada gambar di atas, sehingga halaman kosong tadi terisi seperti pada gambar di bawah ini :

Setelah di copy, silahkan kamu klik tombol Compose yang saya tandai dengan angka 2 (dua) pada gambar di atas, selanjutnya halaman sitemap tersebut akan berubah menjadi seperti pada gambar di bawah ini :

Seperti yang kita lihat di atas, setelah kamu klik tombol Compose maka secript yang tadi kita masukan akan hilang dan yang tampil hanya tulisan Memuat saja, jangan kaget ini tidak ada masalah apa-apa dan juga tidak ada yang salah.
Silahkan klik Publiskan untuk menyelesaikan tahapam pembuatan sitemap ini, perhatikan pada gambar di atas yang saya tunjuk dengan tanda panah.

Cara Memasangnya Pada Tema Blog
Setelah kita selesai membuat halaman Sitemap, sekarang kita akan memasangnya pada tema yang sedang kita gunakan, kebetulan saya menggunakan tema Viomagz, jika kamu menggunakan tema yang berbeda, silahkan sesuaikan sendiri.

Silahkan buka halaman Sitemap yang tadi sudah kamu buat, perhatikan gambar di bawah ini :

Silahkan copy link Sitemap yang tadi kamu buat, perhatikan yang saya tandai dengan panah pada gambar yang ada di atas.

Selanjutnya masuk ke menu Dashboard blogspot, dan pilih menu Tema lalu klik Edit HTML, perhatikan gambar di bawah ini :

Selanjutnya cari baris seperti pada gambar dibawah ini :

Silahkan masukan link yang tadi kamu copy pada href='DISINI' yang sudah saya tandai pada gambar di atas.
Setelah selesai silahkan klik Simpan Tema.

Kesimpulan
Sampai disini kamu sudah selesai membuat Sitemap untuk blogmu, sitemap ini akan meenjadikan blogmu semakin seo dan berkesempatan untuk di ACC saat mengajukan permohonan Adsense.

Penutup
Mungkin cukup sekian tulisan saya tentang Cara Mudah Membuat Sitemap Menarik dan Responsive di Blogspot, semoga apa yang saya tulis bisa bermanfaat.
Jika ada pertanyaan, silahkan tulis pada kolom komentar dengan baik dan sopan.