Cara Terbaru Menciptakan Sitemap Di Blog Dengan Model Sajian 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 mengembangkan Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. yang sanggup di bilang daftar isi ini sangat simple alasannya yakni 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 eksklusif 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 arahan CSS di bawah ini, kemudian letakan arahan tersebut di atas arahan </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 arahan 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. supaya artikel ini sanggup bermanfaat buat teman yang sedang mencari Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. Salam blogger!
