Cara Mudah Membuat Sitemap Keren Terbaru di Blogspot

Draplan.com - Bagi kalian yang berkecimpung di dunia blogger mungkin sudah tidak asing lagi dengan istilah Sitemap ( Peta Situs ) atau juga daftar isi sebuah blog bisa juga website adalah halaman yang berisi seluruh postingan blog yang biasanya dikemas dengan perlabel. Dengan memiliki sitemap blog maka pengunjung bisa dengan mudahnya mencari artikel yang diinginkan.

Namun sitemap yang akan Draplan bagikan kali ini memiliki fitur yang sangat komplit dan merupakan update terbaru support fitur HTTPS Blogger custom domain Coba saja anda perhatikan Fitur sitemap blogspot ini sebagai berikut:

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

Dapat anda lihat Screenshot gambar di bawah.

Tampilan Desktop (Komputer atau Laptop)

Tampilan Mobile (Responsive)

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, karena sitemap yang saya gunakan juga seperti ini dan saya juga sangat suka dengan tampilannya yang keren dan menarik.

Kelebihan Sitemap ini menampilkan sebuah susunan label blog, jika nanti di klik pada label maka akan muncul semua artikel yang ada pada label tersebut. “Ok lah sahabat Draplan ku sekalian langsung saja saya akan kasih tahu, Berikut langkah-langkah untuk memasang sitemap di blogspot yang keren:

Cara Membuat Sitemap Blogspot Keren Terbaru

Buka akun Blogger > Pilih Blog yang ingin dipasang sitemap> Masuk Menu Halaman > Halaman Baru

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: "/", // 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>

Publikasikan dan lihat hasilnya.

Nah begitulah sahabat Draplan, sampai disini kamu sudah berhasil memasang sitemap blogspot keren, responsive dan otomatis. Jika ada kendala silahkan tanyakan melalui kotak Buka Komentar atau langsung menghubungi admin melalui kontak yang sudah tersedia. Sekian, Semoga bermanfaat..