Cara Membuat Sitemap Keren Untuk Blogger

Sitemap atau peta situs sangatlah penting untuk kebutuhan indexing oleh google dan sebagai halaman peta situs pada blog sobat. 
calonseo.com
Langkah-langkahnya pun sangatlah mudah, bagi sobat yang baru terjun keduania blogging bisa mengikuti langkah berikut ini:

Langkah Pertama:
1. Login ke akun blogger sobat
2. Klik menu setting/setelan yang berada di sidebar kiri, kemudian klik juga Search Preferences / Preferensi Penelusuran.
3. Pada robots.txt khusus / custom, klik edit lalu aktifkan/enabled.
4. Kemudian pada kolom kotaknya sobat isikan seperti gambar dibawah ini:

Calon SEO

Pada gambar diatas, silahkan sobat ganti url blog diatas dengan url blog sobat. 

5. Simpan Perubahan.

Langkah Kedua:
Pada langkah kedua ini adalah langkah untuk menambahkan url sitemap pada webmaster tools. Fungsinya adalah supaya google bot segera mengindexnya dalam beberapa waktu kemudian. Caranya adalah sebagai berikut:

1. Masuk ke webmaster tools, bisa langsung di blogger, lihat gambar dibawah ini:


2. Klik edit, maka sobat akan dialihkan ke halaman webmaster tools google.
3. Pilih menu Sitemap yang berada di sidebar kiri, lihat gambar dibawah ini:




4. Pada jendela sebelah kanan add new sitemap - kemudian submit, lihat gambar dibawah ini:



5. Tunggu prosess hingga seperti gambar dibawah ini:


Langkah Ketiga:
Pada langkah terakhir inilah yang paling menarik sobat, mengapa? disini sobat bisa memodifikasi tampilan sitemap sebagai halaman peta situs blog sobat atau daftar isi blog, sehingga memudahkan pengunjung untuk mencari artikel yang mereka butuhkan dengan mudah dan menarik.

Baiklah tanpa basa basi lagi, mari sobat simak tutorialnya dibawah ini:

- Kembali ke dashboard blogger sobat
- Pada sidebar sebelah kiri klik pages/halaman kemudian new page / buat halaman
- Ubah format penulisan dari compose ke HTML.
- Jangan lupa memberi judul halaman contoh : Sitemap / Daftar isi
- Masukan kode dibawah ini:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<div id='wrapper'>
<div dir="ltr" style="text-align:left;" trbidi="on">
<div class="nessa-sitemap" id="nessa-sitemap">
<span class="loading">Loading Content..</span></div>
</div>
</div>

<script type="text/javascript">
    var toc_config = {
    url:'https://www.calonseo.com',
    containerId: 'nessa-sitemap',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FF0000;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:2px;">New!</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);

</script>

Pada kode diatas, silahkan sobat ganti url blog diatas yang cs tandai warna biru dengan url blog sobat, kemudian simpan halaman.

Langkah selanjutnya, sobat klik theme/tema - edit html. Kemudian sobat download kode CSS dibawah ini, lalu copy atau salin dan tempel kode css nya tepat sebelum kode </head>, kemudian simpan template.
Download
CSS Sitemap
Calon SEO

Silahkan sobat kembali kehalaman yang tadi sobat buat, kemudian lihat hasilnya.

Mungkin sampai disini dulu ya informasi yang dapat CS sampaikan kepada sobat. Semoga bisa bermanfaat. Jika ada hal lain atau kendala lain, bisa sobat sampaikan kepada saya melalui contact form, atau bisa juga langsung meninggalkan jejak di kolom komentar dibawah ini.

Terima kasih
DEMO
Demo Sitemap
Calon SEO

1 Response to "Cara Membuat Sitemap Keren Untuk Blogger"

Berkomentarlah dengan bijak dan sesuai artikel yang anda baca.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel