GimTekno

Gaming Website

Cara Buat Sitemap di Blogger (Blogspot)

Admin Tampan010 mins
cara membuat sitemap keren dan responsive di blogger (blogspot)

Membuat laman berisi daftar isi postingan adalah cara yang baik untuk memperlihatkan semua isi postingan kamu kepada pembaca. Pada artikel kali ini, saya akan memperlihatkan cara buat sitemap di blog Blogger (Blogspot).

Berdasarkan penjealasan Google, sitemap adalah file berisi daftar pos/laman dari sebuah website yang dapat memberi tahu Google dan mesin pencari lainnya tentang struktur konten website tersebut.

Sitemap sendiri terdiri dari dua macam, yaitu XML sitemap dan HTML sitemap. Perbedaan utama di antara keduanya ada pada format penulisan serta untuk siapa sitemap tersebut ditujukan.

XML sitemap adalah daftar isi pos dan laman yang dibuat dalam format XML. Sitemap ini ditujukan untuk mesin pencari agar mereka lebih mudah merayapi dan mengindeks situs kita. Sitemap jenis ini pulalah yang kita input ke Google Search Console agar situs kita lebih cepat diindex oleh Google.

Pada blog Blogger, XML sitemap dapat kita temukan di dua alamat URL berikut,

https://namadomain.blogspot.com/sitemap.xml
https://www.namadomain.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

HTML sitemap sendiri adalah daftar isi yang biasanya berisi pos saja yang dibuat agar pembaca dapat dengan mudah melihat semua postingan di blog kita. Sesuai dengan namanya, sitemap ini ditulis dalam format HTML. Dan tidak seperti XML sitemap yang dibuat secara otomatis, HTML sitemap harus dibuat secara manual.

Cara Buat Sitemap di Blog Blogger (Blogspot)

Sebelumnya saya pernah membuat tutorial cara buat HTML sitemap di WordPress. Meski bisa dibuat secara manual, di WordPress kita bisa memakai plugin untuk membuat sitemap secara otomatis.

Sayangnya dukungan plugin ini tidak tersedia untuk pengguna Blogger (Blogspot). Namun jangan khawatir, masih ada banyak cara lain untuk membuat sitemap di Blogger.

Untuk membuatnya, kamu hanya perlu menyalin kode Javascript dan CSS di bawah ini. Untuk memasukan kode tersebut, simak cara berikut:

  • Javascript – Buat laman baru melalui menu PAGES » NEW PAGE lalu beri judul “sitemap” atau “arsip”. Pilih teks editor HTML lalu salin kode Javascript dan segera simpan.
  • CSS – Menambahkan kode CSS di Blogger bisa dilakukan dengan dua cara. Salah satunya adalah dengan menyalin kode CSS di atas tag </style> atau ]]></b:skin>.

PENTING! Sebelum menggunakan kode berikut ini, pastikan kamu mengaktifkan Blog Feed terlebih dahulu. Caranya? Masuk ke menu SETTINGS » OTHER, lalu pada bagian ALLOW FEED, pilih opsi selain NONE.

Aktifkan blog feed sebelum buat sitemap Blogger
Aktifkan blog feed sebelum buat sitemap Blogger

1. Cara Buat Sitemap Sederhana di Blogger

Cara ini adalah cara sederhana untuk menampilkan daftar semua pos di Blogger. Daftar judul postingan akan diurutkan berdasarkan waktu publikasi sehingga pembaca dapat melihat urutan pos secara kronologis.

Dengan kode ini, tampilan sitemap yang kita buat akan tampak seperti ini.

Cara buat sitemap di Blogger dengan mudah
Hasil jadi sitemap Blogger yang akan kita buat

Untuk membuatnya, buat laman baru lalu salin kode Javascript berikut:

<div id="sitemap">Loading...</div>
<script> //<![CDATA[
var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='';for(var x=0;x<sitemapArr.length;x++){print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].judul+'\">'+sitemapArr[x].judul+'</a></li>'}
elem.innerHTML='<div class=\"title\">Total Post: '+sitemapArr.length+'</div><ol>'+print+'</ol>'}}} runsitemap();
//]]> </script>

Setelah itu salin kode CSS ini di atas tag </style> atau ]]></b:skin>. 

/* Sitemap Blogger Sederhana */
#sitemap .title {background-color:#448ccb; color:#fff; font-size:150%; font-weight:400; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap a {color:#212121; text-decoration:none; transition:all .3s ease;}
#sitemap a:hover {color:#000;}
#sitemap ol {margin:0px; padding:0px;}
#sitemap ol li {color:#212121; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Psssttt, habis baca ini jangan lupa cek postingan ‘cara membuat sitemap keren‘ juga yah!

2. Cara Buat Sitemap di Blogger Sesuai Urutan Abjad

Selain diurutkan berdasarkan waktu postingan, daftar pos pada sitemap Blogger juga bisa diurutkan berdasarkan abjad (alfabetis). Untuk melakukannya, kita akan mengubah sedikit kode Javascript yang digunakan sebelumnya menjadi,

