Membuat Halaman Sitemap Sederhana Tapi Keren Untuk Blogger (Blogspot)

Pada kesempatan kali ini Saya akan kembali berbagi sebuah tutorial sederhana mengenai Cara Membuat Halaman Sitemap Sederhana Untuk Blogger (Blogspot). Sitemap atau peta situs adalah daftar isi dari sebuah situs yang berbasis file XML, Sitemap sering disebut juga dengan Peta Situs. Dengan adanya Sitemap memudahkan pengenalan halaman-halaman atau konten-konten situs anda kepada search engine.
Sitemap tidak berfungsi hanya untuk blogspot saja, tetapi semua situs atau website membutuhkan sitemap seperti wordpress, joomla, blogdetik, dan lain sebagainya.

Manfaat Dari Sitemap :

Sitemap atau peta situs dapat menginformasikan url-url konten yang berada di blog kita agar lebihmudah di crawl dan dijelajahi oleh robot mesin pencari atau sering disebut dengan search engine sehingga bisa lebih cepat terindeks. Tentunya kecepatan terindeks sangat penting terutama bagi blog yang berisi konten berita terkini atau konten mengenai permasalahan terkini.

Seperti halnya pada blog Saya ini, ada sebuah halaman statis yang merupakan Sitemap atau peta situs dari blog Saya ini. Jika Sobat Blogger lihat didalam halaman Sitemap atau peta situs tersebut terdapat daftar isi (list) dari blog Saya ini. Dan daftar isi (list) tersebut secara otomatis sudah dikelompokkan berdasarkan tag atau pun label dari masing-masing artikel yang ada di blog Saya ini. Dan berikut ini merupakan tampilan dari halaman Sitemap atau petas situs di blog Saya ini :

Membuat Halaman Sitemap Sederhana Tapi Keren Untuk Blogger (Blogspot)

Atau silhakan klik link berikut ini untuk melihat tampilannya secara nyata :

https://blognyarifaisugiono.blogspot.com/p/sitemap.html

Cara Membuat Halaman Sitemap Sederhana Tapi Keren Untuk Blogger (Blogspot)

Untuk dapat membuat halaman Sitemap atau petas situs seperti pada gambar di atas, berikut ini cara atau pun langkah-langkahnya :

1. Login ke Dashboard Blogger;

2. Klik pada tombol Halaman, kemudian klik lagi pada tombol +Halaman Baru, seperti pada gambar di bawah ini :

3. Beri nama atau judul halaman baru tersebut, bebas (Sitemap, Daftar Isi, atau lainnya), kemudian ubah tampilan edit dari halaman baru tadi menjadi Tampilan HTML, perhatikan gambar di bawah ini :

4. Silahkan copy/salin script di bawah ini dan paste/tempel ke dalam halaman baru tadi :

<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>
<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: ' – <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>

5. Jika sudah, silahkan simpan dan lihat hasilnya.

Demikian mengenai Membuat Halaman Sitemap Sederhana Tapi Keren Untuk Blogger (Blogspot), mudah-mudahan apa yang sudah Saya sampaikan pada kesempatan kali ini bisa bermanfaat untuk kita semuanya. Sekian, terimakasih, dan selamat mencoba.

Salam Belajar.