Cara Membuat Sitemap di Blogger
![]() |
Cara Membuat Sitemap di Blogger |
Pada Artikel kali ini tentang, Cara Membuat Sitemap di Halaman Statis Blogger yang tentu selain tampilannya baru juga kelebihannya yaitu responsive.
Sitemap kali ini memiliki tampilan yang cenderung unik minimalis dengan penyortiran artikel berdasarkan label yang ada di blog kalian. Untuk lebih jelasnya, kalian bisa lihat halaman sitemap yang ada pada blog admin.
Tahukah kalian seberapa pentingnya sitemap pada sebuah situs web? Jika diibaratkan perjalanan sitemap inilah yang berfungsi sebagai penunjuk jalan agar kalain agar tidak tersesat saat mengunjungi suatu tempat. Fungsi itulah yang membuat sitemap harus ada pada sebuah situs web.
Daftar isi
Pada artikel kali ini, kalian hanya perlu menambahkan CSS dan HTML ke dalam template dan juga halaman statis blogger, contoh hasil jadinya seperti berikut ini.
Pengertian Sitemap
Sitemap / Daftar Isi ini merupakan sebuah halaman yang berfungsi sebagai alat bantu para webmaster terutama para blogger seperti kalian, untuk mempermudah dalam pengenalan peta situs di dalam sebuah website yang kalian buat. Dengan adanya sitemap, maka situs atau website kalian dapat mudah diraih oleh mesin perayap dan tentunya juga untuk pengunjung.Menurut para webmaster, sitemap juga bisa mempengaruhi nilai SEO website yang kalian kelola. Mengapa demikian? karena dengan adanya halaman sitemap, kalian selaku owner web akan terbantu dengan tidak harus submit URL artikel secara manual ke google search console ( tapi ya saya sih tetep submit ke GSC secara manual biar lebih pasti heheh ).
Fungsi Sitemap
Berikut ini adalah fungsi dari sitemap / daftar isi yang saya ketahui diantaranya adalah,- Mempermudah pengunjung untuk menjelajahi isi dari website yang kita kelola.
- Visibilitas website
- Berinteraksi lebih baik dengan mesin pencari.
- Meningkatkan pengunjng.
- Merapihkan Authority
Cara Membuat Sitemap di Blogger
Untuk membuat suatu sitemap pada halaman statis blogger, kalian hanya perlu menambahkan kode CSS ke dalam template dan kode HTML ke dalam halaman baru.
Perlu diketahui bahwa tutorial ini hanya menggunakan CSS dan HTML, tanpa adanya tambahan dari JavaScript.
Perhatian!
Sebelum melanjutkan ke tutorial, ada baiknya kalian backup terlebih dahulu sitemap kalian yang telah kalian pakai.
Sebelum melanjutkan ke tutorial, ada baiknya kalian backup terlebih dahulu sitemap kalian yang telah kalian pakai.
A. Menambahkan Kode CSS Sitemap
- Silahkan login terlebih dahulu ke Blogger.com
- Pada menu dashboard, pilih Template > Edit HTML
- Lalu cari kode ]]></b:skin>
- Salin kode CSS dibawah ini, dan letakkan sebelum kode pada (langkah no.3).
- Save Template
Gunakan tombolCTRL +F di keyboard untuk memudahkan pencarian.
*/ Sitemap by RuangCoder.com */
.Blog .sitemaps .sitemap-box{font-size:14px;line-height:1.5em;padding:15px 18px;border-radius:8px;background-color:rgba(255,255,255,.7);box-shadow:0 4px 12px 0 rgba(9,32,76,.035)}
.Blog .sitemaps .sitemap-box:not(:last-child){margin-bottom:15px}
.Blog .sitemaps .judul{margin-top:0;font-size:1.1rem}
.Blog .sitemaps ol{list-style:none;margin:20px 0 0;padding:0;counter-reset:panduan-count;font-size:14px;}
.Blog .sitemaps li:not(:last-child){margin-bottom:10px}
.Blog .sitemaps li{display:flex;align-items:flex-start;}
.Blog .sitemaps li:before{content:counter(panduan-count) '.';counter-increment:panduan-count;flex-shrink:0;width:45px;font-size:26px;line-height:1em;color:#767676;text-align:center;padding-right:12px}
.Blog .sitemaps li a{display:inline-block;color:#161617}
.Blog .sitemaps li a:after{content:'Selengkapnya';display:block;color:#767676;font-size:11px;line-height:1.3em}
.Blog .sitemaps li a:hover:after{text-decoration:underline}
B. Menambahkan Kode HTML di Halaman
- Pastikan tetap berada di dashbord blogger.
- Lalu pilih Halaman > dan buat Halaman Baru
- Ubah mode penulisan ke HTML bukan
Compose - Kemudian salin kode berikut ini dan letakkan ke dalam teks area halaman.
- Publikasikan
<div id='post-body'><div id='sitemaps' class='sitemaps'>
<div class='loading'>Loading....</div>
</div>
<script>/*<![CDATA]*/
/* Blogger Sitemap RuangCoder.com */
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="URL-BLOG/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></div>
</div>
Keterangan:
Ubah yang sudah di marking dengan URL Blog kalian.
Ubah yang sudah di marking dengan URL Blog kalian.
Penutup
Nah, disini kalian sudah berhasil membuat sitemap di halaman statis blogger kalian. Jika ada bug atau kalian belum paham jangan ragu - ragu untuk bertanya melalui kolom komentar yang tersedia dibawah artikel ini.
Mungkin sekian dahulu postingan dari Cara Membuat Sitemap di Blogger, semoga bermanfaat.
Terimakasih
Posting Komentar untuk "Cara Membuat Sitemap di Blogger"