Blogger

Cara Membuat Sitemap SEO Keren di Blogspot

Sitemap atau daftar isi blog dirasa sangat penting untuk memberikan ruang informasi kepada pengunjung agar mengetahui seluruh isi artikel pada blog. Kali ini saya akan memberikan tutorial cara membuat sitemap keren otomatis dan fast loading di blog. Sebenarnya sitemap default dari blogger sudah tersedia, namun terlihat biasa dan tidak menarik. Nah, dengan membuat sitemap blog keren maka akan menajadi perhatian tersendiri dimata pengunjung dan ini akan menjadikan pengunjung betah di blog yang kita kelola.

Yang paling menarik dari sitemap seo ini adalah menampilkan sitemap otomatis sesuai dengan label, jadi menampilkan judul postingan sesuai dengan label yang ada. postingan terbaru akan secara otomatis masuk dalam daftar, jadi anda tidak perlu ribet memasukkan satu persatu. Memasang sitemap di blog blogger juga tidak membutuhkan skill untuk menguasai html, karena anda tinggal copas dan memasangnya pada halaman statis.

Baca Juga: Cara Membuat Menu Navigasi Responsive di Blogspot

Sitemap SEO Keren dan Responsive Fast Loading

Berikut beberapa koleksi dari Pena Indigo untuk membuat sitemap keren. pilih salah satu sitemap dibawah ini lalu pasang pada laman blog anda. Jika anda memasang dengan benar maka sitemap sudah berhasil anda pasang di blog.

Sitemap Keren Responsive Versi 1

cara membuat sitemap di blog

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

 

Sitemap Keren Responsive Versi 2

sitemap keren blogspot blogger faast loading

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

 

Cara Memasang Sitemap Keren di Blog

Pertama, Silahkan login akun blogger anda, kemudian pilih “Laman” lalu klik tombol “Laman Baru” lihat gambar berikut:Cara Memasang Sitemap Keren di Blog

Kedua, Isi judul laman dengan “Sitemap” atau “Daftar Isi“, Pilih Mode “HTML

Ketiga, Pasang kode HTML sitemap pilihan anda, terakhir klik “Publikasikan”. Perhatikan gambar dibawah ini.Memasang Sitemap Keren responsive

Keempat, Selesai dan lihat hasilnya.

Penting:

Jika mengalami eror atau tidak bisa tampil, silahkan hapus semua kode lalu paste kembali kode sitemap diatas dan langsung publikasikan tanpa mengembalikan ke mode compose.

Update Terbaru 07 November 2018 : Memperbarui kode untuk sitemap versi 2 agar tampilan lebih keren dsn tidak terjadi eror.

Sekarang sitemap pada blog anda sudah keren dan menarik, jangan lupa share tutorial ini agar bisa diketahui oarang banyak dan lebih bermanfaat.

Sekian share info Cara Membuat Sitemap di Blog semoga dapat bermanfaat.

Artikel Lainnya

