Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown

Di artikel sebelum nya saya juga sempat membuat Tutorial Cara Membuat Sitemap di Blogger SEO Friendly (UPDATE 2018). Dan pasti nya setiap blog mempunyai sitemap atau daftar isi yang model nya bermacam - macam. Tapi untuk artikel ini daftar isi nya berbeda dari yang sebelum nya.

Dan pada artikel kali ini saya ingin mencoba berbagi Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. yang bisa di bilang daftar isi ini sangat simple karena pengunjung pun bisa melihat daftar isi yang kita punya sesuai dengan berdasarkan label.

Cara terbaru membuat sitemap dengan model menu dropdown ini saya dapatkan dari artikel nya mba igniel yang berjudul Membuat Daftar Isi (Sitemap) di Blog Berdasarkan Label dengan Menu Dropdown

Berhubung menurut saya artikel ini menarik jadi maaf yaa untuk mba igniel kalo saya ikut posting artikel mba disini. :D ( kali aja dia ngintip artikel ini )

Mungkin langsung saja kita mulai tutorial kali ini, bila sobat ingin mencoba nya silahkan sobat ikuti langkah - langkah di bawah ini.

Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown

Silahkan sobat copy kode CSS di bawah ini, lalu letakan kode tersebut di atas kode </style> pada template sobat.

/* Sitemap */
.table-of-content{background-color:#fff;color:#1d2129;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:14px;font-weight:400;overflow:hidden;border:1px solid #008c5f;}
.table-of-content .toc-header {color:#1d2129;font-family:inherit; font-weight:bold; font-size:14px; background-color:#fff; margin:0; padding:15px; overflow:hidden; cursor:pointer; border-bottom:1px solid #cccfe2; transition:initial;}
.table-of-content .toc-header:hover{background-color:#008c5f; color:#fff}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:relative;float:right;top:10px;right:10px;border:5px solid transparent;border-color:#1d2129 transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{background-color:#008c5f;color:#fff;font-weight:bold}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:5px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .toc-content li  a {color:#fff; text-decoration:none;}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content ol li {-webkit-margin-start:0px !important; background:#1d2129; line-height:normal!important; margin:0!important; padding:8px 8px 8px 15px!important; text-align:left; overflow:hidden; transition:initial; border-bottom:1px solid #eee}
.table-of-content ol li:first-child{border-top:0}
.table-of-content ol li:last-child{border-bottom:1px solid #cccfe2}

Lalu silahkan sobat buka halaman statis sobat, bila di halaman tersebut sobat sudah membuat sitemap silahkan sobat hapus isi dari halaman sitemap tersebut dan ganti dengan isi atau kode di bawah ini.

<div class="table-of-content" id="table-of-content"><span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
  url: '/',
  containerId: 'table-of-content',
  showNew: 15,
  sortAlphabetically: {
      thePanel: true,
      theList: true
  },
  maxResults: 9999,
  activePanel: 1,
  slideSpeed: {
      down: 400,
      up: 400
  },
  slideEasing: {
      down: null,
      up: null
  },
  slideCallback: {
      down: function() {},
      up: function() {}
  },
  clickCallback: function() {},
  jsonCallback: '_toc',
  delayLoading: 0
};
!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+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><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+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&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>

Dan silahkan publish halaman sitemap sobat.

• Demo

Bagaiamana menurut sobat? Simple dan pasti nya keren dong! Mungkin itu saja yang bisa saya bagikan pada kesempatan kali ini. semoga artikel ini bisa bermanfaat buat sobat yang sedang mencari Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. Salam blogger!

Share this post