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:
- 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.
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
- 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: "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: ' – <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.
Catatan Penting:
Silahkan ganti https://bloggerjepara.net/ dengan URL blog anda:
blogUrl: “https://bloggerjepara.net/“, // Blog URL
Wish… Ini Sitemap Blogger yang beda dari yang lain..
Iya Mas, ini tampilan baru silahkan dicoba. Salam Kenal dari Blogger Jepara.
tampilannya hebat gan, saya ijin copy
Monggo dicopy buat koleksi dan pasang diblog agar pengunjungnya lebih mudah mencari artikel yang diinginkan.
mas dipasang blog saya tapi hasilnya berantakan. label diatas tapi judulnya dibawah
Pakai template apa ya Mas? saya sudah coba di beberapa blog saya hasilnya bagus.
klo hasilnya cuman sedang memuat…, apanya ya yang salah
setelah pasang script jangan kembalikan ke mode compose. langsung aja publikasikan.
gan ijin myoba
Terima kasih bro penyampainnya simple dan saya minta izin ambil html site mapnya ya
Silahkan mas, semoga pengunjungnya lebih mudah untuk membaca artikel yang diinginkan.
Gan, ijin pakai ya
tapi masih memuat..kira-kira kenapa ya?
Pada mode HTML yangsung saja dipublikasikan agar kode tidak berubah.
thanks gan. Work di blog saya. Sayang di blognya banyak kategori jadi munculnya juga banyak di sitemapnya
izin pakai script sitemapnya, Blog Jepara.
Silahkan dicoba, semoga cocok dengan templatenya dan pengunjung lebih mudah mencari artikel yang diinginkan.
Bang ijin copyy tas
MKasih
Silahkan mas, semoga bermanfaat.
Mantep, makasih mas..
Keren banget.
Ini tutorial yg sy cari dari dulu.
Mohon izin menggunakan di blog sy, Min.
Bisa terpasang bagus di blog sy.
Terima Kasih. Blogger Jepara.
Semoga bisa terus memberikan tutorial dan tips trik yg bermanfaat.
cara masang nya gmna mas,kasih tau donk caranya pliss
saya trus memuat
Ikuti tutorial yang sudah saya jelaskan diatas. Yang bingung bagian mana?
Thanks Gan. Mantap betollllllll…
akan Lebih Baik jika code yg akan di copy di kasih tombol sekali klik buat copy untuk meminimalisir kesalahan dalam copy script
Saran yang bagus, kedepannya akan saya tambah script untuk auto select.
Salam, Mau tanya kenapa setelah saya pasang , daftar isi postingannya kok di bawah. Bukan dimulai dari atas seperti yang postingan agan.
mohon pencerahannya . trimakasih
Daftar list postingan sesuai dengan label, dan itu acak sesuai dengan urutan abjad. Untuk artikel terbaru ditandai dengan NEW yang menandakan bahwa itu artikel terbaru.
Gan…
Mohon bantuannya
Kok punya saya cuma ada tulisan memuat yaa…!!
Pada mode HTML langsung aja publikasikan jangan dikembalikan pada mode compose.
gan..
kok tetep memuat ya yang muncul?
padahal udah sesuai saran
Mungkin themenya tidak cocok atau butuh oprek sedikit.
Gan mau tanya, kl cara buat sitemap, privacy policy dan disclaimer apa boleh langsung copy paste kode html nya dari blog2 orang lain? Katanya syarat adsense ga bole copy paste blog orang? Blm paham.. Hehe
Yang tidak boleh copas itu kontennya atau artikelnya saja, kalau soal privacy dan disclaimer sudah ada tools untuk membuatnya begitupun sitemap dan kontak.
Mas, kok saya isi sitemap nya cuma tabel biru, terus bacaannya memuat.., gtu doang, gak ada yg lain, itu gmna mas?
Pada mode HTML langsung publikasikan aja.
min izin serap nih…..
Silahkan semoga bermanfaat.
Keren mas… tampilan keren. sedikit tambahan : blogUrl: “/”, // (url blog) ganti dengan url blog masing” hehehe
contohnya giman mas ?
Tutorial sudah saya ubah, silahkan edit URL dengan URL blog sendiri sesuai catatan.
mantapp gan ini nih yang ane cari, udh ane coba work gan , makasih banyak gan
Saya sudah coba dan hasilnya sesuai keinginan..
Thanks ilmunya..
Sama-sama, pasti pengunjungnya sekarang lebih mudah untuk membaca artikel yang diinginkan.
Mantap Bos, Ijin comot
Silahkan gan agar diblognya memiliki sitemap untuk kemudahan pengunjung dalam mencari artikel yang diinginkan.
Mantab kang. Mohon ijin minta.
Silahkan dipakai Mas, semoga bermanfaat.
sudah saya praktekan sitemapnya tapi kok “memuat” terus yang nggak keluar
Pada posisi mode HTML langsung aja dipublikasikan. Biasanya masalahnya disitu gan.
Keren min, langsung ngerti dan bagus design nya
Semangat gan, ayo terus menulis.
Boleh saya coba mas…. ijin copy ya.. thx.
Silahkan gan, semoga bermanfaat.
Kok aku pusing ya 🙂
Pusingnya dimana ya? mau buat sitemap untuk pengunjung apa untuk daftarin blog ke Google Webmaster?
Ijin pakai . bagus dan beda dari yang lain
Silahkan dipakai, sitemap keren ini beda dari yang lain karena sudah saya modifikasi CSSnya.
Izin Pak, Keren banget. Terima kasih banyak
Mohon izin om , pakai sitemapnya matur nuhun om
wah mantap banget ……. aijin ane copy paste makasih………. blog saya tambah keren jadinya
sudah saya coba dan mudah2an bermanfaat
terima kasih
Terima kasih, sitemap blog saya jadi berkat ulasan ini 🙂 Salam kenal
mantap, lebih fresh gan keren dan responsive juga. terima kasih kode nya..
KEREEENNN
Ijin Copy… yhaa..
Terimakasih
mantap mas, berhasil, dan bagus tampilan sitemapnya
Keren pisannnn, thank’s ya