Loading...
  //<![CDATA[ var start=1;var max=150;var sitemapArr=new Array();function runsitemap(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap(root){var elem=document.getElementById('sitemap');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemapArr.push({'url':url,'title':title})} break}}} if(feed.entry.length>=max){start+=max;runsitemap()} else{var print='',a=sitemapArr.sort(function(a,b){return a.title>b.title?1:-1});for(var x=0;x<a.length;x++){print+='<li><a href=\"'+a[x].url+'\" title=\"'+a[x].title+'\">'+a[x].title+'</a></li>'} elem.innerHTML='<div class=\"title\">Total Post: '+a.length+'</div><ol>'+print+'</ol>'}}} runsitemap(); //]]>

Selesai sudah! Saya harap tutorial ini bisa membantu kamu membuat sitemap di Blogger dengan mudah. Jika ada pertanyaan, jangan segan untuk meninggalkan komentar kamu di bawah ini.

0 thoughts on “Cara Buat Sitemap di Blogger (Blogspot)”

    1. Gan, sitemap itu gunanya untuk merekam / seperti Database yang menyimpan langsung judul artikel kita. Sisi positifnya sih banyak, yang paling menonjol adalah agar pembaca yang lagi cari tutorial / cari artikel yang mereka inginkan lebih cepat. Kan udah ada form pencarian? Terkadang form pencarian juga tidak bisa tepat memberikan pencarian yang kita inginkan.

      Reply

  3. Gan, mengenai tutorial membuat Sidebar float:right agar position:fixed untuk sebagian item saja gimana bang? Kayak di blog bang kan, ada item yang positionya gak fixed, tapi ada juga yang fixed. Cara agar CSSnya gak berbenturan gimana gan?

    Reply

    1. Berhubung pakai WP, saya pakai plugin supaya ada elemen yang bisa sticky. Kalau pakai CSS coba dibuat class khusus aja supaya gak ngaruh ke semua elemen sidebar

      Reply

  4. Sitemap sederhananya sudah saya pasang di blog saya dan bekerja baik. Terima kasih. Sukses selalu.

    Reply

  6. Min dibuatkan versi drop downnya… bayangin aja klau postnya udh ratusan lebih, pastinya tembus kebawa 😀

    Reply

    1. Ah, mungkin saja berbeda, apakah di template yang mas Itank pakai ada perubahan yang harus dilakukan?
      Btw terima kasih komentarnya, saya jadi sadar ada typo di atas

      Reply

  13. Artikel nya mantep, sangat membantu
    thanks kak 🙂

    btw bagi teman-teman yang ingin belajar blog dari dasar dan pengen koding-koding keren,
    bisa mampir ke blog aku yah : monitasaki.com
    atau kamu boleh cari di google dengan mengetikkan : monita saki (paling atas)

    lihat-lihat aja dulu,
    kalau ada yang menarik dibaca dan diikuti yah tutornya
    #makasih 🙂

    Reply

    1. Iya, kayaknya beberapa kode Blogger yang saya tulis di blog ini banyak yang error skrng, padahal sebelumnya bisa. Nanti coba saya pelajari dulu y.

      Reply

        1. Terima kasih masukannya. Selain lin di atas, bisa juga pakai https://www.namablog.com/atom.xml?redirect=false&start-index=1&max-results=500

          Reply

    1. Sitemap XML itu yang kia pakai buat disubmit ke Google Search Console, kalau sitemap HTML dipasang di blogger dan biasanya diperuntukan untuk pengunjung, kayak yang ada di tutorial ini.

      Reply

        1. Cek bagian 

          print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].judul+'\">'+sitemapArr[x].judul+'</a></li>'

          Kalau mau nampilin linknya saja ganti jadi ► 

          print+='<li><a href=\"'+sitemapArr[x].url+'\" title=\"'+sitemapArr[x].url+'\">'+sitemapArr[x].url+'</a></li>'

          Kalau mau nampilin sitemap dalam bentuk nama link nya aja ubah jadi ► 

          print+='<li>'+sitemapArr[x].url+'</li>'

          Reply

  31. saya baru bikin blog di blogger dgn mengcustom domain, trus udah submit sitemap.xml dimana saat test namadomain.com/sitemap.xml berjln baik. namun postingan tsb ketika ditest di google dgn cara site:namadomain.com ada url yg tak muncul. itu knapa ya om.

    Reply

    1. untuk xml sitemap Blogger, pakai link ini mas https://www.tutorial-pedia.com//atom.xml?redirect=false&start-index=1&max-results=500

      Reply

    1. Di atas ada solusinya. Biasanya kalau tidak muncul-muncul itu karena salah masukin URL blog, atau karena Blog Feed-nya belum diaktifkan.

      Reply

    1. Kalau muncul tulisan ‘Loading’ terus biasanya karena feednya belum diaktifkan. Coba cek caranya di atas!

      Reply

  36. Setelah berbulan-bulan mencari script sitemap yang pas buat blog Saya, akhirnya dapet juga, makasih ya mas (y), cuma bisa bantu balas jasa dengan ngeklik iklan di blog mas ini

    kunjungi juga tanparagu.com

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News