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 ialah 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 ia ngintip artikel ini )
Mungkin pribadi saja kita mulai tutorial kali ini, kalau 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 instruksi CSS di bawah ini, kemudian letakan instruksi tersebut di atas instruksi </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, kalau di halaman tersebut teman sudah menciptakan sitemap silahkan teman hapus isi dari halaman sitemap tersebut dan ganti dengan isi atau instruksi 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.
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!
Share this Article