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 membuatkan Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. yang sanggup di bilang daftar isi ini sangat simple sebab pengunjung pun sanggup melihat daftar isi yang kita punya sesuai dengan berdasarkan label.
Cara terbaru menciptakan sitemap dengan model hidangan 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, kalau sahabat ingin mencoba nya silahkan sahabat ikuti langkah - langkah di bawah ini.
Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown
Silahkan sahabat 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 sahabat buka halaman statis sobat, kalau di halaman tersebut sahabat sudah menciptakan sitemap silahkan sahabat 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 sahabat yang sedang mencari Cara Terbaru Membuat Sitemap Di Blog Dengan Model Menu Dropdown. Salam blogger!
