Cara Membuat Halaman Daftar Isi Accordian Keren di Blogger


Coretancode.com - Pada kesempatan kali ini admin ingin berbagi lagi seputar dunia blogging yaitu Cara Membuat Halaman Daftar Isi Accordian Keren yang menurut kami masih terbilang baru dan belum ada yang membagikannya di blog manapun.

Daftar Isi ini sendiri sangat penting dan juga harus ada pada setiap blog, kenapa? dengan adanya fitur ini tentu akan lebih memudahkan blog dirayapi oleh mesin pencari seperti google, dan lainnya. Mungkin dibeberapa kasus bisa kalian temukan sebuah perbedaan antara blog dan situs yang dimana blog diharuskan memasang daftar isi namun sebuah situs malah sebaliknya.

Hal ini dikarenakan sebuah website biasanya hanya menyediakan jasa dan cukup memberikan navigasi tentang jasanya, sedangkan untuk blog ini sendiri sangat diharuskan pemilik blog membuat halaman Daftar Isi untuk mempermudah visitor menelusuri isi atau konten dari sebuah blog.

Dengan adanya halaman daftar isi / sitemap tentu pengunjung akan lebih mudah memilah kategori konten yang tersedia di blog.

Pengertian Daftar Isi

Daftar isi atau sitemap adalah sebuah cara untuk menginformasikan halaman-halaman web kepada search engine seperti google, yahoo, dan lain-lain.

Contoh sitemap yang sederhana bisa berbentuk file XML, yang berisi tentang darfat URL sebuah situs dengan metanya, kapan terakhir update, jumlah konten, dan lain sebagainya.

Manfaatnya

Daftar isi sendiri banyak sekali manfaatnya untuk sebuah blog, diantaranya adalah sebagai berikut.
  • Memudahkan search engine merayapi blog.
  • Visibilitas sebuah situs / blog.
  • Meningkatkan persentase konten menjadi yang utama di mesin pencarian.
  • Meningkatkan kualitas dan nilai SEO blog.
  • Meningkatkan bisnis.
  • Melengkapi kebijakan dan persyaratan untuk menjadi partner google adsense.

Sebenarnya masih ada cara alternatif yang tentu lebih mudah hanya saja tampilan yang dihasilkan akan terlihat biasa saja atau standart, oleh karena itulah admin share tutorial ini agar lebih bervariasi dan juga lebih menarik.

Mau tau seperti apa nanti hasilnya? silahkan lihat screenshot dibawah ini, atau langsung kunjungi halaman demo sitemap.

Screenshot Sitemap

Live Preview

Cara Membuat Halaman Daftar Isi

Untuk membuat halaman daftar isi seperti contoh diatas, kalian hanya perlu menambahkan kode CSS di template dan memasukkan kode HTML sitemap pada halaman target. Lebih jelasnya bisa anda ikuti tutorial dibawah ini.

Perhatian!
Pastikan sudah backup template anda terlebih dahulu sebelum melanjutkan ke tutorial!

1. Menambahkan CSS

  1. Pastikan sudah login ke Blogger.com
  2. Pada menu dashboard, silahkan pilih Template > Edit HTML
  3. Lalu cari kode ]]></b:skin> pada template.
    Untuk memudahkan pencarian, gunakan tombol pintasan CTRL+F di keyboard.
  4. Kemudian salin kode CSS berikut, dan letakkan diatas kode pada (langkah no.3)
    */ Sitemap Accordian by Coretancode.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:'Read more';display:block;color:#767676;font-size:11px;line-height:1.3em}
    .Blog .sitemaps li a:hover:after{text-decoration:underline}
  5. Save Template.

2. Menambahkan Kode HTML

  1. Pada menu dashboard blogger, silahkan pilih Halaman > lalu buat Halaman Baru.
  2. Gunakan metode penulisan HTML bukan Compose
  3. Salin dan letakkan kode HTML berikut pada teks area yang tersedia.
    <div id='post-body'><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://urlblog.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></div>
    </div>
    Keterangan:
    Ganti tulisan kode yang sudah ditandai dengan URL blog kalian.
  4. Publikasikan.

Penutup

Apakah ada yang kurang jelas dari penjelasan dan tutorial diatas? jika kurang jelas, silahkan tanyakan melalui kolom komentar yang tersedia dibawah artikel. Dengan senang hati saya akan membalas pertanyaan yang sudah kalian berikan, jadi jangan ragu-ragu untuk bertanya ya.

Mungkin sekian dahulu artikel dari Cara Membuat Halaman Daftar Isi Keren di Blogger, semoga selalu bermanfaat untuk kalian semuanya.
Terima kasih

Baca juga

Posting Komentar