Cara Membuat Sitemap Blogspot Keren Terbaru 2020

Cara Membuat Sitemap Blogspot – Sitemap atau daftar isi blog adalah halaman yang berisi seluruh postingan blog yang biasanya dikemas dengan perlabel. Dengan memiliki sitemap blog maka pengunjung bisa dengan mudah mencari artikel yang diinginkan.

Sitemap yang akan saya bagikan kali ini memiliki fitur yang sangat komplit dan merupakan update terbaru support fitur HTTPS Blogger custom domain (Baca: Cara Memasang HTTPS (SSL) di Blogger Custom Domain ). Fitur sitemap blogspot ini sebagai berikut:

1. Responsive : Sitemap ini sudah didesain responsive sehingga tetap bisa diakses melalui perangkat mobile dengan tampilan yang keren.
2. Sederhana dan Keren: Memiliki tampilan yang sedap dipandang mata dengan warna yang segar namun tetap elegan.
3. Fast loading : server script js terbaik sehingga loading ringan.
4. Otomatis : Sitemap ini akan update otomatis jika ada artikel atau postingan baru yang dipublikasikan dengan tanda New!!! artinya artikel baru.

Screenshot:

Tampilan Desktop (Komputer atau Laptop)

Tampilan Mobile (Responsive)

Bagaimana lengkap dan keren bukan? dengan sitemap ini tentu blog akan terlihat sangat keren, untuk demo dan tampilan nanti saya jelaskan dibawah. Saya selaku admin mengucapkan banyak terima kasih kepada Mas Taufik Nurrohman admin Dte.web.id yang sudah membuat sitemap keren ini.

Sitemap ini menampilkan sebuah susunan label blog, jika nanti di klik pada label maka akan muncul semua artikel yang ada pada label tersebut. Berikut langkah-langkah untuk memasang sitemap di blogspot.

Cara Membuat Sitemap SEO Otomatis dan Responsive di Blogspot Blogger

1. Buka akun Blogger > Pilih Blog yang ingin dipasang sitemap> Masuk Menu Halaman > Halaman Baru
   
2. Buat Judul dengan “Sitemap” atau “Daftar Isi” lalu masukkan kode berikut pada mode HTML.

   <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}
   @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: "https://bloggerjepara.net/", // 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>

3. Publikasikan dan lihat hasilnya.

Catatan Penting:

Silahkan ganti https://bloggerjepara.net/ dengan URL blog anda:

blogUrl: “https://bloggerjepara.net/“, // Blog URL

Baca Juga: Cara Membuat Popular Post Keren Berwarna di Blogger