Cara Terbaru Menciptakan Sitemap Di Blog Dengan Model Hidangan Dropdown

Di artikel sebelum nya aku juga sempat menciptakan Tutorial Cara Membuat Sitemap di Blogger SEO Friendly (UPDATE 2018). Dan niscaya nya setiap blog memiliki 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 aku ingin mencoba menyebarkan Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. yang sanggup di bilang daftar isi ini sangat simple alasannya pengunjung pun sanggup melihat daftar isi yang kita punya sesuai dengan berdasarkan label.

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

Berhubung berdasarkan aku artikel ini menarik jadi maaf yaa untuk mba igniel kalo aku ikut posting artikel mba disini. :D ( kali aja beliau ngintip artikel ini )

Mungkin pribadi saja kita mulai tutorial kali ini, jikalau teman ingin mencoba nya silahkan teman ikuti langkah - langkah di bawah ini.

Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown

Silahkan teman copy isyarat CSS di bawah ini, kemudian letakan isyarat tersebut di atas isyarat </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 teman buka halaman statis sobat, jikalau di halaman tersebut teman sudah menciptakan sitemap silahkan teman hapus isi dari halaman sitemap tersebut dan ganti dengan isi atau isyarat 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 berdasarkan sobat? Simple dan niscaya nya keren dong! Mungkin itu saja yang sanggup aku bagikan pada kesempatan kali ini. biar artikel ini sanggup bermanfaat buat teman yang sedang mencari Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. Salam blogger!