Blogger

Cara Membuat Sitemap SEO Keren di Blogspot

Update Terbaru:

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.

Cara Membuat Sitemap XML untuk Submit Google Webmaster

Perlu diperhatikan bahwa sitemap ada 2 macam yaitu sitemap HTML dan sitemap XML. Untuk sitemap HTML seperti tutorial diatas yang dipasang pada laman blogger atau blogspot Anda, sedangkan sitemap XML untuk submit di google webmaster atau mesin pencari lainnya seperti bing atau yandex.

Berikut sitemap xml untuk blogspot atau blogger custom domain:

  1. Cukup menambahkan sitemap.xml diakhir url blog contoh: https://penaindigo.blogspot.com/sitemap.xml
  2. Sitemap atom yaitu menambahkan feeds/posts/default?max-results=400 jika ditambahkan pada url blog menjadi https://penaindigo.blogspot.com/feeds/posts/default?max-results=400

Untuk submit sitemap di Google Webmaster Tools cukup menambahkan sitemap.xml saja lalu submit. Selesai.

Baca juga: Cara Mudah Membuat Fanspage Facebook Tampil di Blog

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

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

Artikel Lainnya

229 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. 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.

  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?

  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.

  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..

  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.

    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.

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

  14. 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.

    1. Saya sudah coba semuanya lancar, hanya artikel terbaru saja yang ada keterangan new. Saran saya gunakan pilihan sitemap lainnya untuk mengetahui letak kesalahannya.

    1. Pastikan pemasangan lewat mode HTML dan langsung publish aja jangan dipindah ke mode compose. Biasanya permasalahan itu yang sering terjadi. Semoga dapat membantu

    1. Sama-sama Mas Agas, untuk mengganti warna biru harus edit script .js terlebih dahulu baru bisa melakukan editing. Kalau belum paham sebaiknya gunakan yang ada aja.

    1. Script sudah saya perbaiki, sekarang sudah support https. Bisa dicoba keduanya mungkin ada salah satu yang bisa dipakai.

  15. Sebelumnya menambahkan laman sitemap ngikut tutorial di blog sebelah, tapi muncul peringatan di search console. Saya coba yg ini semoga ga ada peringatan di search console

    1. Mas Huda, kalau untuk sitemap search console tidak memakai sitemap ini. Mas cuma menambahkan sitemap.xml saja. Karena sitemap ini hanya untuk pembaca blog saja.

    1. Untuk menampilkan sitemap dengan satu label saja harus edit script terlebih dahulu.
      Lain waktu akan saya posting tutorial membuat sitemal satu label atau sitemap perkategori. Mohon ditunggu ya.

  16. Hi mas. Terima kasih tutorialnya

    Tadinay saya coba yang versii 2 tapi gagal. Nda muncul menunya
    Nah yang model no 1 yang berhasil

    Terima Kasih ya mas

    Salam dari Blogger Pontianak

    1. Salam kenal juga dari Blogger Jepara, Sitemap memang penting untuk dipasang. Agar pengunjung bisa dengan mudah untuk mencari artikel yang diinginkan.

  17. Yang model 1 gak bisa diciutkan gitu ya mas? Contohnya, kan menurut label tapi saya pengen diciutkan seperti model 2 biar nanti pengunjung yang milih label sama kontennya.

  18. Admin Pena Indigo, Mas Zain terima kasih banyak sitemapnya sangat bagus. Izin menggunakan sitemap dua.

    Terkait sitemap dua. Kira kira bisa atau tidak mas, warnanya dari biru diubah ke hijau, dan caranya bagaimana mas?

    Adakah tutorial terkait hal ini?

    Sekali lagi terima kasih banyak mas, salam hangat

    1. Untuk mengubah warna harus edit css terlebih dahulu, dan ini cukup rumit. Banyak sekali tutorial edit kode css, Namun di blog ini belum tersedia.

  19. Bagaimana cara mengubah Warna Font Label (css Labl)?
    saya ubah tidak bisa, hanya baground yang bisa.
    Blog di kuakecsitubondo(dot)online/p/daftar-isi.html

    1. Saya lihat ada keterkaitan kode link dengan post-body, jadi untuk lebih mudahnya ganti aja pada bagian background judul label. Silahkan edit bagian .labl (background: #3498DB;) bisa ganti dengan warna putih #fff. Semoga dapat membantu.

    1. Perlu diperhatikan, sitemap itu ada 2 macam; 1. sitemap sebagai daftar isi blog, ini akan menampilkan seluruh postingan blog yang dapat dengan mudah diakses oleh pengunjung biasanya ditampilkan perkategori/label. 2. sitemap untuk mesin pencari seperti Google Webmaster Tools agar seluruh artikel bisa dengan mudah dikenali oleh mesin pencari. Silahkan baca penjelasannya disini: https://penaindigo.com/cara-daftar-blog-di-google-webmaster-tools/

      Seperti itu penjelasannya, jika masih bingung boleh ditanyakan kembali. terima kasih

  20. Keren sitemap nya, mas Zain. Permisi, boleh copas ya? Aku pakai versi 1.
    Mau tanya, aku coba versi 2 tapi kolom labelnya koq terlalu sempit? Bagaimana cara mengubahnya agar lebih lebar?
    Makasih banyak info dan tanggapannya.

    1. Silahkan mas dipakai sitemapnya, versi 2 saya coba kolomnya normal-normal saja. Namun jika masnya ingin lebih lebar bisa edit bagian ini .tabbed-toc .toc-tabs li a silahkan tambahkan height: 35px; atau sesuai selera dan bagian lis post edit yang ini .tabbed-toc .panel li a silahkan tambahkan height: 35px (silahkan sesuaikan sendiri). Atau edit bagian paddingnya juga bisa (padding yang depan).
      Semoga dapat membantu.

    1. Itu karena pemasangan yang salah, untuk memasukkan kode html pada halaman harus memilih mode HTML bukan COMPOSE. Silahkan dicoba dan semoga berhasil.

  21. makasih banyak bro,,berhasil pasang yg versi 2 keren banget, sdh lama nyari2 kode sitemap keren kebanyakan error,akhirnya pake ini berhasil

    1. Sudah saya cek dan ternyata paddingnya 2.5 yang seharusnya 0.
      Jadi silahkan tambahkan kode berkut:
      .widget .post-body ul {padding: 0;}

    1. Kalau sitemap yang ini untuk pengunjung bukan untuk search engine jadi tidak ada pengaruhnya pada index.
      Kalau masalah indek itu submit sitemap di google webmaster atau bing, tutorialnya sudah ada di blog ini.
      Terima kasih

  22. Luar biasa, saya merasa terbantu sekali dengan tips cara membuat sitemap ini. 100% works.

    Padahal sebelumnya sudah mencoba memakai banyak sitemap tetapi nampaknya belum berjodoh. Akhirnya ketemu tutorial disini.

    Terimakasih, sukses selalu untuk penadindigo.

  23. Ini yang ane cari, gan. Soalnya kuatir sama yang rawgit ane. Boleh pakai ya Gan dan tengkiyu banyak, agan memang jempolan sumbernya langsung cdn dan jauh lebih meyakinkan he he he

  24. Sudah saya gunakan dan berhasil gan
    cuman ada beberapa masalah karena setelah saya daftarkan ke webmaster
    terdapat error dan disarankan menggunakan Sitemap yang resmi

    ada solusi gan?

    1. Sitemap untuk google webmaster memang beda dengan sitemap ini. Sitemap ini untuk pengunjung saja gan, kalau sitemap untuk webmaster gunakan sitemap.xml

  25. Izin copas kode sitemap bang, sama buat tutorial baru tentang sitemap. Artikel sangat bermanfaat terutama bagi saya yang masih awam banget di blog.

  26. gan kok pas di pasang site map kaya gini rata2 postingan saya ga ke baca semua ya ??

    jadi yang muncul hanya beberapa saja di site map nya

    itu gimana ya caranya

    agar seluruh postingannya muncul semua di site map

  27. Gan saya menggunakan sitemap yang ke 2, tapi postingan terbaru ada di bawah ya?
    Bagaimana caranya supaya postingan terbaru ada di atas?

    1. Artikel diurutkan sesuai dengan abjad, jadi otomatis mengikuti urutan yang ada. kalau postingan terbaru ada keterangan new.

  28. Mas.. biar pengurutan postnya sesuai date gimana?
    Ini sitemap nya diurutkan berdasarkan huruf kurang pas di blog saya

  29. Keren banget tutorialnya. Alhamdulillah, saya langsung terpasang. terima kasih, ya….ditunggu tips2 berikutnya.

  30. Artikel nya menarik kak,udah tak coba di blog saya ngefek kak,mau coba bikin Thema kak,bikin artikel yang bahas tuntas kak biar laris

    1. Membuat theme cukup ribet dan memerlukan banyak waktu, jadi saya belum bisa membuatnya. Paling hanya untuk konsumsi sendiri.

  31. makasih banyak untuk sharingnya mas πŸ™‚ akhirnya nemu code yang bisa muncul. Setelah nyoba dari beberapa provider hasilnya kosog terus yang ini akhirnya berhasil πŸ™‚

  32. Alhamdulillah, bisa diterapkan di blog saya setelah di copy scriptnya dan di pratinjau. jadi saya izin copas yaa min… Terima Kasih min…..

  33. Mas, ini sitemap yg digunakan untuk pengindexan di google bukan? Kalau untuk index artikel ini, sitemapnya yg mana ya? Soalnya saya masih bingung untuk bikin sitemap yg untk terindex di google atau bing. Mohon penjelasannya.

    1. Sitemap ini untuk pengunjung saja atau disebut sitemap HTML, untuk submit sitemap di webmater bisa gunakan sitemap xml. Pengguna blogspot atau blogger bisa menggunakan sitemap.xml kalau pengguna wordpress bisa isnstal plugin google xml sitemap.

  34. Saya baru pindah domain dari blogspot ke domain TLD. Semua tema juga saya rubah. Terimakasi atas tips nya karena website saya bisa tampil lebih keren lagi. Makasih makasih ……

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button
Close