Cara Membuat Halaman Sitemap Di Blogger

Halo! Selamat datang, pada tutorial ini kita akan membuat halaman sitemap untuk blog kita. Sayangnya Blogger tidak memiliki widget untuk sitemap dibandingkan dengan WordPress yang memiliki plugin bernama “Yoast SEO” yang secara otomatis membuat dan mengupdate sitemap website.

Dalam tutorial ini, Kita akan membuat halaman sitemap HTML blogger Diurutkan berdasarkan label posting, dalam urutan abjad dan atribut "Baru" untuk posting yang baru diterbitkan, sebagai style lain yang luar biasa, kita akan Membuat Halaman Sitemap Tampilan Clean dan Elegan untuk Blogger.

Saya akan menunjukkan kepada Anda cara membuat halaman Sitemap di Blogger, dengan langkah-langkah sederhana ini.

Di sini saya akan menunjukkan kepada Anda langkah demi langkah cara membuat halaman peta situs untuk blog Anda. Pertama-tama kita harus memahami seberapa pentingnya halaman sitemap untuk blog. Sitemap adalah struktur halaman dan posting blog kita. Halaman sitemap juga akan meningkatkan pengalaman pengguna. Ketika kita menambahkan halaman peta situs ke blogger / blog kita, maka pengguna kita memudahkan untuk menemukan postingan yang ingin mereka temukan. Dan yang paling penting, ketika perayapan tools Webmaster (Google Yahoo) datang ke situs web kami, penjelajahan akan mudah dilakukan.

Cara Membuat Halaman Sitemap Di Blogger

Kita akan tahu langkah demi langkah bagaimana kita bisa membuat halaman sitemap untuk blog kita. Jadi ikuti semua hal yang disebutkan di bawah ini dengan cermat.

1. Langkah pertama buka Dashboard Blogger
2. Silakan Pilih menu Halaman >> Buat Halaman / klik tombol (+)
3. Kemudian kalian ubah Tampilan Menulis ke Mode Tampilan HTML bukan Tampilan Menulis / Compose
4. Silakan copy pastekan kode dibawah

        
html
        

            
        
     
<div id='sitemaps' class='sitemaps'>
  <div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!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+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><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+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src="https://www.tomytech.eu.org/feeds/posts/summary?alt=json-in-script&max-results=9999&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>

<style>
.Blog .sitemaps .sitemap-box{font-size:14px;line-height:1.5em;padding:18px 20px 25px;border-radius:4px;background-color:#fff;box-shadow: 0 6px 18px 0 rgba(9,32,76,.035);}
.dark-mode .Blog .sitemaps .sitemap-box{;background-color:#242526}
.Blog .sitemaps .sitemap-box:not(:last-child){margin-bottom:15px}
.Blog .sitemaps .judul{margin-top:0;font-size:16px;color:#313135}
.Blog .sitemaps .judul:before{content:'Label: ';margin-right:5px}
.Blog .sitemaps ol{list-style:none;margin:0;padding:0;counter-reset:panduan-count}
.Blog .sitemaps li:not(:last-child){margin-bottom:10px}
.Blog .sitemaps li{display:flex}
.Blog .sitemaps li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:40px;font-size:22px;font-family:PT Sans, sans-serif;line-height:normal;color:rgba(0,0,0,.15);}
.Blog .sitemaps li a{color:#333333;font-weight:700;font-family:PT Sans, sans-serif}
.Blog .sitemaps li a:after{content:'Read more';display:block;margin-top:2px;color:#313135;font-size:11px;font-family:'PT Sans', sans-serif;font-weight:400;line-height:1.58em}
.Blog .sitemaps li a:hover:after{text-decoration:underline}
.page .Blog article.post{border:0}
.page .Blog .breadcrumbs > *:first-child{display:block}
</style>

Silakan Ubah URL yang saya warnai atau Marking

PENTING: Jika kamu sudah memiliki CSS sitemap silakan hapus cukup tambahkan HTML/JAVASCRIPT Kode diatas.

5. Silakan Publikasikan Lihat hasilnya.

Jika Anda mengikuti tutorial dengan cermat, saya berpikir Anda tidak akan mengalami masalah apa pun, namun, jika Anda mengalami masalah, Berikan komentar di bawah dan saya akan membantu Anda! Selamat ngeblog! Dan jangan lupa share terima kasih!

Share this post