Cara Membuat Sitemap Sesuai Label Di Blog

Halaman sitemap memiliki peran yang sangat penting untuk sebuah blog maupun website.
Cara membuat sitemap elegan dengan mudah dan sesuai label diblog - Halaman sitemap memiliki peran yang sangat penting untuk sebuah blog maupun website. Dengan adanya sitemap, para pengunjung dapat mencari konten yang ada di blog dengan mudah dan cepat. Bahkan sitemap juga akan membantu mempercepat indeks blog. 

Di artikel kali ini saya akan memberikan tutorial cara membuat sitemap di halaman statis blog dengan mudah. Sitemap ini terbilang cukup simpel dan ramah pandangan. Yang artinya sitemap ini memiliki model yang bersih, simpel dan yang pasti responsive di semua perangkat. Dan kelebihan dari sitemap ini juga adalah sitemap yang fast loading. Karena tidak ada pemuatan gambar padanya. Sehingga para pengunjung blog tidak perlu menunggu lama untuk memunculkan sitemap ini.

Untuk cara memasang sitemap ini diblog, kamu bisa ikuti langkah-langkah yang ada dibawah ini. Berikut adalah cara membuat sitemap yang keren dan elegan diblog.

Cara Membuat Sitemap Sesuai Label Di Halaman Statis Blog Dengan Mudah


Gambar Cara Membuat Sitemap Sesuai Label Di Blog

  • Masuk ke dashboard blogger kamu.
  • Masuk ke halaman statis yang ingin kamu buat sitemap ini. 
  • Setelah itu langsung pindahkan ke mode HTML (bukan Compose) kolom yang tersedia.
  • Kemudian salin dan taruh semua kode dibawah ini ke dalam kolom tersebut.

<div id='sitemaps' class='sitemaps'>
  <div class='loading'>Harap Tunggu Sebentar...</div>
</div>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown by Tekno-Thalib */
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://teknothalib.blogspot.com/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>

Jangan lupa ganti terlebih dahulu url yang sudah ditandai dengan tag kbd diatas. Ganti dengan url homepage masing-masing. Dan kamu juga bisa ganti teks yang diwarnai warna kuning dengan teks atau tulisan yang akan muncul nantinya saat sitemap ini mulai di muat. Setelah itu klik simpan atau publikasikan.

  • Selesai. 

Untuk result atau demonya, bisa kamu lihat langsung di halaman sitemap blog ini. Sitemap ini juga dipakai diblog ini. 


Sitemap diblog ini sudah di update dan pastinya sudah berbeda lagi dengan sitemap yang ada diatas. Tapi hasilnya tetap bisa di lihat disini

Demikian tutorial cara membuat sitemap yang keren dan elegan di halaman statis blog sesuai label yang bisa dibahas pada artikel kali ini. Semoga bisa bermanfaat dan tidak ada keluhan eror.


There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!