216 Comments

        1. Saya sudah cek diblog saya aman2 saja dan lancar. Mungkin bisa dicek terlebih dahulu apakah semua artikel sudah memiliki label atau belum?

      1. Mantap min sitemap yg kedua tampilan elegan bagus,, bagi saya msih pemula joss lah sangat bermanfaat info nya πŸ™‚

        #2018

  1. Bagus sitemapnya, saya pakai model yang seperti ini, sitemap blog lama saya pun juga saya ganti dengan yang ini. Terima kasih guys, sukses selalu untuk Anda.

    1. Agar bisa jalan, saat memasukkan html jangan dikembalikan ke mode compose tapi langsung publish aja. sesuai dengan pengalaman cara ini berhasil. Terima kasih semoga dapat membantu.

  2. terima kasih blognya sangat bermanfaat…
    Sitemap Keren Responsive Versi 2 di saya ko malah blank ya om? kenapa ya…

    1. Kalau terjadi blank, Setelah memasang kode sitemap pada mode HTML langsung publish aja, jangan dikembalikan ke mode compose.

  3. wah keren nih sitemapnya responsive dan pasti pengunjung bakal termanjakan saat membuka sitemap blognya, wajib pakai diblog saya nih

  4. Keren gan sitemap nya,makasih tutorialnya.nyari tutor di blog mana saja,dan akhirnya mendarat di blog ini ternyata tutornya detail.ternyata kesalahan saya sebelum nya yaitu setelah memasang html nya.saya klik compose hehe πŸ˜€

    1. Iya mas Rizky, banyak blogger yang ingin pasang sitemap dengan kode yang sudah tersedia namun hasilnya sitemap tidak muncul. Akhirnya saja uji coba dan permasalahannya pada mode penulisan. Semoga dapat bermanfaat.

  5. maaf kalo kita publis lagi artikel baru apa langsung otomatis ada di sitemap mas

    mohon penjelasannya
    terimakasih

    1. Sitemap yang saya bagikan ini sudah otomatis jadi setiap artikel baru akan secara langsung masuk pada daftar sitemap. Semoga bermanfaat

  6. Hahahaa…. mantaps gan, berhasil…. sebelumnya udah banyak coba tutorial yang lain, gagal total… terimakasih banyak.

    1. Mohon perhatikan keterangan ini “Jangan klik mode Compose setelah memasang kode HTML”. Karena permasalahannya sering disitu.

  7. thanks gaess ini membantu saya .. saya pakai nomor 2 eh baru tahu ternyata harus di klik labelnya baru muncul artikel sebelah kirinya thanks ya sukdes selalu

    1. Sama-sama Mas, Sitemap keren yang seo friendly memang sangat diperlukan oleh pengunjung untuk mendapatkan artikel yang dicari. Semoga blognya makin sukses.

  8. Ijin nanya gan. Apakah labelnya bisa dipilih? Maksudnya, apakah bisa saya tentukan label yang muncul dan mana label yang tidak muncul?

    1. Bisa Mas Dicky, Namanya sitemap otomatis sesuai dengan label tertentu. Untuk tutorialnya akan segera dibuatkan. Ditunggu ya..

  9. Maaf bang atau mas, sitemap nya di blog cuma bengong ya… di urlnya cuma begini, namablog.blogspot.co.id/#, ga bisa lihat sitemapnya, apa almt urlnya salah?cara nya gmn ya…pls help..thanks

    1. Untuk mengambil URL yang valid, sebaiknya buka blog anda kemudian copy url home page lalu paste pada tempat yang sudah disediakan pada script. Pada komentar diatas sebaiknya pada akhiran url jangan ditambahi pagar # hilangkan saja.

    1. Maksudnya tidak permanen gmna ya? sitemap ini dipasang pada laman statis dan akan update otomatis ketika ada artikel baru.

  10. Gan mau nanya gmn caranya biar sitemapnya bisa berurutan sesuai abjad..??
    yang saya maksud bukan urutan abjad labelnya..
    Contoh : “label tutorial” tapi hasil urutannya ga sesuai abjad melainkan urutannya sesuai terakhir di publish..

    1. Untuk itu harus edit kode .js, kalau menurut saya keren begitu Mas, so artikel yang baru sudah ditandai dengan keterangan New!.

  11. Pas diuji muncul 1 kesalahan
    “Peta situs Anda terlihat seperti halaman HTML. Pakai format peta situs resmi saja.”
    gimana solusinya Mas

    1. Tidak masalah Mas, yang penting tampilan sitemapnya dapat terlihat dan memudahkan pengunjung untuk mencari artikel yang diinginkan.

  12. Mas, di saya kok cuma tulisan “Memuat…” doang ya yang muncul…?

    Ket: Sudah saya isi blog dg punya saya..
    Mode sudah HTML, kalau saya pindah pada mode compose hanya terlihat kata “Memuat…” aja.

    blogsaya(dot)blogspot.co.id/p/sitemap.html
    Yg didaftarkan ke google search console apakah pakai /p/ itu atau
    blogsaya(dot)blogspot.co.id/sitemap.html ini ya mas?

    1. Sudah saya cek diblognya Mas Lukman, ternyata semua postingan tidak memiliki label atau tag. Jadi silahkan perbaiki dulu dengan memberikan label pada semua poastingan atau artikel. Pertanyaan yang kedua, untuk page atau halaman statis blogger memang menggunakan /p/ namun untuk daftar ke google webmaster bukan sitemap yang itu, tapi cukup menambahkan sitemap.xml saja pada halaman submit sitemap.

  13. Mas saya sudah praktekan dan muncul sitemapnya namun sayang hanya satu kategori aja dan itupun ga semua post muncul dikategori itu.

    1. Untuk yang versi dropdown sudah banyak yang share Mas, silahkan dicari di internet. Untuk yang saya bagikan silahkan kalau mau dimodifikasi, caranya cukup rumit jadi tidak bisa share disini.

  14. Sitemap saya sudah running normal,tadinya saya coba gagal di blog saya motroz(dot)blogspot(dot)com .Thanks sudah sharing,Mas

  15. Makasih kodenya Min.. udah saya pakai ke blog. Pengen nunjukin hasilnya, tapi malu karena jelas jenis blognya tabu untuk dibaca wkwk.. Sekali lagi makasih Min.. πŸ™‚

    1. Silahkan Mas, sitemapnya masih hangat buat dipopulerkan. Agar tampilan makin keren dan pengunjung lebih mudah membaca artikel yang diinginkan.

  16. bang admin itu biar label new – nya jadi sedikit gitu gimana masa di blog saya semua artikel ber label new semua,