Cara Membuat Sitemap Seperti Median UI di Halaman Statis Blogger

6 komentar
Fernn.id - Pada kesempatan kali ini admin ingin sedikit berbagi tutorial masih seputaran dunia blogging, yakni Cara Membuat Sitemap Seperti Median UI 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. Untuk lebih jelasnya, kalian bisa lihat halaman sitemap yang ada pada blog ini.

Tahukah kalian seberapa pentingnya sitemap ada pada sebuah web? Jika diibaratkan perjalanan sitemap inilah yang berfungsi sebagai penunjuk jalan agar anda tidak tersesat saat mengunjungi suatu tempat. Fungsi itulah yang membuat sitemap harus ada pada sebuah web.


Untuk membuat sebuah sitemap ada berbagai macam cara yang bisa kalian gunakan, seperti menggunakan CSS, atau pure HTML, dan bahkan ada yang memakai Javascript untuk menjalankan efek seperti accordian dan sebagainya.

Pada tutorial kali ini, kalian hanya perlu menambahkan CSS dan HTML ke dalam template dan juga halaman statis blogger, contoh hasil jadinya seperti berikut ini.
Sitemap / Daftar Isi

Pengertian Sitemap

Sitemap / Daftar Isi merupakan sebuah halaman yang berfungsi sebagai alat bantu para webmaster untuk mempermudah dalam pengenalan peta situs di dalam sebuah website. Dengan adanya sitemap, maka situs atau website tersebut dapat mudah diraih oleh mesin perayap dan tentunya juga untuk pengunjung.

Menurut para webmaster, sitemap bisa mempengaruhi nilai SEO website yang kita kelola. Mengapa demikian? karena dengan adanya sitemap, kita selaku owner web akan terbantu dengan tidak harus submit URL artikel secara manual ke google search console.

Fungsi Sitemap

Berikut ini adalah fungsi dari sitemap / daftar isi yang kami ketahui diantaranya adalah,
  • Mempermudah pengunjung untuk menjelajahi isi dari website.
  • Visibilitas website
  • Berinteraksi lebih baik dengan mesin pencari.
  • Meningkatkan penjualan.

Cara Membuat Sitemap di Blogger

Untuk membuat 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 sentuhan Javascript.
Perhatian!
Sebelum melanjutkan ke tutorial, ada baiknya kalian backup terlebih dahulu template yang akan dipakai.

a. Menambahkan CSS Sitemap

  1. Silahkan login terlebih dahulu ke Blogger.com
  2. Pada menu dashboard, pilih Template > Edit HTML
  3. Lalu cari kode ]]></b:skin>
    Gunakan tombol CTRL+F di keyboard untuk memudahkan pencarian.
  4. Salin kode CSS berikut ini, dan letakkan sebelum kode pada (langkah no.3).
    */ Sitemap by Fernn.id */
    .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}
  5. Save Template.

b. Menambahkan HTML di Halaman

  1. Pastikan tetap berada di dashbord blogger.
  2. Lalu pilih Halaman > dan buat Halaman Baru
  3. Ubah mode penulisan ke HTML bukan Compose
  4. Kemudian salin kode berikut ini dan letakkan ke dalam teks area halaman.
    <div id='post-body'><div id='sitemaps' class='sitemaps'>
    <div class='loading'>Loading....</div>
    </div>
    <script>/*<![CDATA]*/
    /* Blogger Sitemap Fernn.id */
    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.
  5. Publikasikan.

Penutup

Nah, disini kalian sudah berhasil memasang sitemap di halaman statis blogger. 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 Seperti Median UI di Halaman Statis Blogger, semoga bermanfaat.
Terimakasih
Fernand
Fernand
Hanya seorang blogger yang hobinya coding

Related Posts

6 komentar

  1. Bisa dibikin untuk custom kategori gan?

    BalasHapus
    Balasan
    1. Gimana bro caranya supaya bisa kategori tertentu aja yang tampil

      Hapus
    2. nanti ya mas sy buatkan tutornya kalau lg gk sibuk 🙏

      Hapus
    3. Oke makasih bro ditunggu

      Hapus
    4. Tutorialnya kapan bro?

      Hapus

Posting Komentar

Dapatkan artikel terbaru!